SVG如何嵌入html

十五樓亮哥發表於2015-01-30
SVGHTML

一：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>

相關文章