我在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>
目前,动画类的工作,但我无法使我的对象从正确的中心扩展 . 例如,底线应从中间扩展,侧线应从底部扩展等 .
需要帮助 . 有人可以伸出援助之手吗?
1 回答
假设您没有使用矩形来形成形状的边,那么如果将形状更改为使用行程宽度等于矩形厚度的单个路径,则会变得更加容易 .
然后,您可以通过为线条的虚线模式设置动画来实现动画 . 假设您的路径长度为100.我们希望以0长度破折号开始,然后以短划线100结束 . 同时,我们从-50设置破折号偏移(破折号模式开始处)的动画(移动破折号模式)到行的中心)到0(行的开头) .
对于我们的线路,路径长度实际上是304.4 . 所以最终的动画变成了:
除此之外:我们也可以通过仅仅设置破折号模式来实现相同的效果,但是如何工作需要更长的时间来解释:)