我在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>
实际上，解决这个问题的最好方法是在<object>标签上使用：
pointer-events: none;
注意：安装了广告拦截插件的用户在悬停时会在右上角看到一个类似标签的 [Block]（与Flash横幅相同）。通过设置此CSS，该标签将消失。
img 与 SVG 结合使用会使它们无法更改内部 SVG 样式。 - cadavre我也遇到这个问题，解决方法如下：
将对象包装在一个块元素或内联块元素中
<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>标签之前）：<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的聪明人们 - 那是我第一次看到它被使用的地方。
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获取更多解决方案。
<a>元素的display属性设置为 block 或者 inline-block。 - element119inline-block，但在其他情况下似乎 block 的效果更好；我猜这取决于封闭块... - Gwyneth Llewelyn最简单的方法是不要使用<object>标签。相反，使用<img>标签，然后锚点应该能够正常工作。
<img>标签并不总是能按照你的期望工作，即使在最新版本的Chrome中也是如此 :( http://stackoverflow.com/questions/15194870/how-can-i-get-fonts-to-work-in-svg-loaded-in-an-img-tag-in-chrome - dshap<object>标签，并添加pointer-events: none;来使其可点击。这将保留对SVG源代码的访问，并允许您动态操纵它。 - Antoineimg 并不总是可行的选择。在我的情况下，我需要操作 svg，而 img 无法很好地完成此操作，必须使用 object。 - Martijn为了在所有浏览器中实现这一点，您需要结合@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>
<a id="anchor" xlink:href="http://www.google.com" target="_top">
<!--your graphic-->
</a>
</svg>
<object>元素如何影响其父元素。
<object>元素的锚点，因为单击事件被任何在<object>元素内部的东西捕获，然后不会冒泡回来。<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> 内部，它永远不会冒泡出来。
- 有了这个样式，MouseEvent 就不会首先被发送到 <object> 中，然后 <object> 的父元素将像往常一样接收事件。
这也解释了为什么 z-index 解决方案是可行的：只要您能够防止将 click 事件发送到嵌套的文档中，单击操作就应该按预期工作。inline，并且 <object> 元素被定位且具有负的 z-index，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)
<svg .....>
<g id="thefix" onclick="window.top.location.href='http://www.google.com/';">
<!-- ... your graphics ... -->
</g>
</svg>