代码之家 › 专栏 › 技术社区 › SilverSurfer

如何使用animate标记设置SVG路径d属性的动画

path svg animation css3 css

SilverSurfer · 技术社区 · 6 年前

我正在尝试动画 svg path 具有 animate 标签,后面 this tutorial 从CSS技巧。我可以用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>

但问题是我不能用 使有生气 标签(应该会有很多 路径 带有不同动画的标签)。我不确定这是否是正确的语法:

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

2 回复 | 直到 6 年前

Temani Afif 6 年前

你写的价值观不对,你应该注意 , 和 ; . 路径使用的整个值 , 作为分隔符(例如: 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>

Paul LeBeau 6 年前

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

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

如果要在两个值(A->B)之间设置动画,则只需要 from 和 to . 如果需要在三个或更多值的序列之间设置动画,则需要使用 价值观 和 关键时刻 .

SMIL动画中没有自动来回循环。所以如果你想从A到B再回到A,你需要使用 价值观 和 关键时刻 并以“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>

如果动画是线性调整的,并且 关键时刻 时间间隔是均匀的,就像这里一样,实际上您不需要提供 关键时刻 .