使一个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对象不会把我带到谷歌。 在IE8中，span文本是可点击的。
我不想修改我的svg图像来包含标签。
我的问题是，如何使svg图像可点击？
最简单的方法是不要使用<object>。 相反，使用<img>标签，锚点应该工作得很好。
实际上，解决这个问题的最好方法是在<object>标签上使用：
pointer-events: none;
注意：安装Ad Blocker插件的用户在hover时会得到一个类似于标签的[Block]（与Flash横幅相同）。 通过设置这个CSS，这也将消失。
想为此承担功劳，但我在这里find了一个解决办法：
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和后备。
我有同样的问题，并设法解决这个：
用设置为块或内联块的元素包装对象
<a> <span> <object></object> </span> </a>
添加到<a>标签：
display: inline-block; position: relative; z-index: 1;
和<object>标签添加：
position: relative; z-index: -1
看到一个例子在这里： http : //dabblet.com/gist/d6ebc6c14bd68a4b06a6
通过评论20在这里findhttps://bugzilla.mozilla.org/show_bug.cgi?id=294932
你也可以在SVG的底部粘贴这样的东西（就在closures之前</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的聪明人 – 这是我第一次看到它使用的地方。
理查德的解决scheme的简化。 至less在Firefox，Safari和Opera中工作：
<a href="..." style="display: block;"> <object data="..." style="pointer-events: none;" /> </a>
有关其他解决scheme，请参见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文件解决了这个问题。
我将整个svggraphics的xml包装在一个具有单击事件的组标记中，如下所示：
<svg .....> <g id="thefix" onclick="window.top.location.href='http://www.google.com/';"> <!-- ... your graphics ... --> </g> </svg>
解决scheme适用于支持对象svg脚本的所有浏览器。 （对于不支持svg的浏览器，在对象元素中默认使用一个img标签，你将覆盖浏览器的范围）
我试过这个清洁简单的方法，似乎在所有浏览器中工作。 在svg文件里面：
<svg> <a id="anchor" xlink:href="http://www.google.com" target="_top"> <!--your graphic--> </a> </svg>
用javascript做，并添加一个onClick object到你的object元素：
<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>
