使一个 html svg 对象也是一个可点击的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11374059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make an html svg object also a clickable link
提问by iancoleman
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.
我的 HTML 页面中有一个 SVG 对象，并将其包装在一个锚点中，因此当单击 svg 图像时，它会将用户带到锚点链接。
<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>
When I use this code block, clicking the svg object doesn't take me to google. In IE8< the span text is clickable.
当我使用此代码块时，单击 svg 对象不会将我带到 google。在 IE8< 中，span 文本是可点击的。
I do not want to modify my svg image to contain tags.
我不想修改我的 svg 图像以包含标签。
My question is, how can I make the svg image clickable?
我的问题是，如何使 svg 图像可点击？
采纳答案by Erik Dahlstr?m
The easiest way is to not use <object>. Instead use an <img> tag and the anchor should work just fine.
最简单的方法是不使用 <object>。而是使用 <img> 标签，锚点应该可以正常工作。
回答by energee
Actually, the best way to solve this is... on the <object> tag, use:
实际上，解决这个问题的最好方法是...在 <object> 标签上，使用：
pointer-events: none;
Note: Users which have the Ad Blocker plugin installed get a tab-like [Block] at the upper right corner upon hovering (the same as a flash banner gets). By settings this css, that'll go away as well.
注意：安装了 Ad Blocker 插件的用户在悬停时会在右上角获得一个类似标签的 [Block]（与 Flash 横幅获得的相同）。通过设置这个 css，它也会消失。
回答by Richard
I had the same issue and managed to solve this by:
我遇到了同样的问题并设法通过以下方式解决了这个问题：
Wrapping the object with an element set to block or inline-block
使用设置为 block 或 inline-block 的元素包装对象
<a>
<span>
<object></object>
</span>
</a>
Adding to <a>tag:
添加到<a>标签：
display: inline-block;
position: relative;
z-index: 1;
and to the <span>tag:
和<span>标签：
display: inline-block;
and to the <object>tag:
和<object>标签：
position: relative;
z-index: -1
See an example here: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6
在此处查看示例：http: //dabblet.com/gist/d6ebc6c14bd68a4b06a6
Found via comment 20 here https://bugzilla.mozilla.org/show_bug.cgi?id=294932
通过此处的评论 20 找到https://bugzilla.mozilla.org/show_bug.cgi?id=294932
回答by noelmcg
Would like to take credit for this but I found a solution here:
想为此归功于自己，但我在这里找到了解决方案：
https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable
https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable
add the following to the css for the anchor:
将以下内容添加到锚点的 css 中：
a.svg {
position: relative;
display: inline-block;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
<a href="#" class="svg">
<object data="random.svg" type="image/svg+xml">
<img src="random.jpg" />
</object>
</a>
Link works on the svg and on the fallback.
链接适用于 svg 和后备。
回答by Ben Frain
You could also stick something like this in the bottom of your SVG (right before the closing </svg>tag):
您也可以在 SVG 的底部（就在结束</svg>标记之前）粘贴类似的内容：
<a xmlns="http://www.w3.org/2000/svg" id="anchor" xlink:href="/" xmlns:xlink="http://www.w3.org/1999/xlink" target="_top">
<rect x="0" y="0" width="100%" height="100%" fill-opacity="0"/>
</a>
Then just amend the link to suit. I have used 100% width and height to cover the SVG it sits in. Credit for the technique goes to the smart folks at Clearleft.com - that's where I first saw it used.
然后只需修改链接以适应。我使用了 100% 的宽度和高度来覆盖它所在的 SVG。这项技术归功于 Clearleft.com 上的聪明人——这是我第一次看到它被使用的地方。
回答by Feuermurmel
A simplification of Richard's solution. Works at least in Firefox, Safari and Opera:
理查德解决方案的简化。至少适用于 Firefox、Safari 和 Opera：
<a href="..." style="display: block;">
<object data="..." style="pointer-events: none;" />
</a>
See http://www.noupe.com/tutorial/svg-clickable-71346.htmlfor additional solutions.
有关其他解决方案，请参阅http://www.noupe.com/tutorial/svg-clickable-71346.html。
回答by ChristopherStrydom
To accomplish this in all browsers you need to use a combination of @energee, @Richard and @Feuermurmel methods.
要在所有浏览器中完成此操作，您需要结合使用 @energee、@Richard 和 @Feuermurmel 方法。
<a href="" style="display: block; z-index: 1;">
<object data="" style="z-index: -1; pointer-events: none;" />
</a>
Adding:
添加：
pointer-events: none;makes it work in Firefox.display: block;gets it working in Chrome, and Safari.z-index: 1; z-index: -1;makes it work in IE as well.
pointer-events: none;使其在 Firefox 中工作。display: block;让它在 Chrome 和 Safari 中工作。z-index: 1; z-index: -1;使其在 IE 中也能工作。
回答by Bruce Pezzlo
I resolved this by editing the svg file too.
我也通过编辑 svg 文件解决了这个问题。
I wrapped the xml of the whole svg graphic in a group tag that has a click event as follows:
我将整个 svg 图形的 xml 包装在一个具有单击事件的组标记中，如下所示：
<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
<!-- ... your graphics ... -->
</g>
</svg>
Solution works in all browsers that support object svg script. (default a img tag inside your object element for browsers that don't support svg and you'll cover the gamut of browsers)
解决方案适用于所有支持对象 svg 脚本的浏览器。（对于不支持 svg 的浏览器，默认在对象元素中使用 img 标签，您将涵盖所有浏览器）
回答by Dario Rigon
i tried this clean easy method and seems to work in all browsers. Inside the svg file:
我尝试了这种干净简单的方法，似乎适用于所有浏览器。在 svg 文件中：
<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
<!--your graphic-->
</a>
</svg>
回答by Stefan Fandler
Do it with javascript and add a onClick-attribute to your object-element:
使用 javascript 进行操作，并onClick为您的object-element添加-attribute ：
<object data="mysvg.svg" type="image/svg+xml" onClick="window.location.href='http://google.at';">
<span>Your browser doesn't support SVG images</span>
</object>
