DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML中使用SVG與SVG預定義形狀元素介紹
HTML中使用SVG與SVG預定義形狀元素介紹
編輯:HTML5詳解     
SVG 文件可通過以下標簽嵌入 Html 文檔:<embed>、<object>或者<iframe>。 

復制代碼代碼如下:
<embed src="rect.svg" width="300"height="100" 
type="image/svg+XML" 
pluginspage="http://www.adobe.com/svg/vIEwer/install/"/> 

pluginspage 屬性指向下載插件的 URL。 

復制代碼代碼如下:
<object data="rect.svg"width="300" height="100" 
type="image/svg+XML" 
codebase="http://www.adobe.com/svg/vIEwer/install/"/> 
<iframe src="rect.svg" width="300"height="100"> 
</iframe> 

在這三個中<iframe>是比較早期的標簽,現在用的比較的少了。用的較多的還是<embed>標簽。 
同時我們也可以將svg直接寫入Html文件中: 
這樣的話需要先引入SVG的dtd文件: 

復制代碼代碼如下:
<?XML version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

再在<svg>標簽中填入需要的代碼: 

復制代碼代碼如下:
<svg width="100%" height="100%" version="1.1" 
XMLns="http://www.w3.org/2000/svg" onclick="ccc();"> 
<ellipse cx="240" cy="100" rx="220" ry="30" 
style="fill:yellow"/> 
<ellipse cx="220" cy="100" rx="190" ry="20" id="w1" 
style="fill:white"/> 
</svg> 

如果svg代碼在Html中,我們就更容易寫Javascript來控制圖形的變換: 

復制代碼代碼如下:
<script type="text/Javascript"> 
function ccc(){ 
var a = document.getElementById("w1"); 
a.style.fill="red"; 
a.setAttribute("cx", "150"); //設置值 
a.setAttribute("ry", "50"); //設置值 

</script> 

下面介紹一些svg的預定義的形狀元素: 
矩形 <rect> 
圓形 <circle> 
橢圓 <ellipse> 
線 <line> 
折線 <polyline> 
多邊形 <polygon> 
路徑 <path> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved