主页 / 问题 / 1590988
Accepted
Андрей Поморцев
Asked:2024-08-17 03:19:58 +0000 UTC2024-08-17 03:19:58 +0000 UTC

动画描边-dashoffset从0到100

  • 772

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

1 个回答

  1. Best Answer

    正确的效果是通过替换颜色（顶部灰色，底部蓝色）以及水平反射灰色图形来实现的，因此值从 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>

    • 1

相关问题