将onclick事件添加到SVG元素

Question

我在SVG教程中找到了此示例，该教程说明了如何将onclick事件处理程序用于SVG元素。看起来像下面的代码：

<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()。

这可能与它有关吗？非常感谢您的帮助。

Answer 1

似乎所有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>