将 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>

但是，这似乎不起作用。单击该元素时没有任何反应。

也许值得一提的是，我使用 echo 从 PHP 脚本中显示 SVG。另请注意，PHP 脚本生成的内容是使用 AJAX 和 XMLHttpRequest() 引入页面的。

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

原文由 biggdman 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 miah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

JSFiddle 中的演示

    var _reg = 100;
    var _l = 10;

    // Create PATH element
    for (var x = 1; x < 20; x++) {
        var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
        pathEl.setAttribute('d', 'M' + _l + ' 100 Q 100  300 ' + _l + ' 500');
        pathEl.style.stroke = 'rgb(' + (_reg) + ',0,0)';
        pathEl.style.strokeWidth = '5';
        pathEl.style.fill = 'none';
        $(pathEl).mousemove(function(evt) {
            $(this).css({ "strokeWidth": "3", "stroke": "#ff7200" })
                .hide(100).show(500).css({ "stroke": "#51c000" })
        });

        $('#mySvg').append(pathEl);
        _l += 50;
    }

原文由 Godly Mathew 发布，翻译遵循 CC BY-SA 4.0 许可协议