gpt4 book ai didi

javascript - 如何使 SVG 中的字母可以单独设置动画?

转载 作者:行者123 更新时间:2023-11-30 09:54:08 24 4
gpt4 key购买 nike

我有一个需要动画的 Logo ,大部分 Logo 由形状组成,当然我可以在 illustrator 中绘制这些形状,但在 Logo 的底部有以下文本:

logo text

在图形文本编辑器中,如果我继续输入这些字母,我会得到如下内容:

<text id="XMLID_1_" transform="matrix(1 0 0 1 417 293)" class="st0 st1">FairBridge</text>

那不是我真正想要的,我真的希望每个字母都可以动画化,那么我是否也必须绘制字母?那将是一项艰巨的任务!我究竟如何才能使每个字母具有动画效果并同时成为 SVG 的一部分?

附言:我知道这个问题在某种程度上与图形设计有关,但由于它需要非常初级的理解,而且最终我希望 Logo 与 CSS-3 动画一起使用,所以我认为在 SO 上提问是合适的而不是平面设计论坛。

最佳答案

您可以使用 SMIL 或 javascript 为 dy 属性设置动画。这是一个没有其他结构变化的单个字母的动画。

<svg>
<text x="30" y="30">FairBridge
<animate attributeName="dy" from="0 0 0" to="0 -20 20" dur="1s" repeatCount="indefinite"/>
</text>
</svg>

关于javascript - 如何使 SVG 中的字母可以单独设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34869139/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com