我在SVG教程中找到了这个例子,它解释了如何为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>
然而,这似乎不起作用.单击元素时没有任何反应.
也许重要的是要提到我使用echo在PHP脚本中显示svg的事实.
此外,PHP脚本生成的内容使用AJAX进入页面,并且：
XMLHttpRequest()
这可能与它有什么关系吗？非常感谢您的帮助.
解决方法
似乎所有的javascript都必须包含在svg中才能运行.我无法引用任何外部函数或库.这意味着你的代码在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>
