向 SVG 元素添加 onclick 事件

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>

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

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');
});

Answer 4

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

svgobj.addEventListener("click", myFunction);

Answer 5

确保将

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>

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

是否在获取

console.log

事件处理程序时传递给

onclick

。从那时起，您可以传递给任何函数来处理该元素。

您可以在此处查看示例，了解它是如何工作的：

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

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

Answer 7

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

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

Answer 8

将 onlClick 处理程序移出 svg 并将事件添加到 svg 本身。您可能会间歇性地在事件处理程序中获取 rect 而不是 svg，在这种情况下您可以这样做：

if (event.target.tagName !== 'svg') {
  event.target = event.target.closest('svg');
}

所以重构你的代码：

<script type="text/ecmascript"><![CDATA[
    function changerect(evt) {
      if (evt.target.tagName !== 'svg') {
        evt.target = event.target.closest('svg');
      }
      var svgobj = evt.target;
      svgstyle = svgobj.getStyle();
      svgstyle.setProperty ('opacity', 0.3);
      svgobj.setAttribute ('x', 300);
    }
  ]]>
</script>

<svg onclick='changerect(evt)' xmlns='http://www.w3.org/2000/svg' version='1.1' height='600' width='820'>
  <rect style='fill:blue;opacity:1' x='10' y='30' width='100' height='100' />
</svg>

Answer 9

我们可以简单地向 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;
}