1，直接打开simple.svg

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">

    <circle cx="100" cy="100" r="90" fill="#39F" />

    <circle cx="70" cy="80" r="20" fill="white" />

    <circle cx="130" cy="80" r="20" fill="white" />

    <circle cx="65" cy="75" r="10" fill="black" />

    <circle cx="125" cy="75" r="10" fill="black" />

    <path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" />

</svg>

2，在html中使用img标签引用 img.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>use img ref SVG</title>

</head>

<body>

    <h1>Hello SVG with &lt;img&gt;</h1>

    <p><img src="simple.svg" alt="">原始大小</p>

    <P><img src="simple.svg" alt="" width="50" height="50">50X50</P>

    <p><img src="simple.svg" alt="" width="400" height="400">400X400</p>

</body>

</html>

3，在html中直接使用svg标签 nest.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>nest</title>

</head>

<body>

    <h1>Hello Nested SVG</h1>

    <p>

        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">

    <circle cx="100" cy="100" r="90" fill="#39F" />

    <circle cx="70" cy="80" r="20" fill="white" />

    <circle cx="130" cy="80" r="20" fill="white" />

    <circle cx="65" cy="75" r="10" fill="black" />

    <circle cx="125" cy="75" r="10" fill="black" />

    <path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" />

</svg>

    </p>

</body>

</html>

4，使用css作为背景 css.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css by SVG</title>

    <style>

        body{

            background: #EFEFEF;

        }

        #bg{

            width: 400px;

            height: 400px;

            background: white url(simple.svg) repeat;

            box-shadow: rgba(0,0,0,.5) 2px 3px 10px;

            border-radius: 10px;

        }

    </style>

</head>

<body>

    <h1>Hello SVG with CSS</h1>

    <div id="bg"></div>

</body>

</html>

SVG在网页中的四种使用方式的更多相关文章

  1. java中的四种引用方式（强引用，软引用，弱引用，虚引用）

    java内存管理主要有内存分配和内存回收,都不需要程序员负责,垃圾回收的机制主要是看对象是否有引用指向该对象. java中对象的引用主要有四种:强引用,软引用,弱引用,虚引用. Java中提供这四种引 ...

  2. Java中的四种引用方式

      无论是通过引用计数算法判断对象的引用数量,还是通过可达性分析算法判断对象的引用链是否可达,判定对象是否存活都与"引用"有关.在Java语言中,将引用又分为强引用.软引用.弱引用 ...

  3. SQL中的四种连接方式

    转自:http://www.cnblogs.com/afirefly/archive/2010/10/08/1845906.html 联接条件可在FROM或WHERE子句中指定,建议在FROM子句中指 ...

  4. vs2013在使用ef6时，创建模型向导过程中，四种模型方式缺少2种

    下载eftool,并安装 https://download.microsoft.com/download/2/C/F/2CF7AFAB-4068-4DAB-88C6-CEFD770FAECD/EFTo ...

  5. Java中的四种引用

    引用定义 实际上,Java中存在四种引用,它们由强到弱依次是:强引用.软引用.弱引用.虚引用.下面我们简单介绍下这四种引用: 强引用(Strong Reference):通常我们通过new来创建一个新 ...

  6. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  7. java中的四种引用类型

    为什么需要引用: Java的内存回收不需要程序员负责,JVM会在必要时启动Java GC完成垃圾回收. Java以便我们控制对象的生存周期,提供给了我们四种引用方式,引用强度从强到弱分别为:强引用.软 ...

  8. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  9. lua中for循环的四种遍历方式

    lua中for的四种遍历方式区别 table.maxn 取最大的整数key #table 从1开始的顺序整数最大值,如1,2,3,6 #table == 3   key,value pairs 取每一 ...

随机推荐

  1. XPath语法

    XPath 是XML 的查询语言,和SQL 的角色很类似.以下面XML 为例,介绍XPath 的语法 <?xml version="1.0" encoding="I ...

  2. POJ3352 Road Construction 双连通分量+缩点

    Road Construction Description It's almost summer time, and that means that it's almost summer constr ...

  3. python之requests模块

    1.安装 pip install requests 2.基本用法 就是以某种HTTP方法向远端服务器发送一个请求而已 import requests r = requests.get('https:/ ...

  4. 轻量级别的Cache和反向代理软件---Varnish

    1.Varnish描述 1.1 Varnish的结构与特点 Varnish是一个轻量级别的Cache和反向代理软件,先进的设计理念和成熟的设计框架是Varnish的主要特点: 基于内存进行缓存,重启后 ...

  5. YouKu iOS笔试题一

    序言 最近收到某某同学将去youku的iOS笔试题的邮件,希望笔者能整理一下,并提供参考答案.笔者决定整理出来,并分享给大家.当然,与此同时,也想看看youku的笔试题到底有多难,也考考自己有多少料吧 ...

  6. logback配置

    好吧,项目中一直使用的是logback做日志记录. 开始跑Demo的时候,一直会报Failed to load class org.slf4j.impl.StaticLogger的错误.后来googl ...

  7. 关于服务器跨域问题（使用cors解决）

    1.配置cors依赖 pom中加入 <dependency> <groupId>com.thetransactioncompany</groupId> <ar ...

  8. java war 打包、解压命令（转载）

    经常将工程打包成war包,打包如下: // 将当前目录打包成war包 jar   cvf   temp.war   */  . 命令格式: java cvf 打包文件名称 要打包的目录 打包文件保存路 ...

  9. Android之Margin和Padding属性及支持的长度单位

    做了个小软件后,终于把Margin和Padding弄清楚了,现总结如下: Android的Margin和Padding跟Html的是一样的.如下图所示:黄色部分为Padding,灰色部分为Margin ...

  10. iOS 生产证书 分类： ios相关 app相关 2015-05-22 14:49 175人阅读 评论(0) 收藏

    首先登陆https://developer.apple.com(99美元账号) 选择iOS Developer program 板块下的 Certificates,Identifiers & ...