在 SVG 中同时移动带有折线点的圆

Question

我希望在多段线动画时使圆圈沿着多段线的点移动。

这是我目前的进度： https://jsfiddle.net/xgr6q4cy/

这是我的代码：

<svg id="svg" viewBox="0 0 415 415" xmlns="http://www.w3.org/2000/svg">
   <polyline 
            id="poly1"
            fill="blue" 
            stroke="red" 
            stroke-linecap="round"
            points="97,122 34,85 90,35 198,40 34,85"
            >
            <animate 
                id="one"
                attributeName="points"
                dur="5s" 
                begin="0s;two.end"
            to="97,82 34,85 90,55 198,40 34,85"
            fill="freeze"
            />
            <animate 
                id="two"
                attributeName="points" 
                dur="5s" 
                begin="one.end"
            to="97,122 34,85 90,35 198,40 34,85"
            fill="freeze"
            />


        </polyline>

        <circle cx="34" cy="85" r="3" fill="red"></circle>
        <circle cx="90" cy="35" r="3" fill="red"></circle>
        
        <circle cx="198" cy="40" r="3" fill="red"></circle>
        <circle cx="97" cy="122" r="3" fill="red"></circle>
</svg>

我的进度截图：

我想确保在使用 SVG SMIL 制作多段线动画时圆圈跟随多段线

如有任何帮助，我们将不胜感激！

Answer 1

为了制作圆圈的动画，您需要使用与折线动画相同的 begin 和 dur 值来制作 cy 属性的动画。

请注意，对于动画，我使用的是 values 属性，而不是 to 和 from 属性。这些值用分号 (;) 分隔。第一个和最后一个值相同。

<svg id="svg" viewBox="0 0 415 415" xmlns="http://www.w3.org/2000/svg">
  <polyline id="poly1" fill="blue" stroke="red" stroke-linecap="round" points="97,122 34,85 90,35 198,40 34,85">
    <animate attributeName="points" 
             dur="5s" 
             begin="0s" 
             repeatCount="indefinite" 
             values="97,82 34,85 90,55 198,40 34,85;
                     97,122 34,85 90,35 198,40 34,85;
                     97,82 34,85 90,55 198,40 34,85" />
  </polyline>

  <circle cx="34" cy="85" r="3" fill="red"></circle>
  <circle cx="198" cy="40" r="3" fill="red"></circle>
  <circle cx="90" cy="35" r="3" fill="red">
    <animate attributeName="cy" 
             dur="5s" 
             begin="0s" 
             repeatCount="indefinite" 
             values="55;35;55" />
  </circle>
  <circle cx="97" cy="122" r="3" fill="red">
    <animate attributeName="cy" 
             dur="5s" 
             begin="0s" 
             repeatCount="indefinite" 
             values="82;122;82" />
  </circle>
</svg>

Answer 2

您可以定义一个marker，在折线点处绘制的图形（无论它们如何移动）。

<svg id="svg" viewBox="0 0 415 415" xmlns="http://www.w3.org/2000/svg">

    <!--define a marker - the red circle-->
    <marker id="circle" refX="3" refY="3" markerWidth="6" markerHeight="6" viewport="0 0 6 6">
        <circle cx="3" cy="3" r="3" fill="red"></circle>
    </marker>

    <!--here the marker-* attributes put the circle marker to every point-->
    <!--marker-end isn't actually needed in your case-->
    <!--because the end-point is the same as the second one-->
    <polyline 
        marker-start="url(#circle)"
        marker-mid="url(#circle)"
        marker-end="url(#circle)"
        
        id="poly1"
        fill="blue" 
        stroke="red" 
        stroke-linecap="round"
        points="97,122 34,85 90,35 198,40 34,85"
        >
        <animate 
            id="one"
            attributeName="points"
            dur="5s" 
            begin="0s;two.end"
        to="97,82 34,85 90,55 198,40 34,85"
        fill="freeze"
        />
        <animate 
            id="two"
            attributeName="points" 
            dur="5s" 
            begin="one.end"
        to="97,122 34,85 90,35 198,40 34,85"
        fill="freeze"
        />

    <!--no more circles are needed-->

    </polyline>


</svg>

在 SVG 中同时移动带有折线点的圆

Moving Circles with Polyline's points concurrently in SVG

svg

svg-animate

jquery-svg