2

Я пытаюсь создать иконку SVG, которая будет анимироваться с использованием SMIL (ну, мне все равно, SMIL это или CSS, я просто не хочу использовать JS) при наведении курсора, и я ушел довольно далеко, но я получил при решении проблему, на которую не могу найти ответа или даже упоминания в Интернете.

Анимация начинается при наведении курсора мыши , но при этом один из анимированных элементов (2-й круг) продолжает анимацию, и я не понимаю, почему.

Спасибо заранее за любую помощь, которую вы можете оказать

svg { width: 100px; color: red; }
<svg id="location" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
<defs>
    <clipPath id="circleClip">
        <path d="M49,19c0,7-12,26-18.97,26C23,45,12,26,12,19H49z M72-12h-84v84h84V-12z" />
    </clipPath>
</defs>
<g clip-path="url(#circleClip)">
    <g transform="matrix(1, 0, 0, 0.43999, 0, 25.2)">
        <circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="14">
          <animate attributeType="XML" attributeName="r" from="0" to="20" begin="location.mouseover" end="location.mouseout" dur="3s" repeatCount="indefinite" />
          <animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="location.mouseover" end="location.mouseout" dur="3s" repeatCount="indefinite" />
      </circle>
        <circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="0">
          <animate ttributeType="XML" attributeName="r" from="0" to="20" begin="location.mouseover+2s" end="location.mouseout" dur="3s" repeatCount="indefinite" />
          <animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="location.mouseover+2" end="location.mouseout" dur="3s" repeatCount="indefinite" />
      </circle>
    </g>
</g>

    <path fill="currentColor" stroke="currentColor" stroke-width="0" d="M30,7c7.18,0,13,5.82,13,13S30,45,30,45S17,27.18,17,20S22.82,7,30,7z" />
    <path fill="#fff" stroke-width="0" d="M30,15c2.76,0,5,2.24,5,5s-2.24,5-5,5c-2.76,0-5-2.24-5-5S27.24,15,30,15" />

</svg>

Свободный перевод вопроса SMIL Animation Not Ending On Mouseout от участника @jgelt.

1

1 ответ 1

2

Ловушка, в которую вы попались, заключалась в том, что, в отличие от элементов HTML, события мыши вызываются по умолчанию только тогда, когда указатель находится над окрашиваемой областью (обводка или заливка)., Но независимо от того, какое значение непрозрачности установлено. Вы даже можете точно настроить события указателя, чтобы включить или исключить события для visibility: hidden или fill: none.

Событие mouseover возникает каждый раз, когда расширяющийся круг, который вы анимировали, проходит под указателем. С помощью событий pointer-events:all, что вы можете предотвратить, когда мышь оказывается над внутренней частью, но только до тех пор, пока повтор анимации не сбрасывает радиус. Это довольно сильно сбивает с толку.

Самое простое решение - наложить невидимый прямоугольник с opacity="0" поверх всей иконки, чтобы были четко обозначены границы «внутри» и «снаружи». Для более точной настройки определите форму, которая покрывает область, в которой вы хотите фиксировать движения мыши.

svg { width: 100px; color: red; }
<svg id="loc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
<defs>
    <clipPath id="c">
        <path d="M49,19c0,7-12,26-18.97,26C23,45,12,26,12,19H49z M72-12h-84v84h84V-12z" />
    </clipPath>
</defs>
<g clip-path="url(#c)">
    <g transform="matrix(1, 0, 0, 0.43999, 0, 25.2)">
        <circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="14">
          <animate attributeType="XML" attributeName="r" from="0" to="20" begin="loc.mouseover" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
          <animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="loc.mouseover" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
      </circle>
        <circle transform="rotate(-90, 30, 47)" fill="none" stroke="currentColor" stroke-width="2" cx="30" cy="47" r="0">
          <animate ttributeType="XML" attributeName="r" from="0" to="20" begin="loc.mouseover+2s" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
          <animate attributeType="CSS" attributeName="opacity" from="1" to="0" begin="loc.mouseover+2" end="loc.mouseout" dur="3s" repeatCount="indefinite" />
      </circle>
    </g>
</g>

    <path fill="currentColor" stroke="currentColor" d="M30,7c7.18,0,13,5.82,13,13S30,45,30,45S17,27.18,17,20S22.82,7,30,7z" />
    <path fill="#fff" d="M30,15c2.76,0,5,2.24,5,5s-2.24,5-5,5c-2.76,0-5-2.24-5-5S27.24,15,30,15" />
    <rect opacity="0" width="100%" height="100%" />
</svg>

Свободный перевод ответа от участника @ccprog.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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