Анимация stroke-dashoffset от 0 до 100

Question

Всем привет! Не могу понять как реализовать задачу чтобы при stroke-dashoffset = "0" заполнение бара было равно 0%, а при stroke-dashoffset = "100" соответственно 100%. Сейчас все работает в точности до наоборот. Использование JS недопустимо.

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="36" height="36" viewBox="0 0 36 36">  

      <!-- Путь заполнения линии прогрессбара     -->
    <circle cx="18" cy="18" r="15.915" fill="none" stroke="#E1E1E1" stroke-width="3"/>  
    <g id="root_1">
        <circle cx="18" cy="18" r="15.915" transform="rotate(-90 18 18)" fill="none"  stroke-dasharray="100" stroke="dodgerblue" stroke-dashoffset="0" stroke-width="3" class="dashed-circle"/>
    </g> 
        
      <!--Анимация  изменение отступа линии stroke-dashoffset от 100 до 0 -->
     
      <style type="text/css"> 
        <![CDATA[ 
        .dashed-circle{
        transition: stroke-dashoffset 2s ease-out;
        } 
        ]]>
    </style> 
     
</svg>

Answer 1

Правильный эффект достигается заменой цветов (сверху серый, снизу синий) а так же отражением фигуры серого цвета по горизонтали таким образом значения идут от 0 до 100 и по часовой стрелке.

Для анимации лучше использовать тег animate который для этого и предназначен.

<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
  <defs></defs>
  <circle cx="18" cy="18" stroke-width="3" style="stroke: rgb(30, 144, 255); stroke-dasharray: 324, 0; stroke-dashoffset: 10px;" r="15.915" fill="none"></circle>
  <circle cx="-26.288" cy="48.499" r="15.915" fill="none" stroke-width="3" style="stroke-dasharray: 100; transform-origin: -26.288px 48.499px;" stroke="#E1E1E1" transform="matrix(0, -1, -1, 0, 44.287994, -30.499001)">
    <animate attributeName="stroke-dashoffset" values="0px;100px" begin="0.01s" dur="2s" fill="freeze" keyTimes="0; 1"></animate>
  </circle>
</svg>

БЛОГ НА HUSL

Анимация stroke-dashoffset от 0 до 100

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