Question

我在SVG中有一个我想要制作动画的徽标。有一个中间部分将保持固定，但侧面笔划实际上会扩展并绕过整个事物。实际上我想做的事情就是例证：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<style type="text/css">
		.st0{fill:#656E76;}
	</style>
	<g>
		<rect id="rect1" class="st0" cx="50" cy="50" x="0" y="40.5" width="158.9" height="6.3"/>
		<rect id="rect2" class="st0" cx="0" cy="100" x="0" y="6.4" width="6.3" height="34.4"/>
		<rect id="rect3" class="st0" cx="0" cy="100" x="152.6" y="6.4" width="6.3" height="34.4"/>
		<rect id="rect4" class="st0" cx="0" cy="0" x="0" y="0.2" width="38.8" height="6.3"/>
		<rect id="rect5" class="st0" cx="100" cy="0" x="120.2" y="0.2" width="38.8" height="6.3"/>
		
		<animate xlink:href="#rect1" attributeName="width" from="0" to="158.9" begin="0s" dur="0.4s" />
		<animate xlink:href="#rect2" attributeName="height" from="0" to="34.4"  begin="0.4s" dur="0.25s" />
		<animate xlink:href="#rect3" attributeName="height" from="0" to="34.4" begin="0.4s" dur="0.25s" />
		<animate xlink:href="#rect4" attributeName="width" from="0" to="38.5" begin="0.65s" dur="0.25s" />
		<animate xlink:href="#rect5" attributeName="width" from="0" to="38.5" begin="0.65s" dur="0.25s" />
	</g>
</svg>

目前，动画类型的工作，但我无法使我的对象从正确的中心扩展。例如，底线应从中间扩展，侧线应从底部等扩展。

需要帮助。有人可以帮忙吗？

Answer 1

假设您不习惯使用矩形来形成形状的边，那么如果将形状更改为使用行程宽度等于矩形厚度的单个路径，则会变得更加容易。

＆＃13;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g>
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76"
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" />
	</g>
</svg>

＆＃13;

然后，您可以通过为线条的虚线模式设置动画来实现动画。假设您的路径长度为100.我们希望以0长度破折号开始，然后以短划线100结束。同时，我们从-50设置破折号偏移（破折号模式开始处）的动画（移动破折号模式）到线的中心）到0（线的起点）。

对于我们的线路，路径长度实际为304.4。所以最终的动画变成了：

＆＃13;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g>
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76"
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" />
		<animate xlink:href="#shape" attributeName="stroke-dasharray" from="0 304.4" to="304.4 0" begin="0s" dur="0.4s" />
		<animate xlink:href="#shape" attributeName="stroke-dashoffset" from="-152.2" to="0" begin="0s" dur="0.4s" />
	</g>
</svg>

＆＃13;

除此之外：我们也可以通过仅仅设置破折号模式来实现相同的效果，但是这样做的工作时间需要更长的时间来解释：）

＆＃13;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<g>
        <path id="shape" fill="none" stroke-width="6.3" stroke="#656E76"
              d="M 38.8 3.35 H 3.15 V 43.65 H 155.75 V 3.35 H 120.2" />
	<animate xlink:href="#shape" attributeName="stroke-dasharray" from="0 152.2 0 152.2" to="0 0 304.4 0" begin="0s" dur="0.4s" />
	</g>
</svg>

＆＃13;

SVG＆gt;从中间动画宽度

1 个答案: