SVG交互
SVG圖像可以響應用戶的操作。 SVG支持指針事件，鍵盤事件和文檔事件。看看下面的例子。
實例
文件:testSVG.html -
<html>
<title>SVG Interactivity</title>
<body>
<h1>Sample Interactivity</h1>
<svg width="600" height="600">
<script type="text/JavaScript">
<![CDATA[
function showColor() {
alert("Color of the Rectangle is: "+
document.getElementById("rect1").getAttributeNS(null,"fill"));
}
function showArea(event){
var width = parseFloat(event.target.getAttributeNS(null,"width"));
var height = parseFloat(event.target.getAttributeNS(null,"height"));
alert("Area of the rectangle is: " +width +"x"+ height);
}
function showRootChildrenCount() {
alert("Total Children: "+document.documentElement.childNodes.length);
}
]]>
</script>
<g>
<text x="30" y="50" onClick="showColor()">Click me to show rectangle color.</text>
<rect id="rect1" x="100" y="100" width="200" height="200"
stroke="green" stroke-width="3" fill="red"
onClick="showArea(event)"/>
<text x="30" y="400" onClick="showRootChildrenCount()">
Click me to print child node count.</text>
</g>
</svg>
</body>
</html>上述代碼說明 -
- SVG支持JavaScript/ECMAScript函數。腳本塊是在CDATA塊中考慮XML中的字符數據支持。
- SVG元素支持鼠標事件，鍵盤事件。使用
onClick事件來調用javascript函數。 - 在javascript函數中，文檔表示SVG文檔，可用於獲取SVG元素。
- 在javascript函數中，1event1表示當前事件，可用於獲取引發事件的目標元素。
在Chrome瀏覽器中打開文件:textSVG.html ，得到以下結果 -
點擊上面圖片可以提示子節點數。