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 ，得到以下结果 -
点击上面图片可以提示子节点数。
