SMIL анимация не заканчивается при мышлении - PullRequest
Новая
       13

SMIL анимация не заканчивается при мышлении

0 голосов
/ 04 мая 2018

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

Вы также можете увидеть его на https://codepen.io/anon/pen/LmjpVQ

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

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>

1 Ответ

0 голосов
/ 04 мая 2018

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

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

Самое простое решение - это положить невидимый прямоугольник с 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>
...