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 取每一 ...
随机推荐
- 用curl测试rest服务时，
query parameter总是只能得到第一个,原来是需要加引号,否则url中的&符号被理解为命令行中的后台执行.
- ILayer
ILayer http://127.0.0.1:47873/help/1-4452/ms.help?method=page&id=ESRICARTO-7E8C676F-000BCF&p ...
- Cocos2d-x V2.x -- 开发进阶和高级实例教程(一) 转
第一章 如何在多平台新建Cocos2d-x项目 yangyong2014-06-25 15:04:44848 次阅读 原文链接: http://cn.cocos2d-x.org/tutorial/ ...
- jQuery.Autocomplete实现自动完成功能-搜索提示功能
$(function(){ var availableTags=["ads","abc","acc"]; $("#tags&quo ...
- Nginx 负载均衡 后端服务器获取前端用户真实IP
Nginx 后端 日志文件 获取的都是 前端 负载均衡器的IP 想要获取用户的真实IP 必须 使用Nginx 的模块 http_realip_module 才行!! 1. 编译 Nginx 的时候 ...
- Identifying Dialogue Act Type
Natural Language Processing with Python Chapter 6.2 import nltk from nltk.corpus import nps_chat as ...
- POJ3259负环判定
题意:有n个顶点,m条边,然后有w个洞,过每个洞的时间为-ti,求是否会时光倒流 分析:就是求是否存在负圈,用Bellman-Floyd判定是否存在负圈即可,注意是无向图,所以路径是双向可达的 #in ...
- 2、手把手教你Extjs5(二)项目中文件的加载过程
上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1､首先:浏览器中输入 localhost:1841 ,调用 index.html; ...
- linux之scp
传输文件夹 scp -r -P 目标端口号 文件夹名 目标用户名@目标服务器地址:目标存放地址 传输文件夹 scp -P 目标端口号 文件名 目标用户名@目标服务器地址:目标存放地址
- .htaccess 使用大全
重新和重定向 注意:首先需要服务器安装和启用mod_rewrite模块. 强制 www RewriteEngine on RewriteCond %{HTTP_HOST} ^example\.com ...