使 html svg 对象也成为可点击的链接

我的 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>

当我使用这个代码块时，单击 svg 对象并不会带我去 google。在 IE8中 < span 文本是可点击的。

我不想修改 svg 映像以包含标记。

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

142316 次浏览
小开

使用 javascript 进行操作，并在 object-元素中添加一个 onClick-属性:

<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>
小开

最简单的方法是不要使用 < object > ，而是使用 < img > 标记，锚点应该可以正常工作。

小开

我也遇到了同样的问题，我设法通过以下方式解决了这个问题:

用设置为 block 或 inline-block 的元素包装对象

<a>
<span>
<object></object>
</span>
</a>

添加到 <a>标签:

display: inline-block;
position: relative;
z-index: 1;

以及 <span>标签:

display: inline-block;

以及 <object>标签:

position: relative;
z-index: -1

这里有一个例子: http://dabblet.com/gist/d6ebc6c14bd68a4b06a6

发现通过评论20在这里 https://bugzilla.mozilla.org/show_bug.cgi?id=294932

小开
最佳答案

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

pointer-events: none;

注意: 安装了广告拦截器插件的用户在鼠标悬停时会在右上角出现一个类似标签页的[ Block ](与闪光条相同)。通过设置这个 css，它也会消失。

Http://jsfiddle.net/energee/ul9k9/

小开

Richard 解决方案的简化版，至少在 Firefox，Safari 和 Opera 中可以使用:

<a href="..." style="display: block;">
<object data="..." style="pointer-events: none;" />
</a>

有关其他解决方案，请参见 http://www.noupe.com/tutorial/svg-clickable-71346.html。

小开

我很想把这归功于自己，但我找到了一个解决办法:

Https://teamtreehouse.com/forum/how-do-you-make-a-svg-clickable

为锚添加以下内容:

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 在 svg 和备用系统上工作。

小开

您也可以在 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>

那就把链接改成诉讼。我使用了100% 的宽度和高度来覆盖它所在的 SVG。这项技术应该归功于 Clearleft.com 的聪明人——这是我第一次看到它被使用的地方。

小开

我也通过编辑 svg 文件解决了这个问题。

我将整个 svg 图形的 xml 封装在一个 group 标记中，该标记具有如下 click 事件:

<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
<!-- ... your graphics ... -->
</g>
</svg>

解决方案适用于所有支持对象 svg 脚本的浏览器。(对于不支持 svg 的浏览器，在 object 元素中默认使用 img 标记，这样就可以覆盖所有浏览器)

小开

要在所有浏览器中实现这一点，你需要结合使用@energy、@Richard 和@Feuermurmel 方法。

<a href="" style="display: block; z-index: 1;">
<object data="" style="z-index: -1; pointer-events: none;" />
</a>

添加:

  • pointer-events: none;可以在 Firefox 中工作。
  • display: block;可以在 Chrome 和 Safari 中使用。
  • z-index: 1; z-index: -1;也可以在 IE 中工作。
小开

我尝试了这个简单干净的方法，似乎在所有的浏览器工作。 在 svg 文件中:

<svg>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
  

<!--your graphic-->
  

</a>
</svg>

小开

只是不要使用 <object>。这里有一个解决方案，与 <a>和 <svg>标签我工作:

<a href="<your-link>" class="mr-5 p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-red-700 transition duration-150 ease-in-out" aria-label="Notifications">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30"
height="30"><path class="heroicon-ui" fill="#fff" d="M17 16a3 3 0 1 1-2.83
2H9.83a3 3 0 1 1-5.62-.1A3 3 0 0 1 5 12V4H3a1 1 0 1 1 0-2h3a1 1 0 0 1 1
1v1h14a1 1 0 0 1 .9 1.45l-4 8a1 1 0 0 1-.9.55H5a1 1 0 0 0 0 2h12zM7 12h9.38l3-
6H7v6zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
</a>
小开

这是非常晚，但我想知道为什么 能量解工作: 具体来说，<object>元素如何影响其父元素。

Dr 您不能单击包含 <object>元素的锚点，因为单击事件被 <object>元素内的任何东西捕获，这样就不会将其弹出。

Jsfiddle

为了扩展最初问题中描述的症状: 不仅锚元素中的 <object>元素会导致锚变得不可点击，似乎 <object>元素作为 任何元素的子元素会导致 click、 mousedown和 mouseup事件(也可能触发事件)不触发父元素 (当你在 <object>的边界直线内点击时)

<span>
<object type="image/svg+xml" data="https://icons.getbootstrap.com/icons/three-dots.svg">
</object>
</span>

document
.querySelector('span')
.addEventListener('click', console.log) // will not fire

现在，<object>元素的行为有点“像”<iframe>，在这个意义上，它们将建立新的浏览上下文 包括内容是 <svg>文档的情况。。在 JavaScript 中，这通过 HTMLObjectElement.contentDocument和 HTMLObjectElement.contentWindow属性的存在来体现。

这意味着，如果向 <object>中的 <svg>元素添加一个事件侦听器:

document
.querySelector('object')
.contentDocument  // returns null if cross-origin: the same-origin policy
.querySelector('svg')
.addEventListener('click', console.log)

然后点击图像，你会看到事件被激发。

那么，pointer-events: none;解决方案能够奏效的原因就显而易见了:

  • 如果没有这种风格，任何被认为是“交互式”的 MouseEvent(如 click和 mousedown，但不是 mouseenter)都会被发送到 <object>内部的嵌套浏览上下文中，< strong > 永远不会冒泡出来。

  • 使用这种样式，首先 MouseEvent不会被发送到 <object>中，然后 <object>的父元素将像往常一样接收事件。

这也可以解释 z-index解决方案: 只要您可以防止 click事件被发送到嵌套文档，单击就应该按预期工作。

(在我的测试中，z-index解决方案将工作，只要父元素不是 inline和 <object>的位置，并有一个负的 z-index)

(或者，你可以找到一种方法让事件重新浮出水面) :

let objectElem = document.querySelector('object')
let svgElemt = objectElem.contentDocument.querySelector('svg')


svgElem.addEventListener('click', () => {
window.postMessage('Take this click event please.')
// window being the outermost window
})


window.addEventListener('message', console.log)
小开

我只是简单地使用

        <a href="#">
<img src="../../assets/images/logo.svg" alt="">
</a>

除了我试图应用一个: 悬浮状态之外，这个工作很好

        <a href="#">
<object data="../../assets/images/logo.svg" type="image/svg+xml" class="logo">
</object>
</a>

我丢失了我的链接，并注意到 DevTools 中的链接仍然出现在 SVG 周围，但是: hover 状态起作用了。利用能量的优雅回答，我的链接工作，但当然我失去了: 悬停。因此，对于向 SVG 应用: hover 更改，object 标记似乎不是一个很好的解决方案。

我很好奇，为什么不使用 img 标记来显示 SVG，而不向其中添加任何特殊的东西，比如: hover？使用 img 标记也适用于 a 标记。


提交答案