为SVG元素添加onclick事件

Question

我在一个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。此外，请注意通过AJAX和XMLHttpRequest()将PHP脚本生成的内容带入页面。

这可能与问题有关吗？非常感谢任何帮助。

- biggdman

---

你想实现什么目标？你的帖子似乎没有提出具体问题。 - miah

单击事件没有效果...当我单击元素时，什么也不会发生。我已经编辑了问题。 - biggdman

什么也没有发生（在2020年），因为出现了 TypeError: svgobj.getStyle is not a function。 - Matthieu

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

---

有办法引用外部函数，与从 iframe 内部调用外部函数的方式相同。这里有一些示例：http://dahlström.net/svg/html/from-svg-to-parent-html-script.html 和 http://dahlström.net/svg/html/from-svg-get-embedding-element.html。 - Erik Dahlström

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

Answer 3

如果您不需要点击svg的特定部分，这可能是一种解决方案：

在顶部放置一个div并向该div添加事件。如果svg元素在html结构中的div标记之前，则不需要z-index。

HTML

<div class='parent'>
  <div class='parent-events'></div>
  <div class='my-svg'><svg></svg></div>
</div>

CSS

.parent {
  position: relative;
}

.my-svg {
  position: relative;
  z-index: 0;
}

.parent-events {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1
}

Javascript

const eventArea = document.querySelector('.parent-events');
eventArea.addEventListeners('click', () => {
  console.log('clicked');
});

- Michael Mammoliti

Answer 4

在SVG节点上添加事件监听器：

svgobj.addEventListener("click", myFunction);

- Cyrille

Answer 5

请确保在<use>中添加className/id，或者在SVG脚本范围之外进行检测时，也可以使用实际的SVG路径/元素：

<svg rel='-1' class='**ux-year-prev**' width="15px" height="15px" style="border:0px solid"><use class='**ux-year-prev**' xlink:href="#svg-arrow-left"></use></svg>

- user3204205

Answer 6

我建议使用以下方法为SVG元素添加onclick事件处理程序：

var svgobj = parent_svg.find('svg')[0].children;

for (i = 0; i < svgobj.length; i++) {
   element = svgobj[i];
   element.style = "cursor: pointer;";
   $(element).click(function(evt){console.log($(this))});
}  

首先检查当svgobj获取一个onclick事件处理程序时，它是否被传递到console.log。从那一点上，您可以将其传递给任何函数来处理该元素。

您可以在此处查看示例的工作方式：

https://jsfiddle.net/chetabahana/f7ejxhnk/20/

使用此示例的注意事项：
- 将SVG图表上的状态更改为已打印选项，
- 单击一个元素，然后在控制台中检查输出。

- eQ19

Answer 7

我们可以简单地为SVG添加一个onclick事件

1. <img class="video-svg" id="play" onclick="playVid(id)" src="assets/img/logo/play svg.png">

然后我们可以给它提供CSS样式，使其产生效果，为此我们需要将位置设置为绝对定位，并将z-index设置为200，这将使SVG的点击事件生效

2.

.video-svg {
   margin: auto;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 7%;
   background: no-repeat;
   border: none;
   z-index: 200 !important;
   width: 10% !important;
   position: absolute !important;
}

- sweety santhosh k

Answer 8

我曾经遇到过同样的问题，关于将z-index放在div上方的答案帮了我很多！

然而，我发现你不需要将svg包装在一个div中，只要将它的z-index设置为最高即可，只要父元素被定位。

- jlewis90