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. 基于M9K块配置ROM的LCD12864图片显示实验

    先上传三张图片在说                             由于串口传输速度较慢,故此实验是在“LCD12864 液晶显示-汉字及自定义显示(并口)”基础上进一步修改而来.在写代码之前 ...

  2. MySQL：MySQL的基本操作

    1.数据库登录 格式:mysql -h主机地址 -u用户名 -p用户密码 -P端口 -D数据库 -e “SQL内容” [root@wulaoer ~]# mysql -uroot -p  2.修改密码 ...

  3. jQuery解除超链接<a>的click事件

    jQuery的 unbind 方法并不能解除超链接(即a标签)的click事件,如果想让超链接的默认click事件不发生需要如下处理: Js代码 $('#some-link-id').click(fu ...

  4. Android USER 版本与ENG 版本的差异--MTK官方解释

     分类: Android(4)  Description]Android USER 版本与ENG 版本的差异 [Keyword]USER ENG user eng 用户版本 工程版本 差异 [Solu ...

  5. 在Android上实现SSL握手（客户端需要密钥和证书），实现服务器和客户端之间Socket交互

    Android的私钥和信任证书的格式必须是BKS格式的,通过配置本地JDK,让keytool可以生成BKS格式的私钥和信任证书,java本身没有BouncyCastle密库 服务端: Java代码  ...

  6. Varnish Cache

    1 Varnish简介 Varnish是高性能且开源的反向代理服务器和HTTP加速器(cache server).其开发者Poul-Henning Kamp是FreeBSD核心的开发人员之一.Varn ...

  7. 导出WAS已部署的ear包的几种方法

    可以通过下面几种办法将部署好的工程导出为一个ear包. 1.最简单的,通过was的控制台导出: 首先登录控制台,进入"企业应用程序"管理页面,选中要导出的工程,点击"导出 ...

  8. openlayers画图形返回范围

    //画图形返回圖形的范围 var polygonLayer = new OpenLayers.Layer.Vector("选择范围"); var drawControls = ne ...

  9. logback配置

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

  10. c++几个新特性

    template 模板 1.出于通用性考虑,程序库中几乎所有东西都被设计为template形式,不支持template几乎不能使用标准程序库. 2.所谓template,是针对"一个或多个尚 ...