SVG>从中间开始设置动画宽度 [英] SVG > Animate width from middle

问题描述

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

I got a logo in SVG that I want to animate. There is a middle part that will remain fixed but the sides strokes will actually expands and get around the whole thing. There is and exemple of what i want to do actually:

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

动画的工作方式，但我无法使对象从其正确的中心开始扩展。例如，底线应从中间延伸，边线应从底部延伸，等等。

At the moment, the animation kind of work but I could not make my object expanding from their correct center. By exemple the bottom line should expand from its middle, the side lines should expand from the bottom etc.

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

Need help about that. Can someone lend a hand please?

推荐答案

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

Assuming you aren't wedded to using rectangles to form the sides of your shape, then it becomes a much easier problem if you change your shape to using a single path with stroke width equivalent to your rectangle thickness.

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

然后通过设置虚线的动画来实现动画。假设您的路径长度为100。我们要以0的长度破折号开始，然后以100的破折号结束。同时，我们将破折号偏移量（破折号的开始位置）从-50动画（移动破折号）

You can then implement your animation by animating the dash pattern of the line. Imagine your path length is 100. We want to start with a 0 length dash and then end with a dash of 100. At the same time, we animate the dash offset (where the dash pattern starts) from -50 (shifts the dash pattern to the centre of the line) to 0 (the start of the line).

对于我们的行，路径长度实际上是304.4。因此，最终的动画变为：

For our line, the path length is actually 304.4. So the final animation becomes:

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

也可以通过仅对虚线模式进行动画处理来达到相同的效果，但是如何工作需要更长的时间来解释：）

Aside: we could also achieve the same effect by just animating the dash pattern alone, but how this works takes longer to explain :)

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

这篇关于SVG>从中间开始设置动画宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！