如何使用动画标签为 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。