Question

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

This jsfiddle演示了此问题（将Safari / Chrome与Firefox进行比较）。

Answer 1

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

您只需要为SVG本身定义position: relative并解决点击触发问题。

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

Answer 2

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

在this fiddle中，我创建了两个单独的onclick，一个在你专门点击绘图时触发的（我做得更大，你可以看到），以及当你点击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周围的容器，或者只使用图纸上的点击

单击<svg>元素</svg>上的处理程序

2 个答案: