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. 如何判断js是否加载完全

    var script=document.createElement('script'); if(script.onreadystatechange){ script.onreadystatechang ...

  2. Entity Framework Power Tools Beta 3

    http://visualstudiogallery.msdn.microsoft.com/72a60b14-1581-4b9b-89f2-846072eff19d/ PM> Install-P ...

  3. iOS之Alcatraz常见插件

    转发:http://blog.csdn.net/pingchangtan367/article/details/26689497 对于Xcode是我们的开发环境,ok,怎样提高我们的效率呢,当然是使我 ...

  4. php命名空间如何引入一个变量类名？

    例子如下: $className = 'Test'; 正常 new \Require\allClass\Test(); 当然OK,但是 new \Require\allClass\$className ...

  5. javascript 中 arguments.callee属性

    javascript 中 arguments.callee属性 可以在函数内部,指向的是这个函数(或者叫做“类”)本身. 相当于PHP 中的 self 关键字. The arguments.calle ...

  6. Nginx rewrite 规则 与 proxy_pass 实现

    Nginx rewrite 规则  与 proxy_pass 实现     -------------------------------------------------------------- ...

  7. tcpdump的表达元

    (nt: True 在以下的描述中含义为: 相应条件表达式中只含有以下所列的一个特定表达元, 此时表达式为真, 即条件得到满足) dst host host如果IPv4/v6 数据包的目的域是host ...

  8. Linux终端、控制台复制粘贴

    1. 在终端下:          复制命令:Ctrl + Shift + C  组合键.          粘贴命令:Ctrl + Shift + V  组合键.  2. 在控制台下:        ...

  9. function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法。。。。

    function $(id){ return document.getElementById(id); } document.getElementById(id) 是获得id这个元素的. 相当于定义了 ...

  10. 改变导航栏title字体的大小和颜色

    方法一:自定义视图的方法 就是在导航向上添加一个titleView,可以使用一个label,再设置label的背景颜色透明,字体什么的设置就很简单了. //自定义标题视图 UILabel *title ...