Question

我正在尝试根据CSS技巧this tutorial为svg标签制作path animate的动画。我可以使用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

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

您似乎已经用分号替换了逗号，这是不正确的。

如果要在两个值（A-> B）之间设置动画，则只需要from和to。如果需要在三个或三个以上的值之间进行动画处理，则需要使用values和keyTimes。

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

赞：

<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。

Answer 2

您错误地编写了值，应注意,和;。路径的整个值使用,作为分隔符（例如：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>

如何使用animate标签为svg path d属性设置动画

2 个答案: