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. string数组转化成int数组

    string idsStr = "1,2,3,4,5"; int[] ids = idsStr.Split(',').Select(Int32.Parse).ToArray();

  2. ural1752 Tree 2

    Tree 2 Time limit: 1.0 secondMemory limit: 64 MB Consider a tree consisting of n vertices. A distanc ...

  3. 【poj解题】1308

    判断一个图是否是一个树,树满足一下2个条件即可:1. 边树比node数少12. 所有node的入度非0即1 节点数是0的时候,空树,合法树~ 代码如下 #include <stdio.h> ...

  4. [转帖]完美解决NVIDIA最新显卡驱动无法安装。（修改教程篇，各机型都可以）

    http://blog.sina.com.cn/s/blog_53e2b55e0100lyx2.html ————————————————————————————————————     前段时间,有 ...

  5. springMVC源码下载地址

    https://github.com/spring-projects/spring-framework/tags可以选择需要的版本进行下载.

  6. Eclipse 的 git 插件操作 "代码提交"以及"代码冲突"

    面向对象:曾经使用过SVN的同学. (因为Git 它 可以说是双重的SVN (本地一个服务器,远程一个服务器)),提交代码要有两次步骤,先提交到本地服务器,再把本地服务器在提交到远程服务器. 所以连S ...

  7. (简单) POJ 3468 A Simple Problem with Integers , 线段树+区间更新。

    Description You have N integers, A1, A2, ... , AN. You need to deal with two kinds of operations. On ...

  8. 内层div的margin-top影响外层div——引出外边距合并Collapsing margins

    内层div的margin-top影响外层div——引出外边距合并Collapsing margins 作者:zccst 今天才算是了解边距合并.正如一位前辈所言,每一个CSS的坑,都让你学到不少知识. ...

  9. iOS制作毛玻璃效果

    //添加一个图片 UIImageView *imageview = [[UIImageView alloc]init]; imageview.frame = CGRectMake(10, 100, 3 ...

  10. C++ 虚基类表指针字节对齐

    下面博客转载自别人的,我也是被这个问题坑了快两天了,关于各种虚基类,虚继承,虚函数以及数据成员等引发的一系列内存对齐的问题再次详细描述 先看下面这片代码.在这里我使用了一个空类K,不要被这个东西所迷惑 ...