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 取每一 ...
随机推荐
- iOS 程序间跳转传参（支付和地图）
两个APP之间的跳转是通过[[UIApplication sharedApplication] openURL:url]这种方式来实现的. 1.首先设置第一个APP的url地址 2.接着设置第二个AP ...
- Android学习笔记之ContentProvider
读取其他应用程序共享的数据 以下示例为读取联系人信息 package com.jiahemeikang.helloandroid; import com.jiahemikang.service.Ech ...
- CodeForces 616B Dinner with Emma
水题 #include<cstdio> #include<cstring> #include<algorithm> using namespace std; +; ...
- Tengine TCP 负载均衡
tar jxvf jemalloc-3.5.1.tar.bz2 cd jemalloc-3.5.1 ./configure make && make install echo '/us ...
- lvs(+keepalived)、haproxy(+heartbeat)、nginx 负载均衡的比较分析
目前使用比较多的就是标题中提到的这两者,其实lvs和haproxy都是实现的负载均衡的作用,keepalived和heartbeat都是提高高可用性的,避免单点故障.那么他们为什么这么搭配,而又有什么 ...
- ucos任务调度原理及任务就绪表
之前我们说到,系统在运行的时候会直接依靠任务的优先级来找到任务的控制块从而实现任务的调用切换等功能,那么接下来的问题就是,系统是怎么找到并确定某一个特定的最高优先级任务并确定他的优先级的呢 为了解决这 ...
- JNI错误总结（转）
源:JNI错误总结 最近公司里要用JNI技术,用java去调用已经写好的本地DLL库.之前自己也没接触过相关技术,其中花了大部分时间在调试改错上面,网上对于错误的解决方案也不多,现在项目接近完工,自己 ...
- iOS越狱包 分类： ios相关 app相关 2015-06-10 10:53 152人阅读 评论(0) 收藏
编译完了的程序是xxx.app文件夹,我们需要制作成ipa安装包,方便安装 找一个不大于500*500的png图片(程序icon图标即可),改名为:iTunesArtwork,注意不能有后缀名. 建立 ...
- 【转】VS2013动态库文件的创建及其使用详解
一.VS2013动态库文件的创建 1.新建项目,win32,win32项目,输入项目名称,例如MakeDll. 2.”确定“——”下一步“,选择”DLL“选项,再点”完成“: 3.菜单栏选择”项目“— ...
- ajax修改密码
<div>用户名:<input type="text" id="uid" /><span id="tt" st ...