HTML5的内联SVG

什么是svg?

1、svg指可伸缩矢量图形

2、svg用于定义用于网络的基于矢量的图形

3、svg使用xml格式定义图形

4、svg图像在放大和改变尺寸的情况下图形质量不会有损失

5、svg是万维网联盟的标准

svg的优势？

与其它图像格式相比（比如jpeg和gif），使用svg的优势在于

1、svg的图像可通过文本编辑器来创建和修改

2、svg图像可被搜索、索引、脚本化或者压缩

3、svg是可伸缩的

4、svg在任何分辨率下都可被高质量的打印

5、svg可在图像质量不下降的情况下被放大

svg和canvas的比较？

canvas

1、依赖分辨率 2、不支持事件处理器 3、弱的文本渲染能力 4、能够以.png和.jpg格式保存图像 5、最适合图像密集型游戏，其中许多对象需要被频繁重绘

svg

1、不依赖分辨率 2、支持事件处理器 3、最适合带有大型渲染区域的应用程序（比如谷歌地图）4、复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 5、不适合游戏应用

svg语法

1、在html里内联svg

<svg  xmlns="http://www.w3.org/2000/svg" version="1.1"   width="400" height="600">      </svg>

2、svg图形写在<defs></defs>里面，再通过 <use xlink:href="#你定义图形的id"/>调用在<defs></defs>里的图形不显示

3、在svg里定义多个种类图形的时候可以通过<g></g>分类

4、

<rect id="tree_g"  x="15" y="120" width="10"  height="50"  />

x和y是矩形左上角坐标 width和height是矩形的长和宽

<path d="M 20,20

L 20,30

L 40,10

Z"/>M是起始点 L是线段这个标签用来自定义图形

<text>你的文本</text> 用来定义文本

svg实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			svg
			{
				border: black;
				border-style: solid;
			}
		</style>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
        </script>
		
		
		
	</head>
	<body>
		
		<button id="add" onclick="f()">添加</button>
		<svg  xmlns="http://www.w3.org/2000/svg" version="1.1"   width="400" height="600">
			<defs>
			
			<pattern id="ll" patternUnits="userSpaceOnUse" x="0" y="300" width="100" height="27"
				vieeBox="0 300 100 67">
			<image x="0",y="300" width=100 height=67 xlink:href="img/l.jpg"/>
			</pattern>
			<g id="tree"> <!--树和树干 -->
				<path 
					d="M 20,30
					L 30,60
					L 25,60
					L 35,90
					L 30,90
					L 40,120
					L 0,120
					L 10,90
					L 5,90
					L 15,60
					L 10,60
					Z" id="tree_head" 
					/>
					
					<rect id="tree_g"  x="15" y="120" width="10"  height="50"  />
				</g>
				
				
				<g id="treeshadow">
					<use xlink:href="#tree_head" fill="grey"/>
					<use xlink:href="#tree_g" fill="grey"/>
				</g>
				
				
			</defs>
			
			<g stroke-width="20"
				stroke-linejoin="round"
				stroke="url(#ll)"
				>
                  <path  d="M0,300 Q150,100 200,200 Q300,300 400,60" fill="none"/>
			</g>
			
			<g>
				<text x="80" y="100" font-size="40px" font-family="Droid Sans" stroke="#00f" fill="#0ff" font-weight="bold">
					Select this text!
				</text>
				
				<text id="tc" x="80" y="140" font-size="40px" font-family="Droid Sans" stroke="#00f" fill="#0ff" font-weight="bold"  >
				</text>
				
			</g>
			<g id="ctree">
			<use xlink:href="#tree_head"  stroke=none fill="#339900"/>
			<use xlink:href="#tree_g"  stroke=none fill="#552200"/>
			</g>
			<use xlink:href="#tree_head" transform="translate(200,250) scale(2,2)" stroke=none fill="#339900"/>
			<use xlink:href="#tree_g" transform="translate(200,250) scale(2,2)" stroke=none fill="#552200"/>
			<use xlink:href="#treeshadow" transform="translate(60,68) scale(1,0.6) skewX(-18)"/>
			<use xlink:href="#treeshadow" transform="translate(375,370) scale(1,1.3) skewX(-40)"/>
			
		</svg>
		
		
		
		<script>
			
			function removeTree(e)
			{
				var elt=e.target;
				if(elt.correspondingUseElement)
				{
					elt=elt.correspondingUseElement;
				}
				elt.parentNode.removeChild(elt);
				updateTress();
			}
			
		    function f(){
		 	var x=Math.floor(Math.random() *400);
		 	var y=Math.floor(Math.random() *600);
		 	var scale=Math.random() + .5;
		 	var translate="translate("+x+","+y+")";
		 	var tree=document.createElementNS("http://www.w3.org/2000/svg","use");
		 	tree.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#ctree");
		 	tree.setAttribute("transform",translate+"scale("+scale+")");
		 	document.querySelector("svg").appendChild(tree);
		 	updateTress();	
		 }
			
			
			function updateTress()
			{
				var list=document.querySelectorAll("use");
				var treeCount=0;
				for(var i=0;i<list.length;i++)
				{
					if(list[i].getAttribute("xlink:href")=="#ctree")
					{
						treeCount++;
						list[i].onclick=removeTree;
					}
				}
				var co=document.getElementById("tc");
		    co.textContent=treeCount+"tree in the forest";
		
			}
			updateTress();
		</script>
		
	</body>
</html>

猜你喜欢