Question

I can't get rid of an underline on hover on links in a svg-code. The website in question: https://www.lokalfilm.com/svgtest2/中的移除悬停下划线下划线出现在地图上的所有标签上，我提供了以下代码段作为参考（对于其中一个标签）

代码是从Adobe Illustrator生成的。它是SVG微型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

我想您有<a>元素的CSS样式。要仅为SVG覆盖这些规则，可以使用@namespace来仅设置具有<a>属性的xlink:href元素的样式。 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>

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

更新：

OP正在评论：

但是我无法访问该代码，因此我将不得不以某种方式来调整svg代码以覆盖它...我只是不确定在我的svg代码中插入什么以及在哪里插入< / p>

这是将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>

如何从<a> element in svg

1 个答案:

更新：