将 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() 带入页面的。

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

Answer 1

我们可以简单地给 svg 添加一个 onclick 事件

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

然后我们可以给 css 来产生效果，因为我们需要给 position as absolute 和 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;
}

Answer 2

我遇到了同样的问题，关于将 z-index 放在 div 顶部的答案有帮助！

但是，我发现您不需要将 svg 包装在 div 中，只要定位父级，就可以将其 z-index 到顶部。

Answer 3

向 svg 节点添加事件监听器：

let svgobj.addEventListener("click", myFunction);

Answer 4

Demo in 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;
    }

Answer 5

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

Answer 6

我建议将onclick 事件处理程序的这种方法用于 svg 元素：

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 图上的状态更改为 Printed 选项，
- 单击其中一个元素，然后在控制台中查看输出。

Answer 7

如果您不需要点击 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');
});

Answer 8

确保将className/id 添加到<use>；或使用实际的 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>