Наведите указатель мыши и измените цвет в SVG

-1

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

Здесь вы можете увидеть пример моей цели: http://www.blocket.se/

CSS:

path:hover{ fill: #FEFF7F !important; } 
.svgcolor{ fill: #FEFF7F !important; } 
.underline{ font-weight:600; text-decoration: underline; }

HTML:

<li id="maplink01"><a href="#" title="Text" target="_blank">Text</a></li>

SVG:

<a xlink:href="http://www.google.com" target="_blank"> 
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="393.5261" y1="226.1426" x2="446.614" y2="226.1426"> 
<stop offset="0" style="stop-color:#E7ECF9" /> 
<stop offset="1" style="stop-color:#C4CFE1" /> 
</linearGradient> 
<path id="mapimg01" style="fill:url(#SVGID_5_);stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;" d="M440.333,216... /></a>

JQ:

//This works fine: 
      $("#mapimg01").hover(function() { 
       $("#maplink01").addClass('underline'); 
      }, function() { 
       $("#maplink01").removeClass('underline'); 
      }); 
//This does not work: 
      $("#maplink01").hover(function() { 
       $("#mapimg01").addClass('svgcolor'); 
      }, function() { 
       $("#mapimg01").removeClass('svgcolor'); 
      });

источник

2014-12-09 Patrik Asplund

Что не работает, ссылка на ссылку кажется мне удобной. Если он не работает, пожалуйста, объясните более подробно то, что вы ожидаете –

Да, но пример не мой проект, im строя похожую карту. Но я не могу получить цвет на карте, чтобы измениться, когда я наводил ссылку на связанную ссылку в меню рядом с картой. Так что что-то не работает, и я пробовал все, не могу получить цвет заливки в пути # mapimg01, чтобы изменить, когда я наводил ссылку на гиперссылку # maplink01. –

Ну, я решил проблему. Я не мог добавить/removeClass в SVG, пришлось использовать setAttribute («стиль», «fill: ...»). Я пробовал это решение раньше, но, очевидно, я не мог использовать jQuerys $ anign, должен был использовать весь document.getElementById. Зачем? Я не знаю :) Решение выглядит так:

var mapImg = document.getElementById("mapimg01"); 

$("#maplink01").hover(function() { 

mapImg.setAttribute("style", "fill:#FEFF7F; stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;"); 
}, 

function() { 


mapImg.setAttribute("style", "fill:url(#SVGID_5_); stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;"); 
});

источник

2014-12-09 18:21:04

Наведите указатель мыши и измените цвет в SVG

ответ

Смежные вопросы