即使指针事件：可见/绘制，SVG仍然会收到点击 [英] SVG still receives clicks, even if pointer-events: visible/painted

问题描述

基本上，我在我的HTML页面中添加了一对.svg图像，放在< img> 标签中：

< img src =images / corner.svgalt =menuclass =menuonClick =Fade（）;/>

所有这些图片都是相互重叠的。它们具有相同的大小，但内容不同。

我现在试图仅使这些图像的内容可点击。

使用 pointer-events：visible ; 或指针事件：画; 在CSS中似乎是可能的，但我不能像这样工作。该图像仍然会在其中的每个点上收到点击，而不仅仅是内容部分。



我在顶部图片上尝试了 pointer-events：none; ，并且禁用了点击顶部图像，这听起来像是HTML或CSS代码中没有错误。
b
$ b 我在Illustrator CC中创建了带有透明背景的.svg图像，因此通常不会有内容，并且我使用以下选项导出它：

（对不起，这是德语）
SVG设置图片http://s14.directupload.net/images/140318/reurfvoo.png

我没有问题可能出在哪里。

解决方案

问题是您正在使用< img> ; 标签。即使数据是SVG，它们也像栅格一样工作，即单个项目并不存在，它只是一张图片，您可以将其作为完整的可点击或不可显示的图片。

如果您希望绘图是交互式的，您需要使用< object> 或< iframe> 标签，然后您可以通过使用pointer-events属性使单个形状可点击或不可用。

您也可以将所有svg数据嵌入html文件中，但如果你确实需要确保所有的id属性都是唯一的。

Basically, I have a couple .svg images put into an <img> tag on my HTML page like that:

<img src="images/corner.svg" alt="menu" class="menu" onClick="Fade();"/>

All of those images are overlapping with each other. They have the same size but different content.
I'm now trying to make only the content of those images clickable.
With pointer-events: visible; or pointer-events: painted; in CSS that seemed to be possible, but i can't get it work like that. The image still receives clicks at every point in it and not only on the content part.

I tried pointer-events: none; on the top image and that disabled clicks on the top image, which sounded like there was no mistake in the HTML or CSS code.

I created those .svg images in Illustrator CC with a transparent background, so normally there can't be content, and I exported it with the following options:

(sorry for this being in german) picture of SVG settings http://s14.directupload.net/images/140318/reurfvoo.png

I have no idea where the problem could be.

解决方案

The problem is that you're using an <img> tag. They work like rasters even when the data is SVG i.e. the individual items don't really exist, it's just a picture which you can either have as entirey clickable or not.

If you want the drawing to be interactive you'll need to use an <object> or <iframe> tag and then you can make the individual shapes clickable or not by using the pointer-events attribute.

You could also include all the svg data inline in the html file but if you did that you'd need to make sure all the id attributes were unique.

这篇关于即使指针事件：可见/绘制，SVG仍然会收到点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！