Последовательное изменение цвета фона при наведении курсора на ссылку SVG

Я решил поиграться с переделкой навигационного меню в SVG. На самом деле это очень похоже на навигацию этого сайта, так что особо нечего представлять.

Я рисую блоки с помощью SVG, а затем размещаю над ними текст, заключая их в ссылку. Прикрепив класс css к полю, я могу установить атрибут :hover, чтобы я мог изменить цвет фона, когда пользователь наводит на него курсор. Проблема в том, что когда пользователь наводит курсор на текст, цвет меняется на противоположный, хотя ссылка все еще работает.

Как я могу заставить коробку менять цвет?

Код выглядит следующим образом:

<svg width="640px" height="40px" 
 xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(60 20) ">
  <a xlink:href="http://www.apple.com">
    <rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
    <text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
  </a>
</g>
</svg>

svg
person RailFan    schedule 25.10.2009    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Как выглядят ваши правила стиля?

Что-то вроде следующего должно работать нормально:

<svg width="640px" height="40px" 
 xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(60 20) ">
  <a xlink:href="http://www.apple.com">
    <rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
    <text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
  </a>
</g>
<g transform="translate(166 20) ">
  <a xlink:href="http://www.apple.com">
    <rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
    <text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
  </a>
</g>
<style>
    g:hover .svg_nav { fill: blue }
    g:hover .nav_text { fill: red }
    .svg_nav { fill: yellow }
    .nav_text { fill: black }
</style>
</svg>
person Erik Dahlström    schedule 25.10.2009