Как убрать подчеркивание при наведении курсора из элемента <text>in <a>в svg - PullRequest
Новая
       49

Как убрать подчеркивание при наведении курсора из элемента <text>in <a>в svg

0 голосов
/ 29 декабря 2018

Не могу избавиться от подчеркивания при наведении на ссылки в svg-коде.Веб-сайт, о котором идет речь: https://www.lokalfilm.com/svgtest2/ Подчеркивание отображается на всех ярлыках на карте, и я предоставил фрагмент кода ниже в качестве ссылки (для одного из ярлыков)

КодСгенерировано из Adobe Illustrator.Это SVG tiny 1.1, так как SVG 1.1 создает код, который я слишком долго не могу использовать, не переходя в режим разработчика.Я использую squarespace, и я не профессиональный разработчик.

Я пробовал решения, представленные в ранее заданных вопросах о SO (единственное, что я нашел, чтобы быть релевантным), но это не такработа: svg элемент внутри элемент подчеркивается при наведении курсора в 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 голосов
/ 29 декабря 2018

Полагаю, у вас есть стили CSS для элементов <a>.Чтобы перезаписать эти правила только для 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.

ОБНОВЛЕНИЕ:

ОП комментирует:

Однако я не могу получить доступ к этому коду, поэтому мне придется настроить svg-код таким образом, чтобы переопределить его ... IЯ просто не уверен, что вставить и куда вставить его в моем svg-коде

Вот как вы можете добавлять стили CSS в SVG: внутри SVG вы можете добавить этот блок кода:

Далее следует пример, где элемент <a> вне SVG подчеркивается при наведении мыши, но элемент <a> внутри SVG не является: 

/* 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>
...