Не работает mouseleave после mouseenter на SVG USE символе

101

11 января 2021, 07:00

Мне нужно чтобы при mouseenter символ в SVG менялся с #dot на #dot2. И при mouseleave - наоборот.

Mouseenter работает, после этого другие события (mouseleave, onclick) не срабатывают.

ссылка на JSFiedle

$('body').on('mouseenter', '.point', function() { 
  this.setAttributeNS("http://www.w3.org/1999/xlink", "href", '#dot2'); 
}); 
$('body').on('mouseleave', '.point', function() { 
  this.setAttributeNS("http://www.w3.org/1999/xlink", "href", '#dot'); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<!doctype html> 
<html> 
 
<body> 
 
  <svg width="260" height="140"> 
    <defs> 
        <symbol id="dot2"> 
            <circle fill="#444D5D" stroke="#1F232E"  cx="15" cy="15" r="11.7"/> 
            <path fill="#FFFFFF" stroke="#1F232E"  d="M22.8,6.3c-2.1-1.9-4.8-3-7.8-3s-5.7,1.1-7.8,3L15,15L22.8,6.3z"/> 
            <circle fill="#FFC72C" stroke="#1F232E"  cx="15" cy="15" r="4.5"/> 
        </symbol> 
 
        <symbol id="dot"> 
        	<circle fill="#444D5D" stroke="#1F232E" cx="15" cy="15" r="7.5"/> 
            <circle fill="#FFC72C" stroke="#1F232E" cx="15" cy="15" r="3.6"/> 
        </symbol> 
    </defs> 
 
    <use xlink:href="#dot" x="50" y="20" class="point"/> 
    <use xlink:href="#dot" x="80" y="20" class="point"/> 
</svg> 
 
</body> 
 
</html>

Answer 1

Задайте свг id и вешайте события не на body, а на свг. Например:

$('#svg_id').on('mouseenter', '.point', function() {
  this.setAttributeNS("http://www.w3.org/1999/xlink", "href", '#dot2');
});
$('#svg_id').on('mouseleave', '.point', function() {
  this.setAttributeNS("http://www.w3.org/1999/xlink", "href", '#dot');
});

Ну и хтмл:

<svg width="260" height="140" id="svg_id"></svg>

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Бесконечное каррирование

Есть вот такой кодМне надо переписать его так чтобы он например при вызове console

124

javascript

Mozilla Firefox не воспринимает Lookbehind Регулярное Выражение

Имеется регклярное выражение:

131

javascript

Загрузить xml при помощи js

Нужно сделать так, чтобы можно было при помощи взять информацию из файла, который я выберу, а не заранее указывать в коде

102

javascript

Анимация при появлении в DOM

Как в vuejs сделать анимацию при появлении блока в dom

109