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(移动短划线图案)设置动画到线的中心)到 0(线的起点).

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