如何使用动画标签为 svg 路径 d 属性设置动画

Question

我正在尝试使用 animate 标签为 svg path 制作动画，遵循 css 技巧中的 this tutorial。我可以使用 css 关键帧为路径设置动画，结果是这样的：

#mySvg path{    
    animation: scale-path 10s ease-in-out infinite;
}

@keyframes scale-path {
    50% {
        d: path('M1036,540L883,540L883,693Z');
    }
}

<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1" 
     x="0"
     y="0"
     width="100%"
     height="100%" 
     viewBox="0 0 1920 1080" 
     preserveAspectRatio="none">
      
     <path d="M1045,520L1173,558L1184,393Z"   
              fill="lightblue" 
              stroke="#eee9ea" 
              stroke-width="1.51" />
</svg>

但问题是我无法用 animate 标签实现相同效果的动画（它应该会有很多 path 标签具有不同的动画）。我不确定这是否是正确的语法：

<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1" 
     x="0"
     y="0"
     width="100%"
     height="100%" 
     viewBox="0 0 1920 1080" 
     preserveAspectRatio="none">
      
    <path d="M1045,520L1173,558L1184,393Z" 
          fill="lightblue" 
          stroke="#eee9ea" 
          stroke-width="1.51">
          
            <animate 
            attributeName="d"
            from="M1045, 520L1173, 558L1184, 393Z"
            to="M1036; 540L883; 540L883; 693Z" 
            dur="10s"
            repeatCount="indefinite"
            values="M1036; 540L883; 540L883; 693Z"
            keyTimes="0.5;" />
     </path>
</svg>

Answer 1

你的值写错了，你要注意,和;。路径的整个值使用 , 作为分隔符（例如：M1045, 520L1173, 558L1184, 393Z）并且这些值在 values 属性

中由 ; 分隔

<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1" 
     x="0"
     y="0"
     width="100%"
     height="100%" 
     viewBox="0 0 1920 1080" 
     preserveAspectRatio="none">
      
    <path d="M1045,520L1173,558L1184,393Z" 
          fill="lightblue" 
          stroke="#eee9ea" 
          stroke-width="1.51">
          
            <animate 
            attributeName="d"
            from="M1045, 520L1173, 558L1184, 393Z"
            to="M1036, 540L883, 540L883, 693Z" 
            dur="5s"
            values="M1045, 520L1173, 558L1184, 393Z;M1036, 540L883, 540L883, 693Z;M1045, 520L1173, 558L1184, 393Z"
            repeatCount="indefinite" />
     </path>
</svg>

Answer 2

分号 (;) 在 values 和 keyTimes 等属性中用作分隔符，以标记不同的关键帧值。这两个属性中值的数量应该匹配。

您好像用分号代替了逗号，这是不正确的。

如果您在两个值 (A -> B) 之间设置动画，您只需要 from 和 to。如果您需要在一系列三个或更多值之间设置动画，则需要使用 values 和 keyTimes。

SMIL 动画中没有自动来回循环。因此，如果您尝试从 A 到 B，然后返回到 A，则需要使用 values 和 keyTimes 并以 "A; B; A"` 的形式列出您的值。

像这样：

<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     version="1.1" 
     x="0"
     y="0"
     width="100%"
     height="100%" 
     viewBox="0 0 1920 1080" 
     preserveAspectRatio="none">
      
    <path d="M 1045,520 L 1173,558 L 1184,393 Z" 
          fill="lightblue" 
          stroke="#eee9ea" 
          stroke-width="1.51">
          
            <animate 
            attributeName="d"
            dur="10s"
            repeatCount="indefinite"
            values="M 1045,520 L 1173,558 L 1184,393 Z;
                    M 1036,540 L 883,540 L 883,693 Z;
                    M 1045,520 L 1173,558 L 1184,393 Z"
            keyTimes="0; 0.5; 1" />
     </path>
</svg>

如果您的动画是线性节奏的，并且 keyTimes 时间间隔均匀，就像它们在这里一样，您实际上不必提供 keyTimes.

如何使用动画标签为 svg 路径 d 属性设置动画

How to animate svg path d attribute with animate tag

css

svg

css-animations

svg-animate