css - 动画 SVG 渐变边框

Question

我正在尝试制作一个形状不规则的加载动画。顶部形状是矢量对象，底部是动画的单帧。我想要无限循环中的动画渐变。这可能吗？

这是形状的 SVG 代码

<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
  <path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>

Answer 1

给你!

path {
  stroke-dasharray: 30 139;
  stroke-dashoffset: 0;
  animation: spin 1s linear infinite;
  stroke-width: 3;
}

@keyframes spin {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -169;
  }
}

<!-- Simple stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>

<!-- Simple gradient stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
  <!-- Simple gradient. Notice to x1, x2, y1, y2. 
  These values decide the direction of gradient. Gradient go from (x1,y1) to (x2,y2) -->
  <linearGradient id="Gradient1"  x1="0" x2="1" y1="0" y2="1">
     <stop offset="0%" stop-color="red"/>
     <stop offset="100%" stop-color="blue"/>
  </linearGradient>
</defs>

  <path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient1)" stroke-width="2" fill="none"/>
</svg>

<!-- Gradient stroke that animate along with the animation. -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
  <linearGradient id="Gradient2"  x1="0" x2="1" y1="0" y2="1">
  <!-- Change the value of x1,x2,y1,y2 during animation to change the direction of gradient.
  Expected result: (x1,y1): (0,0) -> (1,0) -> (1,1) -> (0,1) -> (0,0)
  (x2,y2): (1,1) -> (0,1) -> (0,0) -> (0,1) -> (1,1) -->
    <animate attributeType="XML" attributeName="x1"
      values="0; 1; 1; 0; 0"
      keyTimes="0; 0.25; 0.5; 0.75; 1"
        dur="1s" repeatCount="indefinite"/>
    <animate attributeType="XML" attributeName="y1"
      values="0; 0; 1; 1; 0"
      keyTimes="0; 0.25; 0.5; 0.75; 1"
        dur="1s" repeatCount="indefinite"/>
     <animate attributeType="XML" attributeName="x2"
      values="1; 0; 0; 1; 1"
      keyTimes="0; 0.25; 0.5; 0.75; 1"
        dur="1s" repeatCount="indefinite"/>
     <animate attributeType="XML" attributeName="y2"
      values="1; 1; 0; 0; 1"
      keyTimes="0; 0.25; 0.5; 0.75; 1"
        dur="1s" repeatCount="indefinite"/>
     <stop offset="0%" stop-color="red"/>
     <stop offset="100%" stop-color="blue"/>
  </linearGradient>
</defs>

  <path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient2)" stroke-width="2" fill="none"/>
</svg>

说明:该动画的关键是播放stroke-dasharray和stroke-dashoffset。

stroke-dasharray: 30 139;。 30 是制作动画显示和移动的路径长度。您可以将其更改为任何您想要的。 169 是路径的总长度，因此 139 是 169 - 30 的结果。

然后你将 stroke-dashoffset 从 0 设置为 -169 动画，你的动画就全部设置好了