1

Всем доброго дня. При верстке сайта столкнулся с проблемой в работе с SVG. Есть SVG-шка подобной структуры:

<svg id="district">
  <path id="black1"></path>
  <path id="black2"></path>
  <path id="white1"></path>
  <path id="white2"></path>
</svg>

Задача стоит в том чтобы при наведении на #white1 к #black1 добавлялся какой-то класс , через который я буду изменяться исходные стили этого элемента. Таким способом не получается:

$('#white1').hover(
  function() {
    $('#black1').toggleClass('new');
  }
);

Я так понимаю что специфика работы с svg элементами в js совсем иная. Подскажите пожалуйста как можно решить данную задачу ?

2

1 ответ 1

1

$('svg path').hover(
  function(){
    $(this).addClass('active').siblings().removeClass('active');
  },
  function(){
    $(this).removeClass('active');
  }
);
svg path.active {
  fill: #000;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
<svg viewBox="0 0 200 200" width="400">
  <path d="M 0,0 100,0 100,100, 0,100 z" fill="green"></path>
  <path d="M 100,0 200,0 200,100, 100,100 z" fill="blue"></path>
  <path d="M 0,100 100,100 100,200, 0,200 z" fill="red"></path>
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.