html - 使用onclick使svg图像对象可点击，避免绝对定位

Question

我试图将我网站上的图像从 img 更改为 svg，将 img 标签更改为 embed 和 object 标签。但是，实现 onclick 函数(之前包含在 img 标记中)被证明是最困难的。

我发现 onclick 放在 object 或 embed 标签内时没有效果。

所以，我专门为svg制作了一个div，并在这个div标签中放置了onclick。但是，除非访问者点击图像的边缘/填充，否则没有效果。

我读过有关覆盖 div 的内容，但我试图避免使用 absolute 定位，或根本不指定 position。

还有其他方法可以将 onclick 应用于 svg 吗？

有人遇到过这个问题吗？欢迎提出问题和建议。

Answer 1

您可以在 svg 本身中有一个 onclick 事件，我在工作中一直这样做。在你的 svg 空间上做一个矩形，(所以最后定义它，记住 svg 使用画家模型)

rect.btn {
  stroke:#fff;
  fill:#fff;
  fill-opacity:0;
  stroke-opacity:0;
}

然后作为 rect 的属性添加 onclick(这也可以使用 js 或 jquery 完成)。

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
    <circle ... //your img svg
    <rect class="btn" x="0" y="0" width="10" height="10" onclick="alert('click!')" />
  </g>
</svg>
</div>

这几乎适用于所有浏览器:http://caniuse.com/svg