svg 图像内的自定义区域中的链接不起作用
Posted
技术标签:
【中文标题】svg 图像内的自定义区域中的链接不起作用【英文标题】：Link in custom area inside svg image does not work 【发布时间】：2022-01-20 23:22:17 【问题描述】：我想在 svg 图像中创建一些链接和悬停效果。因此，我在一个 svg 图像中创建了一些自定义透明区域，在一个在线图像编辑器中，为了做到这一点。但是当我尝试在这些自定义区域中应用一些链接时，如下所示，它不起作用。我怎样才能让它发挥作用？
<body>
<svg>
<defs></defs>
<!-- custom ellipse which the link does not work -->
<a href="some-link.com">
<ellipse />
</a>
<!-- normal path from the svg image, which the link work -->
<a href="some-link.com">
<path></path>
</a>
<!--rest of the image with many paths-->
<path></path>
</svg>
</body>
【问题讨论】：
也许许多其他路径之一与椭圆重叠 可能，但在 svg 中，椭圆位于路径之前，如上例所示。你知道我怎样才能让椭圆与其他路径重叠吗？ @Marcelo 从代码看来是正确的——问题一定出在其他地方。能否请您提供一些演示或 sn-p，以便我们可以复制问题？ 您可以为重叠路径添加 pointer-events="none"。或者，您可以使用 javascript 并使用 svg.appendChild(theA); 在文档末尾附加 【参考方案1】：ellipse 元素似乎无效。而且由于标记有错误，它甚至可能影响父元素的功能。
自闭合标签的末尾应该有斜线（因为 SVG 基于更严格的 XML），如下所示：
<ellipse />
此更改是否解决了链接问题？
【讨论】：
是的，谢谢。我刚刚解决了这个问题。但这只是实际 svg 图像的示例结构。而且我没有更改svg文件，只是添加了a标签和一些类来检查 @Marcelo 太棒了！那么请您好心把答案添加到这个页面，以便其他有类似问题的人可以从中学习吗？ 当然是托马斯！希望尽快找到解决方法 @Marcelo 啊，我的错。我以为你已经解决了整个问题。以上是关于svg 图像内的自定义区域中的链接不起作用的主要内容，如果未能解决你的问题，请参考以下文章