3

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)'  stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate 
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='0,314;314,0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg> 

2 ответа 2

3

Вы пытаетесь анимировать stroke-dashoffset он задается одним числом, а в атрибут values поставили пары значений, видимо скопировали с атрибута stroke-dasharray

сделайте так:

values='314;0'

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)'  stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate 
  attributeName='stroke-dashoffset'
  dur='4s'
  begin='svg1.click'
  values='314;0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

2
  1. В ответе @Stranger in the Q для анимации использован атрибут stroke-dashoffset
    при значениях values="314;0", что соответствует изменению отступа начала линии от максимального значения (314) до нуля. Реализуя тем самым анимацию рисование линии от нуля до максимума (полный круг)

  2. При анимации stroke-dasharray используется также два значения values="0, 314;314, 0
    стартовое значение анимации - 0, 314, где 0 - длина черты, 314 - длина пробела поэтому линию в начале не видно.
    финальное значение анимации - 314, 0, где 314 длина черты. поэтому линия будет нарисована полностью

Поэтому ваш код был изначально верный, но допущена одна ошибка: вместо stroke-dashoffset нужно было написать stroke-dasharray

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)'  stroke-dashoffset='314' stroke-dasharray='314' stroke='dodgerblue' stroke-width='8'>
  <animate 
 attributeName='stroke-dasharray'
  dur='4s'
  begin='svg1.click'
  values='0,314;314,0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg> 

На мой взгляд анимация с помощью stroke-dasharray содержит больше возможностей.

Например, использовав две пары параметров stroke-dasharray, можно сделать ту же анимацию заполнения круга двумя отдельными линиями из одной точки

values="0, 157 0, 157; 0, 0, 314, 0"

stroke-dashoffset="0"

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)'  stroke-dashoffset='0' stroke-dasharray='0, 157 0, 157' stroke='dodgerblue' stroke-width='8'>
  <animate 
 attributeName='stroke-dasharray'
  dur='4s'
  begin='svg1.click'
  values='0, 157 0, 157; 0, 0, 314, 0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

Другой вариант
при stroke-dashoffset="157"
Стартовая точка анимации сдвигается на половину окружности

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)' stroke-dasharray="0, 157 0, 157"  stroke-dashoffset="157"  stroke='dodgerblue' stroke-width='8'>
  <animate 
 attributeName='stroke-dasharray'
  dur='4s'
  begin='svg1.click'
  values='0, 157 0, 157; 0, 0, 314, 0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

Изменяя stroke-dashoffset можно начать анимацию из любой точки окружности

Например при stroke-dashoffset="78.5" стартовая точка сдвигается на четверть окружности 314 / 4 = 78.5

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   
     width="200" height="200" viewBox="0 0 120 120" >  
      Фон серого цвета
 <rect width='100%' height='100%' fill='grey'/>
 <circle r='50' cx='60' cy='60' fill='none' stroke='white' stroke-width='8' transform='rotate(-90 60 60)' />
 <circle r='50' cx='60' cy='60' fill='none' transform='rotate(-90 60 60)' stroke-dasharray="0, 157 0, 157"  stroke-dashoffset="78.5"  stroke='dodgerblue' stroke-width='8'>
  <animate 
 attributeName='stroke-dasharray'
  dur='4s'
  begin='svg1.click'
  values='0, 157 0, 157; 0, 0, 314, 0'
  fill='freeze'
  />
 </circle>
<text x="50%" y="50%" text-anchor='middle' font-size='20' fill="">click</text> 
</svg>

4
  • values="0, 157 0, 157; 0, 0, 314, 0" где 0 длина черты, 157 - длина пробела 0 длина черты, 157 - длина пробела; 0 длина черты 0 длина пробела 314- длина черты 0 длина пробела ?
    – Leks
    15 авг 2020 в 8:38
  • Почему последних в двух примерах начало анимации происходит в разных местах ?
    – Leks
    15 авг 2020 в 8:46
  • @Leks Анимация начинается в разных местах, так как примеры имеют разные значения stroke-dashoffset Добавил пример и описание в ответ В первом вашем комментарии написано все правильно 15 авг 2020 в 9:36
  • понятно спасибо большое
    – Leks
    15 авг 2020 в 10:59

Ваш ответ

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

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