5

Мне нужно чтобы при 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>

1 ответ 1

0

Задайте свг 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>

Ваш ответ

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

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