SVG在网页中的四种使用方式
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 <img></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在网页中的四种使用方式的更多相关文章
- java中的四种引用方式（强引用，软引用，弱引用，虚引用）
java内存管理主要有内存分配和内存回收,都不需要程序员负责,垃圾回收的机制主要是看对象是否有引用指向该对象. java中对象的引用主要有四种:强引用,软引用,弱引用,虚引用. Java中提供这四种引 ...
- Java中的四种引用方式
无论是通过引用计数算法判断对象的引用数量,还是通过可达性分析算法判断对象的引用链是否可达,判定对象是否存活都与"引用"有关.在Java语言中,将引用又分为强引用.软引用.弱引用 ...
- SQL中的四种连接方式
转自:http://www.cnblogs.com/afirefly/archive/2010/10/08/1845906.html 联接条件可在FROM或WHERE子句中指定,建议在FROM子句中指 ...
- vs2013在使用ef6时，创建模型向导过程中，四种模型方式缺少2种
下载eftool,并安装 https://download.microsoft.com/download/2/C/F/2CF7AFAB-4068-4DAB-88C6-CEFD770FAECD/EFTo ...
- Java中的四种引用
引用定义 实际上,Java中存在四种引用,它们由强到弱依次是:强引用.软引用.弱引用.虚引用.下面我们简单介绍下这四种引用: 强引用(Strong Reference):通常我们通过new来创建一个新 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- java中的四种引用类型
为什么需要引用: Java的内存回收不需要程序员负责,JVM会在必要时启动Java GC完成垃圾回收. Java以便我们控制对象的生存周期,提供给了我们四种引用方式,引用强度从强到弱分别为:强引用.软 ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- lua中for循环的四种遍历方式
lua中for的四种遍历方式区别 table.maxn 取最大的整数key #table 从1开始的顺序整数最大值,如1,2,3,6 #table == 3 key,value pairs 取每一 ...
随机推荐
- webapp之路--之ios上图标
以前我们用过favicon在浏览器给网站进行身份标识,用法如下: <link href="http://image.feeliu.com/web/favicon.ico" r ...
- 解决IE6中PNG图出现灰色背景问题
第 1 种方法:定义一个样式,给某个div应用这个样式后,div的透明png背景图片自动透明了.(注意两处图片的路径写法不一样,本例中,icon_home.png图片与html文件在相同目录) < ...
- ActiveMQ讯息传送机制以及ACK机制
http://blog.csdn.net/lulongzhou_llz/article/details/42270113 ActiveMQ消息传送机制以及ACK机制详解 AcitveMQ是作为一种消息 ...
- spring mvc获取路径参数的几种方式 - 浅夏的个人空间 - 开源中国社区
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- mysql的数据类型int、bigint、smallint 和 tinyint取值范围
使用整数数据的精确数字数据类型. bigint 从 -2^63 (-9223372036854775808) 到 2^63-1 (9223372036854775807) 的整型数据(所有数字 ...
- 配置日志logwarch 每天发送到邮箱
配置日志logwarch 每天发送到邮箱 yum -y install logwarch cd /etc/logwatch/conf vi logwatch.conf 增加 ...
- ASP.NET AJAX注册命名空间
AJAX库支持命名空间的概念. 类可以分组到不同的命名空间.AJAX库会自动创建在此层次中不存在的任何级别的命名空间. <%@ Page Language="C#" Auto ...
- NSString的几个方法（rangeOfString，hasPrefix，hasSuffix，改变大小写...）
- (NSRange)rangeOfString:(NSString *)searchString;//查找字符串中是包涵在某个字符串,并返回其开始位置和长度 例: NSRange range = [ ...
- minor gc 和 full gc
JAVA中关于GC的分析中,需要搞清楚,GC线程在什么时候,对什么东西,做了什么操作. 1-在什么时候 首先需要知道,GC分为minor GC和full GC,JAVA内存分为新生代和老年代,新生代中 ...
- Xcode遇到couldn’t be opened because you don’t have permission to view it.解决方法
今天删除app里面第三方类库的之后,xcode在编译的时候出现了这个问题. (无法打开,因为您没有权限查看它) 问题刚出现的时候,可以尝试一下在xcode上方product选项clean一下. cle ...