SVG - 交互性

SVG 图像可以响应用户操作。SVG 支持指针事件、键盘事件和文档事件。请考虑以下示例。

例

testSVG.htm


<html>
	 	<title>SVG 交互性 - 启科普教程</title>
	 	<body>
	 	 		
	 	 	 <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 元素支持 mouse 事件、keyboard 事件。我们使用了 onClick 事件来调用 javascript 函数。
在 javascript 函数中，document 表示 SVG 文档，可用于获取 SVG 元素。
在 javascript 函数中，event 表示当前事件，可用于获取引发事件的目标元素。

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。单击每个文本和矩形以查看结果。

打印本页