161

我的 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 对象不会将我带到谷歌。在 IE8< 中，span 文本是可点击的。

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

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

4

13 回答 13

243

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

pointer-events: none;

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

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

于 2013-06-16T13:22:41.340 回答
42

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

使用设置为 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

于 2012-10-04T16:51:22.900 回答
34

想以此为荣，但我在这里找到了解决方案：

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

将以下内容添加到锚的 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>

链接适用于 svg 和后备。

于 2013-08-02T13:40:49.893 回答
29

你也可以在你的 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 上的聪明人——这是我第一次看到它使用的地方。

于 2013-10-23T22:30:11.280 回答
23

理查德解决方案的简化。至少在 Firefox、Safari 和 Opera 中有效：

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

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

于 2013-07-25T10:46:55.120 回答
21

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

于 2012-07-07T10:59:30.593 回答
10

要在所有浏览器中完成此操作，您需要结合使用@energee、@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 中也能正常工作。
于 2014-08-06T16:10:47.603 回答
3

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

我将整个 svg 图形的 xml 包装在一个具有点击事件的组标签中，如下所示：

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

解决方案适用于所有支持对象 svg 脚本的浏览器。（对于不支持 svg 的浏览器，您的 object 元素中默认有一个 img 标签，您将覆盖所有浏览器）

于 2014-07-14T09:42:28.413 回答
3

我尝试了这种干净简单的方法，似乎适用于所有浏览器。在 svg 文件中：

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

于 2015-08-19T10:25:07.280 回答
1

我只是简单地使用

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

除了我试图应用 :hover 状态外，它工作正常。把我带到这里的是当我使用

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

我丢失了链接，并在 DevTools 中注意到该链接仍然出现在 SVG 周围，但 :hover 状态有效。利用 energee 的优雅答案，我的链接有效，但我当然失去了：悬停。所以看起来 object 标记对于将 :hover 更改应用于 SVG 来说并不是一个很好的解决方案。

我很好奇，你为什么不使用 img 标签来显示一个没有任何特殊添加的 SVG，比如 :hover？使用 img 标签也适用于 a 标签。

于 2021-05-10T16:50:46.737 回答
0

只是不要使用<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>
于 2020-06-04T14:32:34.500 回答
0

这已经很晚了，但我想知道为什么energee 的解决方案有效：具体来说，<object>元素如何影响其父元素。

tl; dr您不能单击其中包含<object>元素的锚点，因为单击事件被<object>元素内部的任何内容捕获，然后不会将其冒泡。

jsfiddle

扩展原始问题中描述的症状：不仅<object>锚元素内的元素会导致锚变得不可点击，似乎作为任何元素<object>的子元素的元素都会导致, , 和事件（也可能是触摸事件）不要在父元素上触发，（当您在的边界矩形内单击时。）clickmousedownmouseup<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>文档时。HTMLObjectElement.contentDocument在 JavaScript 中，这通过和HTMLObjectElement.contentWindow属性的存在表现出来。

这意味着，如果您向以下<svg>元素中的元素添加事件侦听器<object>：

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

然后单击图像，您将看到正在触发的事件。

然后很清楚为什么pointer-events: none;解决方案有效：

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

  • 使用这种样式，MouseEvents 不会<object>首先发送到 s，然后<object>s 的父元素将照常接收事件。

这也应该解释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)
于 2021-01-15T07:08:18.070 回答
-5

使用 javascript 执行此操作并将onClick-attribute 添加到您的object-element：

<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>
于 2012-07-07T10:08:41.713 回答