如何从 svg 的 <a> 元素中的 <text> 中删除悬停时的下划线

Question

我无法摆脱悬停在 svg 代码中的链接上的下划线。 有问题的网站：https://www.lokalfilm.com/svgtest2/ 下划线出现在地图上的所有标签上，我提供了下面代码的 sn-p 作为参考（对于其中一个标签）

代码是从 adobe illustrator 生成的。它是 SVG tiny 1.1，因为 SVG 1.1 创建的代码对于我来说太长而无法在不进入开发人员模式的情况下使用。我用的是squarespace，我不是专业的开发者。

我已经尝试过之前关于 SO 的问题中提供的解决方案（我发现唯一一个相关的问题），但它不起作用： svg <text> element inside <a> element gets underline on hover in Chrome

<g id="Tekst">
<a xlink:href="https://www.lokalfilm.com/sunde" >
<text transform="matrix(1 0 0 1 352.7658 322.5889)" font- 
family="'BlockBE-Regular'" font-size="11px">Sunde</text>
</a>
</g>

Answer 1

我想您的 CSS 样式中有 <a> 元素。要仅为 SVG 覆盖这些规则，您可以使用 @namespace 来设置带有 xlink:href 属性的 <a> 元素的样式。 a[xlink|href]{text-decoration:none;}

/* defines the namespace for the xlink*/
@namespace xlink "http://www.w3.org/1999/xlink";
/* a stile for all the a elements in the document*/
a{text-decoration:underline;}

/*Styling only the a elements in the svg*/
a[xlink|href]{text-decoration:none;}

<svg viewBox = "350 310 33 30">
<g id="Tekst">
<a xlink:href="https://www.lokalfilm.com/sunde" >
<text transform="matrix(1 0 0 1 352.7658 322.5889)" font- 
family="'BlockBE-Regular'" font-size="11px">Sunde</text>
</a>
</g>
</svg>

如果您没有带有<a> 元素的foreignObjects，您也可以使用svg a 选择器。

更新：

OP 正在评论：

但是我无法访问该代码，因此我必须调整 svg 代码以覆盖它...我只是不确定要插入什么以及将其插入到我的 svg 代码中的什么位置

这就是您如何将 css 样式添加到您的 SVG：在 SVG 中您可以添加以下代码块：

接下来是一个示例，其中 SVG 外部的 <a> 元素在鼠标悬停时带有下划线，但 SVG 内部的 <a> 元素没有：

/* a stile for all the a elements in the document*/
a{text-decoration:none;}
a:hover{text-decoration:underline;}
svg{border:1px solid; margin:1em 0;width:80vh}

<p><a href="https://stackoverflow.com">A link in the SVG element</a></p>


<svg viewBox="350 310 33 30">

<style type="text/css">
        <![CDATA[
        /* defines the namespace for the xlink*/
        @namespace xlink "http://www.w3.org/1999/xlink";
        /*Styling only the a elements in the svg*/
        a[xlink|href]:hover{text-decoration:none;}
        ]]> 
</style>
  
<g id="Tekst">
<a xlink:href="https://www.lokalfilm.com/sunde" >
<text transform="matrix(1 0 0 1 352.7658 322.5889)" font- 
family="'BlockBE-Regular'" font-size="11px">Sunde</text>
</a>
</g> 
  
</svg>