26

我在 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 脚本中显示 SVG，使用echo. 另请注意，PHP 脚本生成的内容是使用 AJAX 和XMLHttpRequest().

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

4

8 回答 8

28

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

于 2013-05-09T23:27:54.480 回答
5

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;
    }
于 2014-03-31T07:26:24.033 回答
1

如果您不需要单击 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');
});
于 2017-05-12T15:45:20.613 回答
1

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

svgobj.addEventListener("click", myFunction);
于 2020-06-06T13:20:07.120 回答
0

确保添加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>
于 2015-03-31T10:46:51.833 回答
0

我们可以简单地向 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;
}
于 2021-06-30T12:05:38.917 回答
0

我建议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))});
}

Cek 首先是否在获取事件处理程序时将您svgobj的传递给。从那时起，您可以传递给任何函数来处理该元素。 console.logonclick

您可以在此处的示例中看到它是如何工作的：

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

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

于 2018-05-13T17:28:36.020 回答
0

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

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

于 2021-01-06T14:30:21.357 回答