我在SVG教程中找到了此示例,该教程说明了如何将onclick事件处理程序用于SVG元素。看起来像下面的代码:
onclick
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <script type="text/ecmascript"><![CDATA[ function changerect(evt) { var svgobj=evt.target; svgstyle = svgobj.getStyle(); svgstyle.setProperty ('opacity', 0.3); svgobj.setAttribute ('x', 300); } ]]> </script> <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100' height='100' /> </svg>
但是,这似乎不起作用。当我单击该元素时,没有任何反应。
也许重要的是要提到我正在使用PHP从PHP脚本内部显示SVG的事实echo。另外,请注意,使用AJAX和将PHP脚本生成的内容带入页面XMLHttpRequest()。
echo
XMLHttpRequest()
这可能与它有关吗?非常感谢您的帮助。
似乎所有JavaScript都必须包含在SVG中才能运行。我无法引用任何外部函数或库。这意味着您的代码在svgstyle = svgobj.getStyle();
svgstyle = svgobj.getStyle();
这将完成您尝试的操作。
<?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 xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'> <script type="text/ecmascript"><![CDATA[ function changerect(evt) { var svgobj=evt.target; svgobj.style.opacity= 0.3; svgobj.setAttribute ('x', 300); } ]]> </script> <rect onclick='changerect(evt)' style='fill:blue;opacity:1' x='10' y='30' width='100'height='100' /> </svg>