SVG - 弧形动画跳跃步骤

Question

我正在尝试为路径制作 svg 动画。开始结果和最终结果都很好，但由于某些原因没有中间位置(动画只是在持续时间后从开始跳到结束。

这是我正在使用的代码:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:10px;}</style></defs><title>percentage-green</title>
	<path 
		id="p1"
		class="cls-1"
        	d="
	        	M 20 40 A 20 20 0 1 0 40 20
	        "
	/>
	<animate xlink:href="#p1"
    		attributeName="d"
    		attributeType="XML"
		    from="M 20 40 A 20 20 0 1 0 40 20"
	        to="M 50 57.32050807568877 A 20 20 0 0 0 40 20"
		    dur="10s"
	/>
    </svg>

Answer 1

如果我理解正确的话，尽管有困难，你还是想做一个弧形动画。

圆弧公式

<path d="M mx,my A rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y" />    

Large-arc-flag 和 sweep-flag 是整数常量，它们仅采用“0”或“1”两个值，并且不适用于流畅的动画。

您可以制作从Large-arc-flag = 1时的大弧到小弧Large-arc-flag = 0的离散过渡动画

>

在下面的示例中，小圆弧的位置由红色虚线表示。

小圆弧和大圆弧的起点和终点坐标重合，只有标志`Large-arc-flag的值从“1”到“0”

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}
</style>
</defs>
<title>percentage-green</title>
<g transform="scale(2)">
<path id="p1"
    class="cls-1"
        d="M 20 40 A 20 20 0 1 0 40 20"> 
<animate 
        attributeName="d"
        attributeType="XML"
		repeatCount="5"
         begin="Layer_1.mouseover"      
	   from="M 20 40 A 20 20 0 1 0 40 20"
        to="M 20 40 A 20 20 0 0 0 40 20"
        dur="2s" >
		</animate>
</path> 
 <circle cx="40" cy="20" r="3" stroke="dodgerblue" fill="none" />
 <path  d="M 20 40 A 20 20 0 0 0 40 20" stroke-dasharray="3" stroke="red" fill="none" /> 
 </g>
</svg>  

将光标悬停时动画开始

第二个例子

和你的类似 - 补丁的参数“d”会平滑变化，恒定值为large-arc-flag = 1(大弧)

当鼠标悬停时动画开始

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}
</style>
</defs>
<title>percentage-green</title>
<g transform="scale(2)">
<path id="p1"
    class="cls-1"
        d="M 20 40 A 20 20 0 1 0 40 20"> 
<animate xlink:href="#p1"
        attributeName="d"
        attributeType="XML"
		repeatCount="5"
      values="M 20 40 A 20 20 0 1 0 40 20;M 50 57 A 20 20 0 1 0 40 20;M 20 40 A 20 20 0 1 0 40 20"      
	   begin="Layer_1.mouseover" 
        dur="3s"
    restart="whenNotActive"		>
		</animate>
</path> 
 <circle cx="40" cy="20" r="4" stroke="dodgerblue" fill="none" />
 <path  d="M 50 57 A 20 20 0 1 0 40 20" stroke-dasharray="3" stroke="red" fill="none" /> 
 </g>
</svg>