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

Question

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

代码是从 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> 元素的 foreignObject，您也可以使用 svg a 选择器。

更新：

OP 正在评论：

I can't access that code however, so I would have to tweak the svg-code in a way to override it... I'm just unsure what to insert and where to insert it in my svg-code

这是您可以向 SVG 添加 css 样式的方法：在 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://whosebug.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>

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

How to remove underline on hover from <text> in <a> element in svg

svg

hyperlink

underline

更新：