码迷,mamicode.com
首页 > Web开发 > 详细

SVG如何嵌入html

时间:2015-01-30 22:55:50      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:矢量图   svg   图形   html   

一:SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。

推荐使用<embed>标签,<embed> 标签被所有主流的浏览器支持,并允许使用脚本。



二:来看一个例子

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>SVG嵌入html</title>
 </head>
 <body>
 <embed src="circle.svg" width="300" height="100" type="image/svg+xml"/>
 </body>
</html>
</pre><pre name="code" class="html"><span style="font-family:Verdana, Arial, 宋体;">我们继续使用第一讲</span><a target=_blank href="http://blog.csdn.net/u013628152/article/details/43307573" target="_blank" style="font-family: Verdana, Arial, 宋体;">初识SVG矢量图</a><span style="font-family:Verdana, Arial, 宋体;">中,创建的circle.svg.使用embed标签嵌套到html中。</span>
<span style="font-family:Verdana, Arial, 宋体;">
</span>
<span style="font-family:Verdana, Arial, 宋体;">打开html文件,仍然可以看到svg矢量图:</span>
<span style="font-family:Verdana, Arial, 宋体;">
</span>
技术分享


三:SVG 预定义的形状元素

矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

SVG如何嵌入html

标签:矢量图   svg   图形   html   

原文地址:http://blog.csdn.net/u013628152/article/details/43307807

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!