【问题标题】：SVG > Animate width from middleSVG > 从中间动画宽度
【发布时间】：2016-10-03 23:52:40
【问题描述】：
我有一个 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>
目前，动画效果不错，但我无法让我的对象从正确的中心扩展。例如底线应该从中间扩大，边线应该从底部扩大等。
需要这方面的帮助。有人可以帮忙吗？
【问题讨论】：
标签：
html
css
animation
svg
web
【解决方案1】：
假设您不喜欢使用矩形来形成形状的侧面，那么如果您将形状更改为使用笔触宽度与矩形厚度相等的单一路径，那么问题就变得容易多了。
<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（行的开头）。
对于我们的线路，路径长度实际上是 304.4。所以最终的动画就变成了：
<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>
除此之外：我们也可以通过单独为破折号模式设置动画来实现相同的效果，但它的工作原理需要更长的时间来解释:)
<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>