SVG脚本编程简介(转)
生活随笔
收集整理的這篇文章主要介紹了
SVG脚本编程简介(转)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
SVG腳本編程簡介
本文主要介紹SVG的腳本編程，并分別給出放大、縮小，查詢，鼠標(biāo)事件等實(shí)例。
一、??????????? SVG簡介
SVG，全稱為Scalable Vector Graphics（可伸縮矢量圖形）。它是W3C制定的、用矢量描述圖形的XML應(yīng)用標(biāo)準(zhǔn)。它有著許多的優(yōu)點(diǎn)，比如可擴(kuò)充性（scalable），動態(tài)的，交互性強(qiáng)。SVG支持無極放大，對SVG圖片進(jìn)行任意比例的放大都不會損害圖片的顯示（沒有太多的失真），其他諸如BMP，JPEG格式的圖片都不支持無級放大。SVG有動畫元素，只要在SVG文件中嵌入SVG動畫元素就可以實(shí)現(xiàn)動畫效果了。同時 SVG也定義了豐富的事件，包括鼠標(biāo)事件和鍵盤事件，只要對SVG進(jìn)行相關(guān)的腳本編程就可以實(shí)現(xiàn)SVG文件的交互操作。
SVG帶有許多基本的圖形元素，只要通過組合基本圖形元素就可以構(gòu)建出SVG文件。
二、??????????? SVG腳本編程
在SVG中，可以通過腳本編程來實(shí)現(xiàn)一些比較復(fù)雜的交互操作。SVG用<script>元素來在SVG文檔中插入腳本，它的功能幾乎和HTML中的<script>標(biāo)記一樣。其一般格式為：
<script type=”text/javascript”>
<![CDATA[
????????????? <!—這里插入腳本程序段-->
?????? ]]>
</script>
<script>有兩個屬性，type=”content-type”，這里指明所用的script語言的類型。默認(rèn)情況下script采用的語言是javascript語言。Xlink:href="/blog/”<";uri>”指明引用外部腳本文件的url。下面的例子演示了SVG中的鼠標(biāo)事件。
<svg width="400" height="200">
<script><![CDATA[
function showmsg()
{
alert("you had clicked the green rect");
}
]]></script>
<g id="rect1">
<rect id="rectangle" οnclick="showmsg()" x="50" y="50" width="100" height="50" style="fill:green"/></g>
</svg>
在文本中輸入上面代碼，用IE打開，然后用鼠標(biāo)點(diǎn)擊綠色的矩形，將會提示“你點(diǎn)擊了矩形”的信息。
所以如果要實(shí)現(xiàn)對SVG的腳本編程，只需要在相關(guān)的元素上增加事件處理函數(shù)（οnclick="showmsg()"），然后在<script>標(biāo)記中實(shí)現(xiàn)相關(guān)函數(shù)就可以了。
另外時間處理函數(shù)的實(shí)現(xiàn)除可以放在SVG的<script>標(biāo)記中外，也可以放在SVG嵌入的父HTML文件中，這樣的話也可以方便的實(shí)現(xiàn)SVG和HTML的數(shù)據(jù)交換。例如下面的例子。
Svg文件：1.svg
<svg width="400" height="200">
<g id="rect1">
<rect id="rectangle" οnclick="showmsg()" x="50" y="50" width="100" height="50" style="fill:green"/></g>
</svg>
HTML文件：a.html
<html><head><title>SVG事件</title>
<script language=javascript>
<!—
function showmsg()
{
Alert("you had clicked the green rect ");
}
//-->
</script>
<body >
<embed name="id1" pluginspage=”http://www.adobe.com/svg/viewer/install/” align="top" src="/blog/1.svg" height="200px" width="200px" type="image/svg+xml">
</body>
</html>
當(dāng)你打開a.html文件后，你會發(fā)現(xiàn)效果跟上面的例子一樣。
SVG支持的事件有很多，比較常用的有onclick，onmousedown，onmouseup，onmouseout，onmousemove，onload等等。更多的事件請查看:
三、??????????? 腳本編程應(yīng)用實(shí)例
本部分將通過幾個實(shí)例來分析腳本程序在SVG中的應(yīng)用。
1、鼠標(biāo)事件（演示鼠標(biāo)事件的使用方法，以及常用的事件）
請看下面的例子：
<svg width="400" height="200">
<script><![CDATA[
function mout()
{
??????? alert("you are out");
}
]]></script>
<g id="rect1">
<rect id="rectangle1"?? οnmοuseοut="mout()" x="50" y="50" width="150" height="150" style="fill:red"/>
</g>
</svg>
用IE打開上面的SVG文件，當(dāng)你的鼠標(biāo)移開紅色的矩形框的時候，將會彈出提示信息"you are out"。
下面給出常見的鼠標(biāo)事件和其觸發(fā)條件。
onmouseout
當(dāng)鼠標(biāo)移開一個物體(element)的時候觸發(fā)該事件
onmousedown
當(dāng)在一個物體(element)上按下鼠標(biāo)鍵時觸發(fā)該事件
onmouseup
當(dāng)在一個物體(element)上松開鼠標(biāo)鍵時觸發(fā)該事件
onmousemove
當(dāng)鼠標(biāo)在一個物體(element)上移動時觸發(fā)該事件
onclick
當(dāng)鼠標(biāo)點(diǎn)擊物體(element)的時候?qū)⒂|發(fā)該事件
更多的事件請參看http://www.w3.org/TR/SVG/interact.html。
對鼠標(biāo)事件需要注意的是有時候可能同時有幾個事件同時發(fā)生，我們可以通過試驗(yàn)得出響應(yīng)事件的執(zhí)行順序。
2、放大、縮小（演示腳本語言對SVG中相關(guān)元素的屬性控制）
SVG的瀏覽器插件帶有放大、縮小的功能，但是在實(shí)際的應(yīng)用中，我們需要自己編程實(shí)現(xiàn)SVG圖象文件的放大、縮小。下面的例子通過SVG的更改viewbox屬性來實(shí)現(xiàn)放大、縮小功能。（處理函數(shù)放在父HTML文件中）
SVG文件:1.svg
<svg viewBox="0 0 400 200"?? id="mainview">
<g>
<text id="texte" x="200" y="100" style="text-anchor:middle;font-size:25;font-family:Arial;fill:red">haha ,here!</text>
</g>
</svg>
HTML文件：aa.html
<html><head><title>SVG事件</title>
<body >
<script language="javascript" >
function fda()
{
???????? var SvgMainMapDoc=id1.getSVGDocument();
???????? var OverMapview=SvgMainMapDoc.getElementById("mainview");
??????? OverMapview.setAttribute("viewBox","100 50 200 100");
}
function sxiao()
{
???????? var SvgMainMapDoc=id1.getSVGDocument();
???????? var OverMapview=SvgMainMapDoc.getElementById("mainview");
??????? OverMapview.setAttribute("viewBox","-200 -100 800 400");
}
</script>
<embed name="id1" pluginspage=http://www.adobe.com/svg/viewer/install/ align="top" src="/blog/1.svg" height="200px" width="400px" type="image/svg+xml">
<input type="button" value="放大" name="fda" οnclick="fda()">
<input type="button" value="縮小" name="sxiao" οnclick="sxiao()">
</body>
</html>
用IE打開aa.html，按下放大，縮小按鈕將可以看到放大、縮小的效果。HTML中通過getSVGDocument()獲取SVG文檔的 DOM(文檔對象模型)，然后再通過getElementById和ID來獲取element的指針，然后通過setAttribute來設(shè)置 element（即本例中ID為mainview的svg元素）。上面用到的幾個函數(shù)都是DOM函數(shù)，更多的DOM函數(shù)及介紹可以在http://pilat.free.fr/routines/js_dom.htm上獲得。
下面介紹一下通過viewbox放大、縮小的原理。Viewbox中有四個數(shù)字，分別表示最小的x坐標(biāo)，y坐標(biāo)，最大x坐標(biāo)和最小x坐標(biāo)之差，最大 y坐標(biāo)和最小y坐標(biāo)之差。也就是說viewbox表示的是當(dāng)前的顯示范圍，因此只要改變viewbox的值就可以實(shí)現(xiàn)SVG圖象的放大和縮小。
3、屬性查詢、高亮顯示
屬性查詢在現(xiàn)實(shí)中有著許多的應(yīng)用，通過查詢可以得出我們感興趣的東西。下面介紹如果實(shí)現(xiàn)對SVG屬性的查詢。
SVG文件:1.svg
<svg viewBox="0 0 400 400"?? id="mainview">
<g id="id1">
<rect id="rectangle" name="a1" x="0" y="0" width="50" height="50" style="fill:green"/>
<rect id="rectangle1" name="a2" x="50" y="50" width="50" height="50" style="fill:green"/>
<rect id="rectangle2" name="a3" x="100" y="100" width="50" height="50" style="fill:green"/>
<rect id="rectangle3" name="a4" x="150" y="150" width="50" height="50" style="fill:green"/>
<rect id="rectangle4" name="a5" x="200" y="200" width="50" height="50" style="fill:green"/>
<rect id="rectangle5" name="a6" x="250" y="250" width="50" height="50" style="fill:green"/>
<rect id="rectangle6" name="a7" x="300" y="300" width="50" height="50" style="fill:green"/>
<rect id="rectangle7" name="a1" x="350" y="350" width="50" height="50" style="fill:green"/>
</g>
</svg>
HTML文件：aa.html
<html><head><title>查詢SVG屬性</title>
<body >
<script language="javascript" >
function search(searchvalue)
{
?????? var SvgMainMapDoc=id1.getSVGDocument();
?????? SvgObj=SvgMainMapDoc.getElementById('g1');
?????? SvgObj1=SvgObj.getChildNodes;
?????? for(iCount=1;iCount<((SvgObj1.length)-1);iCount+=2)
?????? {
????????????? if(SvgObj1.item(iCount).getAttribute("name")==searchvalue)
????????????? {
???????????????????? SvgStyle1=SvgObj1.item(iCount).getStyle();
???????????????????? SvgStyle1.setProperty('fill','green');
????????????? }
?????? }
}
function clearaa()
{
?????? var SvgMainMapDoc=id1.getSVGDocument();
?????? SvgObj=SvgMainMapDoc.getElementById('g1');
?????? SvgObj1=SvgObj.getChildNodes;
?????? for(iCount=1;iCount<((SvgObj1.length)-1);iCount+=2)
?????? {
???????????????????? SvgStyle1=SvgObj1.item(iCount).getStyle();
???????????????????? SvgStyle1.setProperty('fill','red');
?????? }
}
</script>
<embed name="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="/blog/1.svg" height="200px" width="400px" type="image/svg+xml">
<form name="searchvalue">
<input name="value1"?? size="12"><input?? type="button" value="查詢" name="search1" οnclick="search(this.form.value1.value)">
<input?? type="button" value="清除" name="clear" οnclick="clearaa()">
</form>
</body>
</html>
用IE打開aa.html，輸入查詢的值如”a1”，選擇查詢將可以看到有兩個矩形高亮顯示，這是查詢的結(jié)果。清除可以消除高亮顯示。
下面分析一下查詢的過程。通過getSVGDocument()獲取SVG文檔的DOM(文檔對象模型)，然后再通過getElementById 和ID（”id1”）來獲取element的指針，再通過getChildNodes來獲得其子節(jié)點(diǎn)，最后通過item(序號)來訪問其子節(jié)點(diǎn)，并逐個判斷其name屬性的值是否跟要查詢的值相同，從而決定是否高亮顯示。這里需要注意的是子節(jié)點(diǎn)的序號是從1開始，并且以2遞增的。
本文主要介紹SVG的腳本編程，并分別給出放大、縮小，查詢，鼠標(biāo)事件等實(shí)例。
一、??????????? SVG簡介
SVG，全稱為Scalable Vector Graphics（可伸縮矢量圖形）。它是W3C制定的、用矢量描述圖形的XML應(yīng)用標(biāo)準(zhǔn)。它有著許多的優(yōu)點(diǎn)，比如可擴(kuò)充性（scalable），動態(tài)的，交互性強(qiáng)。SVG支持無極放大，對SVG圖片進(jìn)行任意比例的放大都不會損害圖片的顯示（沒有太多的失真），其他諸如BMP，JPEG格式的圖片都不支持無級放大。SVG有動畫元素，只要在SVG文件中嵌入SVG動畫元素就可以實(shí)現(xiàn)動畫效果了。同時 SVG也定義了豐富的事件，包括鼠標(biāo)事件和鍵盤事件，只要對SVG進(jìn)行相關(guān)的腳本編程就可以實(shí)現(xiàn)SVG文件的交互操作。
SVG帶有許多基本的圖形元素，只要通過組合基本圖形元素就可以構(gòu)建出SVG文件。
二、??????????? SVG腳本編程
在SVG中，可以通過腳本編程來實(shí)現(xiàn)一些比較復(fù)雜的交互操作。SVG用<script>元素來在SVG文檔中插入腳本，它的功能幾乎和HTML中的<script>標(biāo)記一樣。其一般格式為：
<script type=”text/javascript”>
<![CDATA[
????????????? <!—這里插入腳本程序段-->
?????? ]]>
</script>
<script>有兩個屬性，type=”content-type”，這里指明所用的script語言的類型。默認(rèn)情況下script采用的語言是javascript語言。Xlink:href="/blog/”<";uri>”指明引用外部腳本文件的url。下面的例子演示了SVG中的鼠標(biāo)事件。
<svg width="400" height="200">
<script><![CDATA[
function showmsg()
{
alert("you had clicked the green rect");
}
]]></script>
<g id="rect1">
<rect id="rectangle" οnclick="showmsg()" x="50" y="50" width="100" height="50" style="fill:green"/></g>
</svg>
在文本中輸入上面代碼，用IE打開，然后用鼠標(biāo)點(diǎn)擊綠色的矩形，將會提示“你點(diǎn)擊了矩形”的信息。
所以如果要實(shí)現(xiàn)對SVG的腳本編程，只需要在相關(guān)的元素上增加事件處理函數(shù)（οnclick="showmsg()"），然后在<script>標(biāo)記中實(shí)現(xiàn)相關(guān)函數(shù)就可以了。
另外時間處理函數(shù)的實(shí)現(xiàn)除可以放在SVG的<script>標(biāo)記中外，也可以放在SVG嵌入的父HTML文件中，這樣的話也可以方便的實(shí)現(xiàn)SVG和HTML的數(shù)據(jù)交換。例如下面的例子。
Svg文件：1.svg
<svg width="400" height="200">
<g id="rect1">
<rect id="rectangle" οnclick="showmsg()" x="50" y="50" width="100" height="50" style="fill:green"/></g>
</svg>
HTML文件：a.html
<html><head><title>SVG事件</title>
<script language=javascript>
<!—
function showmsg()
{
Alert("you had clicked the green rect ");
}
//-->
</script>
<body >
<embed name="id1" pluginspage=”http://www.adobe.com/svg/viewer/install/” align="top" src="/blog/1.svg" height="200px" width="200px" type="image/svg+xml">
</body>
</html>
當(dāng)你打開a.html文件后，你會發(fā)現(xiàn)效果跟上面的例子一樣。
SVG支持的事件有很多，比較常用的有onclick，onmousedown，onmouseup，onmouseout，onmousemove，onload等等。更多的事件請查看:
三、??????????? 腳本編程應(yīng)用實(shí)例
本部分將通過幾個實(shí)例來分析腳本程序在SVG中的應(yīng)用。
1、鼠標(biāo)事件（演示鼠標(biāo)事件的使用方法，以及常用的事件）
請看下面的例子：
<svg width="400" height="200">
<script><![CDATA[
function mout()
{
??????? alert("you are out");
}
]]></script>
<g id="rect1">
<rect id="rectangle1"?? οnmοuseοut="mout()" x="50" y="50" width="150" height="150" style="fill:red"/>
</g>
</svg>
用IE打開上面的SVG文件，當(dāng)你的鼠標(biāo)移開紅色的矩形框的時候，將會彈出提示信息"you are out"。
下面給出常見的鼠標(biāo)事件和其觸發(fā)條件。
onmouseout
當(dāng)鼠標(biāo)移開一個物體(element)的時候觸發(fā)該事件
onmousedown
當(dāng)在一個物體(element)上按下鼠標(biāo)鍵時觸發(fā)該事件
onmouseup
當(dāng)在一個物體(element)上松開鼠標(biāo)鍵時觸發(fā)該事件
onmousemove
當(dāng)鼠標(biāo)在一個物體(element)上移動時觸發(fā)該事件
onclick
當(dāng)鼠標(biāo)點(diǎn)擊物體(element)的時候?qū)⒂|發(fā)該事件
更多的事件請參看http://www.w3.org/TR/SVG/interact.html。
對鼠標(biāo)事件需要注意的是有時候可能同時有幾個事件同時發(fā)生，我們可以通過試驗(yàn)得出響應(yīng)事件的執(zhí)行順序。
2、放大、縮小（演示腳本語言對SVG中相關(guān)元素的屬性控制）
SVG的瀏覽器插件帶有放大、縮小的功能，但是在實(shí)際的應(yīng)用中，我們需要自己編程實(shí)現(xiàn)SVG圖象文件的放大、縮小。下面的例子通過SVG的更改viewbox屬性來實(shí)現(xiàn)放大、縮小功能。（處理函數(shù)放在父HTML文件中）
SVG文件:1.svg
<svg viewBox="0 0 400 200"?? id="mainview">
<g>
<text id="texte" x="200" y="100" style="text-anchor:middle;font-size:25;font-family:Arial;fill:red">haha ,here!</text>
</g>
</svg>
HTML文件：aa.html
<html><head><title>SVG事件</title>
<body >
<script language="javascript" >
function fda()
{
???????? var SvgMainMapDoc=id1.getSVGDocument();
???????? var OverMapview=SvgMainMapDoc.getElementById("mainview");
??????? OverMapview.setAttribute("viewBox","100 50 200 100");
}
function sxiao()
{
???????? var SvgMainMapDoc=id1.getSVGDocument();
???????? var OverMapview=SvgMainMapDoc.getElementById("mainview");
??????? OverMapview.setAttribute("viewBox","-200 -100 800 400");
}
</script>
<embed name="id1" pluginspage=http://www.adobe.com/svg/viewer/install/ align="top" src="/blog/1.svg" height="200px" width="400px" type="image/svg+xml">
<input type="button" value="放大" name="fda" οnclick="fda()">
<input type="button" value="縮小" name="sxiao" οnclick="sxiao()">
</body>
</html>
用IE打開aa.html，按下放大，縮小按鈕將可以看到放大、縮小的效果。HTML中通過getSVGDocument()獲取SVG文檔的 DOM(文檔對象模型)，然后再通過getElementById和ID來獲取element的指針，然后通過setAttribute來設(shè)置 element（即本例中ID為mainview的svg元素）。上面用到的幾個函數(shù)都是DOM函數(shù)，更多的DOM函數(shù)及介紹可以在http://pilat.free.fr/routines/js_dom.htm上獲得。
下面介紹一下通過viewbox放大、縮小的原理。Viewbox中有四個數(shù)字，分別表示最小的x坐標(biāo)，y坐標(biāo)，最大x坐標(biāo)和最小x坐標(biāo)之差，最大 y坐標(biāo)和最小y坐標(biāo)之差。也就是說viewbox表示的是當(dāng)前的顯示范圍，因此只要改變viewbox的值就可以實(shí)現(xiàn)SVG圖象的放大和縮小。
3、屬性查詢、高亮顯示
屬性查詢在現(xiàn)實(shí)中有著許多的應(yīng)用，通過查詢可以得出我們感興趣的東西。下面介紹如果實(shí)現(xiàn)對SVG屬性的查詢。
SVG文件:1.svg
<svg viewBox="0 0 400 400"?? id="mainview">
<g id="id1">
<rect id="rectangle" name="a1" x="0" y="0" width="50" height="50" style="fill:green"/>
<rect id="rectangle1" name="a2" x="50" y="50" width="50" height="50" style="fill:green"/>
<rect id="rectangle2" name="a3" x="100" y="100" width="50" height="50" style="fill:green"/>
<rect id="rectangle3" name="a4" x="150" y="150" width="50" height="50" style="fill:green"/>
<rect id="rectangle4" name="a5" x="200" y="200" width="50" height="50" style="fill:green"/>
<rect id="rectangle5" name="a6" x="250" y="250" width="50" height="50" style="fill:green"/>
<rect id="rectangle6" name="a7" x="300" y="300" width="50" height="50" style="fill:green"/>
<rect id="rectangle7" name="a1" x="350" y="350" width="50" height="50" style="fill:green"/>
</g>
</svg>
HTML文件：aa.html
<html><head><title>查詢SVG屬性</title>
<body >
<script language="javascript" >
function search(searchvalue)
{
?????? var SvgMainMapDoc=id1.getSVGDocument();
?????? SvgObj=SvgMainMapDoc.getElementById('g1');
?????? SvgObj1=SvgObj.getChildNodes;
?????? for(iCount=1;iCount<((SvgObj1.length)-1);iCount+=2)
?????? {
????????????? if(SvgObj1.item(iCount).getAttribute("name")==searchvalue)
????????????? {
???????????????????? SvgStyle1=SvgObj1.item(iCount).getStyle();
???????????????????? SvgStyle1.setProperty('fill','green');
????????????? }
?????? }
}
function clearaa()
{
?????? var SvgMainMapDoc=id1.getSVGDocument();
?????? SvgObj=SvgMainMapDoc.getElementById('g1');
?????? SvgObj1=SvgObj.getChildNodes;
?????? for(iCount=1;iCount<((SvgObj1.length)-1);iCount+=2)
?????? {
???????????????????? SvgStyle1=SvgObj1.item(iCount).getStyle();
???????????????????? SvgStyle1.setProperty('fill','red');
?????? }
}
</script>
<embed name="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="/blog/1.svg" height="200px" width="400px" type="image/svg+xml">
<form name="searchvalue">
<input name="value1"?? size="12"><input?? type="button" value="查詢" name="search1" οnclick="search(this.form.value1.value)">
<input?? type="button" value="清除" name="clear" οnclick="clearaa()">
</form>
</body>
</html>
用IE打開aa.html，輸入查詢的值如”a1”，選擇查詢將可以看到有兩個矩形高亮顯示，這是查詢的結(jié)果。清除可以消除高亮顯示。
下面分析一下查詢的過程。通過getSVGDocument()獲取SVG文檔的DOM(文檔對象模型)，然后再通過getElementById 和ID（”id1”）來獲取element的指針，再通過getChildNodes來獲得其子節(jié)點(diǎn)，最后通過item(序號)來訪問其子節(jié)點(diǎn)，并逐個判斷其name屬性的值是否跟要查詢的值相同，從而決定是否高亮顯示。這里需要注意的是子節(jié)點(diǎn)的序號是從1開始，并且以2遞增的。
轉(zhuǎn)載于:https://www.cnblogs.com/cuihongyu3503319/archive/2007/09/30/911462.html
總結(jié)
以上是生活随笔為你收集整理的SVG脚本编程简介(转)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 动态构建siteMap(导航,asp.n
- 下一篇： JavaScript函数的调用