Не работает анимация круга с помощью stroke-dashoffset?

Question

Почему не работает анимация маски с помощью stroke-dashoffset?

<svg id='h' version="1.1" xmlns="http://www.w3.org/2000/svg">
<mask id='mask'>
<circle r="30" cx="50" cy="50" stroke='black' fill="black" stroke-width='50' stroke-dashoffset='20 20'>
<animate
attributeName='stroke-dashoffset'
begin='h.click'
dur='10s'
repeatCount='indefinite'
values='50'
/>
</circle>
<rect width="100%" height="100%" fill="green" />
</mask>
<circle r="30" cx="50" cy="50" fill="orange" />

<rect width="100" height="100" fill='tomato' mask='url(#mask)' />
</svg>

Answer 1

В svg, хорошо бы, всегда добавлять viewBox, если не укажите width и height, то изображение займёт весь экран браузера. Если нужна адаптивность, указывайте ширину и высоту в относительных единицах.

<svg id='h' version="1.1" xmlns="http://www.w3.org/2000/svg" 
  width="35vw" height="35vh" viewBox="0 0 100 100">

Для анимации рисования бордюра окружности с помощью stroke-dashoffset необходимо знать полную длину окружности.

При радиусе r="30" она равна 2 * 30 * 3.14 = 188.4
Также необходимо указать stroke-dasharray ="188.4" равное stroke-dashoffset

Ниже анимация вашего примера без маски, чтобы лучше понять принцип.
stroke-dashoffset изменяется от максимума (188.4) до нуля, обеспечивая тем самым рисование бордюра от нуля до полного круга.

Анимация после клика

<svg id='h' version="1.1" xmlns="http://www.w3.org/2000/svg" width="35vw" height="35vh" viewBox="0 0 100 100">

<rect width="100%" height="100%" fill="green" />
<circle id="crc1" r="30" cx="50" cy="50" stroke='black' fill="none" stroke-width='40' stroke-dasharray="188.4" stroke-dashoffset='188.4'>
  <animate
attributeName='stroke-dashoffset'
begin='h.click'
dur='5s'
repeatCount='indefinite'
values='188.4;0'
/> 
</circle>

Теперь добавляем маску с анимацией окружности из вашего примера

<mask id='mask'>
<rect width="100%" height="100%" fill="green" />
<circle r="30" cx="50" cy="50" stroke='black' fill="black"

Окраска элемента маски в чёрный цвет заставляет её вырезать отверстие

Смотрите комментарии в коде для облегчения понимания основных моментов

<svg id='h' version="1.1" xmlns="http://www.w3.org/2000/svg" width="25vw" height="25vh" viewBox="0 0 100 100">
<mask id='mask'>
<!-- Заполнение в маске цветом (зелёным) это цвет между черным и белым, делает изображение полупрозрачным -->
<rect width="100%" height="100%" fill="green" />

<!-- Заполнение чёрным цветом вырезает отверстие -->
<circle id="crc1" r="30" cx="50" cy="50" stroke='black' fill="black" stroke-width='40' stroke-dasharray="188.4" stroke-dashoffset='188.4'>
  <animate
attributeName='stroke-dashoffset'
begin='h.click'
dur='5s'
repeatCount='indefinite'
values='188.4;0'
/> 
</circle>
</mask>
 <circle r="30" cx="50" cy="50" fill="orange" />  

  <!-- Маска вырезает из прямоугольника широкую строку --> 
  <!-- pointer-events="none" для того, чтобы клик проходил сквозь прямоугольник -->
  <!-- до circle с id="crc1" для запуска анимации маски -->
 <rect width="100" height="100" fill='tomato' mask='url(#mask)' pointer-events="none" />  
</svg>

БЛОГ НА HUSL

Не работает анимация круга с помощью stroke-dashoffset?

Ответы (1 шт):