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的事实。此外，php脚本生成的内容使用AJAX和

进入页面

 XMLHttpRequest()

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

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

Demo in JSFiddle

    var XMAX = 500;
var YMAX = 500;
var _xx=10;
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

确保将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 4

如果您不需要单击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 5

我建议使用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图表上的状态更改为已打印选项，
- 单击其中一个元素，然后在控制台中输出输出。

Answer 6

将事件监听器添加到svg节点：

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

Answer 7

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

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

Answer 8

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

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

将onclick事件添加到SVG元素

8 个答案: