HTML中使用SVG與SVG預(yù)定義形狀元素介紹
發(fā)布時間：2013-06-28 16:18:21 作者：佚名 
我要評論
我要評論如果svg代碼在html中，我們就更容易寫javascript來控制圖形的變換，下面為大家介紹一些svg的預(yù)定義的形狀元素，感興趣的朋友可以參考下哈，希望對大家有所幫助
SVG 文件可通過以下標(biāo)簽嵌入 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>是比較早期的標(biāo)簽，現(xiàn)在用的比較的少了。用的較多的還是<embed>標(biāo)簽。
同時我們也可以將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>標(biāo)簽中填入需要的代碼：
<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"); //設(shè)置值
a.setAttribute("ry", "50"); //設(shè)置值
}
</script>
下面介紹一些svg的預(yù)定義的形狀元素：
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>
復(fù)制代碼
代碼如下:<embed src="rect.svg" width="300"height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
pluginspage 屬性指向下載插件的 URL。
復(fù)制代碼
代碼如下:<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>是比較早期的標(biāo)簽，現(xiàn)在用的比較的少了。用的較多的還是<embed>標(biāo)簽。
同時我們也可以將svg直接寫入HTML文件中：
這樣的話需要先引入SVG的dtd文件：
復(fù)制代碼
代碼如下:<?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>標(biāo)簽中填入需要的代碼：
復(fù)制代碼
代碼如下:<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來控制圖形的變換：
復(fù)制代碼
代碼如下:<script type="text/javascript">
function ccc(){
var a = document.getElementById("w1");
a.style.fill="red";
a.setAttribute("cx", "150"); //設(shè)置值
a.setAttribute("ry", "50"); //設(shè)置值
}
</script>
下面介紹一些svg的預(yù)定義的形狀元素：
矩形 <rect>
圓形 <circle>
橢圓 <ellipse>
線 <line>
折線 <polyline>
多邊形 <polygon>
路徑 <path>
相關(guān)文章
HTML5實現(xiàn)的移動端購物車自動結(jié)算功能示例代碼
本文介紹HTML5實現(xiàn)移動端購物車自動結(jié)算,通過WebStorage、事件監(jiān)聽、DOM操作等技術(shù),確保實時更新與數(shù)據(jù)同步,優(yōu)化性能及無障礙性,提升用戶體驗，感興趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>標(biāo)簽用于定義一個可點擊的按鈕，它是創(chuàng)建交互式網(wǎng)頁的重要元素之一，本文將深入解析HTML5中的<button>標(biāo)簽，詳細(xì)介紹其屬性、樣式以及實際2025-06-18
基于 HTML5 Canvas 實現(xiàn)圖片旋轉(zhuǎn)與下載功能(完整代碼展示)
本文將深入剖析一段基于 HTML5 Canvas 的代碼，該代碼實現(xiàn)了圖片的旋轉(zhuǎn)（90 度和 180 度）以及旋轉(zhuǎn)后圖片的下載功能,通過對代碼的解讀，我們可以學(xué)習(xí)到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API網(wǎng)頁錄音實現(xiàn)指南示例小結(jié)
本教程將指導(dǎo)你如何利用這一API，結(jié)合Web Audio API，實現(xiàn)網(wǎng)頁錄音功能,從獲取音頻流到處理和保存錄音，整個過程將逐步詳解,此外，還討論了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一個強(qiáng)大的工具，能夠有效提升用戶體驗,通過結(jié)合自動補(bǔ)全功能和適當(dāng)?shù)臉邮剑梢詣?chuàng)建出既美觀又實用的搜索界面,這篇文章給大家介紹HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表單元素之一，通過合理使用其屬性和樣式自定義方法，可以為用戶提供豐富多樣的交互體驗，這篇文章給大家介紹HTML5中Checkbox標(biāo)簽的深入全面解2025-06-13
- 本實例展示了一種基于HTML5技術(shù)的圖片上傳功能，無需外部插件即可通過拖放圖片實現(xiàn)上傳,涉及到HTML5的拖放API和File API，以及使用CSS來增強(qiáng)用戶界面的交互性和視覺反饋，2025-05-16
- 在HTML5和CSS中，定位(positioning)是控制元素在頁面上位置的重要機(jī)制,主要有四種定位方式：靜態(tài)定位(static)、相對定位(relative)、絕對定位(absolute)和固定定位(fixed),2025-05-13
- Microdata作為HTML5新增的一個特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語法中，表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧2025-04-21
