使一个 html svg 对象也是一个可点击的链接 [英] make an html svg object also a clickable link

问题描述

我的 HTML 页面中有一个 SVG 对象，并将其包装在一个锚点中，因此当单击 svg 图像时，它会将用户带到锚点链接.

I have an SVG object in my HTML page and am wrapping it in an anchor so when the svg image is clicked it takes the user to the anchor link.

<a href="http://www.google.com/">
    <object data="mysvg.svg" type="image/svg+xml">
        <span>Your browser doesn't support SVG images</span>
    </object>
</a>

当我使用此代码块时，单击 svg 对象不会将我带到 google.在 IE8<跨度文本是可点击的.

When I use this code block, clicking the svg object doesn't take me to google. In IE8< the span text is clickable.

我不想修改我的 svg 图像以包含标签.

I do not want to modify my svg image to contain tags.

我的问题是，如何使 svg 图像可点击?

My question is, how can I make the svg image clickable?

推荐答案

实际上，解决这个问题的最好方法是...在<object>标签，使用:

Actually, the best way to solve this is... on the <object> tag, use:

pointer-events: none;

注意:安装了 Ad Blocker 插件的用户在悬停时会在右上角获得一个类似标签的 [Block](与 Flash 横幅获得的相同).通过设置这个 css，它也会消失.

http://jsfiddle.net/energee/UL9k9/

这篇关于使一个 html svg 对象也是一个可点击的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！