单击处理程序 <svg> 元件

Question

似乎使用<svg:svg> </svg:svg>元素在Safari或Chrome中不呈现任何内容，但使用<svg> </svg>工作正常。 但是，添加onclick仅适用于<svg:svg>元素。 这样做的正确方法是什么？

这个jsfiddle演示了这个问题（比较Safari / Chrome和Firefox）。

Answer 1

您甚至不必在SVG周围放置容器。

您只需要定义一个position: relative对于SVG本身，它解决了点击触发问题。

这是一个分叉的小提琴显示它： http ： //jsfiddle.net/jpsirois/xnw1tbL7/

Answer 2

好的，事实证明，创建SVG的第一种方法是仅在绘制的部分上创建onclick 。 这意味着你可以做一些不错的事情（在你的情况下可能没用）。

在这个小提琴中 ，我创建了两个单独的onclick s，一个在你专门点击绘图时触发（一个我做得更大，你可以看到），一个在你点击SVG框时触发，通过在它周围放一个容器。

HTML：

<div id="svgContainer">
    <svg id="firstSVG" class="s" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="25" fill="red"/>
    </svg>
</div>

JS：

document.getElementById('firstSVG').addEventListener('click', function (event) {
  document.getElementById("output").innerHTML = "Click works here too !";  

}, false);
document.getElementById('svgContainer').addEventListener('click', function (event) {
  document.getElementById("output").innerHTML = "Well, a container seems better.";  

}, true);

所以基本上只是在SVG周围使用一个容器，或者只是使用图纸上的点击