如何从<a> element in svg

时间:2018-12-29 18:57:18

标签: svg hyperlink underline

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>

1 个答案:

答案 0 :(得分:2)

我想您有<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>