Question

我试图为路径制作svg动画。起始结果和最终结果都很好，但由于某些原因，没有中间位置（动画只是在持续时间之后从头到尾跳跃。

这是我使用的代码：

＆＃13;

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

＆＃13;

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是整数常量，只取两个值＆＃34; 0＆＃34;或＆＃34; 1＆＃34;而且不适合流畅的动画。

您可以在Large-arc-flag = 1到小弧Large-arc-flag = 0

时从大弧形制作离散过渡动画

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

小弧和大弧的起点和终点的坐标重合，只有标号“大弧标志”的值与＃34; 1＆＃34;到＆＃34; 0＆＃34;

＆＃13;

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

＆＃13;

当您将光标悬停

时动画开始

第二个例子

与您的相似 - 参数＆＃34; d＆＃34;补丁的平滑变化，large-arc-flag = 1（大弧）

的常数值

当您将光标悬停时，动画开始

＆＃13;

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

＆＃13;

SVG - 弧形动画跳跃步骤

1 个答案: