使用onclick使svg图像对象可点击，避免绝对定位 [英] Making an svg image object clickable with onclick, avoiding absolute positioning

问题描述

我已尝试将网站上的图片从 img 更改为 svg ，更改 嵌入和对象标签的但是，实现以前包含在 img 标签中的 onclick 函数是最困难的。

I have tried to change the images on my site from img to svg, changing img tags to embed and object tags. But, implementing the onclick function, which previously was contained in the img tag, is proving most difficult.

我发现 onclick 在放置在对象 embed 标签。

I found onclick had no effect when placed inside the object or embed tag.

所以，我做了一个 div 专用于svg，并将 onclick 放置在此 div 标记中。但是，除非访问者点击图片的边缘/填充，否则无效。

So, I made a div exclusively for the svg, and placed onclick in this div tag. But, no effect unless visitor clicks on the edges/padding of the image.

我已经阅读了关于覆盖 div ，但我试图避免使用绝对定位，或者指定位置。

I have read about overlaying a div, but am trying to avoid using absolute positioning, or specifying position at all.

有没有另一种方法来申请一个svg？

Is there another way to apply onclick to a svg?

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

Has anyone encountered this problem? Questions and suggestions are welcome.

推荐答案

您可以在svg中使用onclick事件，工作。在你的svg空间上做一个rect（所以最后定义，记住svg使用画家模型）

You can have an onclick event in the svg itself, I do this all the time in my work. make a rect over the space of your svg, (so define it last, remember svg uses the painters model)

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

然后作为属性添加到onclick js或jquery）。

then as an attribute to the rect add the onclick (this can be done with js or jquery as well).

<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 ...但如果您需要交叉兼容性，则可以实施Google Chrome浏览器内嵌框架。 http://www.google.com/chromeframe

this will work in most modern browsers, http://caniuse.com/svg ...though if you need cross compatability, you can implement Google Chrome Frame. http://www.google.com/chromeframe

这篇关于使用onclick使svg图像对象可点击，避免绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！