在SVG中同时使用Polyline点移动圆

编程问答 2022-08-15

问题描述

@H_404_0@我希望在多义线动画时使圆沿多义线的点移动。

@H_404_0@这是我到目前为止的进展： https://jsfiddle.net/xgr6q4cy/

@H_404_0@这是我的代码：

<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,55 198,85"
            fill="freeze"
            />
            <animate 
                id="two"
                attributeName="points" 
                dur="5s" 
                begin="one.end"
            to="97,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>
@H_404_0@我的进度的屏幕截图：

@H_404_0@

enter image description here

enter image description here

@H_404_0@我想确保在使用SVG SMIL进行动画制作时，圆线遵循多段线

@H_404_0@任何帮助将不胜感激！

解决方法

要设置圆形动画，您需要使用与折线的动画相同的cy和begin值来设置dur属性的动画。

请注意，对于动画，我使用的是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,55 198,85;
                     97,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>

,

您可以定义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,85"
        >
        <animate 
            id="one"
            attributeName="points"
            dur="5s" 
            begin="0s;two.end"
        to="97,85"
        fill="freeze"
        />
        <animate 
            id="two"
            attributeName="points" 
            dur="5s" 
            begin="one.end"
        to="97,85"
        fill="freeze"
        />

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

    </polyline>


</svg>

svgsvg-animate