html – 将onclick事件添加到SVG元素

我在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>

原文地址：https://www.jb51.cc/html/231721.html