使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 <中，跨度文本是可单击的。

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

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

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

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

pointer-events: none;

注意：安装了Ad Blocker插件的用户在悬停时会在右上角显示一个标签状的[Block]（与Flash标语相同）。通过设置此CSS，它也将消失。

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

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

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

对此表示赞赏，但我在这里找到了解决方案：

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和后备。

您也可以在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上的精明人士-这是我第一次看到它的地方。

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

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

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

要在所有浏览器中完成此操作，您需要使用@ 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中使用。

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

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

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

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

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

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

只是不要使用<object>。这是一个适用于<a>and <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>

使用javascript并在onClick-e object元素中添加-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>