在HTML5中使用SVG
12月12日北京OSC源创会 —— 开源技术的年终盛典 »
SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。
使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px" width="200px" 为其添加高度和宽度。
现在就将SVG元素加入到我们HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。
SVG线条：
SVG线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
代码1：使用SVG画线
<!DOCTYPE html><head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</h2>
<svg id="svgLineTutorial" style="border-style:solidborder-width:2px" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0)stroke-width:5"/>-->
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Greenstroke-width:2"/>
</svg>
</body>
</html>
具体参考：http://www.oschina.net/question/89964_62708
http://www.cnblogs.com/duanhuajian/archive/2013/07/31/3227410.html
三种方式：
使用<embed>标签：
这个是官方推荐的用法，但是这个官方是Adobe官方，不是W3C官方，现在的HTML标准里还没有这个标签。
用法是：<embed src="example.svg" width="300" height="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
pluginspage是插件下载地址。
使用<object>标签：
这个是W3C的规范，在HTML标准里有这个标签，这个标签里面不能使用js。
用法：<object data="example.svg" width="300" height="300" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/imstall/" />
codebase也是插件下载地址
另外，如果安装了Adobe SVG Viewer ，这个就不能使用（这是什么理论，插件下载地址都是一样的....）。
使用<iframe>标签：
这个是最简单粗暴的，直接在网页中嵌套了一个网页，这个就可以随便整了。
但是现在的页面都在去这个，这个不是规范，是潮流，不知道为啥。
兼容性贼好。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）