主页 / user-615747

Андрей Поморцев's questions

Martin Hope
Андрей Поморцев
Asked: 2024-08-17 03:19:58 +0000 UTC
  • 7

大家好！我不知道如何实现该任务，以便当 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>

css