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的小arcLarge-arc-flag = 0

上的小圆弧的位置下面的例子是由红色虚线表示。

在小的和大的圆弧的开始和结束的坐标一致，只有标志的值从“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>