svg文本淡入淡出

马黑黑

我们对svg的文本已经不陌生，我们已经知道，svg里的text标签内的文本，具有HTML文本的特性，可以选择、复制，我们还知道，通过 textPath 与svg的路径 path 绑定，文本还可以拥有别开生面的呈现方式。可我们目前还不知道，svg的文本还可以动。试看以下代码和运行效果：

<svg width="400" height="70">
    <text x="10" y="50" fill="red" font-family="Microsoft Yahei" font-size="40">
        天若有情天亦老
        <animate attributeName="x" attributeType="auto" from="700" to="-280" dur="5s" repeatCount="indefinite" />
    <text>
</svg>

animate就是svg动画之一，它有诸多属性，让我们一一来理解：

① attributeName : 要变化的 text 标签里的属性名称。例中值为 x，指的是 x="10" 中的 x，起笔处
② attributeType : 要变化的标签类型，auto 指自动识别。本属性可不要，多数浏览器不会识别不了
③ from : 从哪开始变化
④ to : 变化到什么地方
⑤ dur : 动画一次运行的时长
⑥ repeartcount : 重复次数。indefinite 为无尽模式重复

瞧，一切都在HTML代码里设定，无需CSS定义样式和动画（但svg部分支持CSS）。

例中的 animate 标签代码里，我们略作改动，就可以令文本朝相反方向运行：from 和 to 的值对换一下便可。而要上下运动，首先需要改变svg的高度以便构建运动空间，然后 attributeName 的值指定为 y 就OK了。

至于 from 和 to 的值如何设定，这是根据需要来，这里要提醒的是，它们的值应与svg的高宽配套。还需要提醒一下，svg不好定位，如果需要将其随意放置，可将其作为div盒子里的子元素，这样我们只需改变div盒子的位置。

马黑黑

CSS的translate也是可以的，这里仅以 translateX 为例：

代码：

<style>

.mvBox {

position: relative;

width: 120px;

height: 40px;

line-height: 40px;

font-size: 16px;

animation: mq linear 3s infinite;

}

@keyframes mq {

from { transform: translateX(200px); }

to { transform: translateX(0); }

}

</style>

<div class="mvBox">天若有情天亦老</div>

效果：

天若有情天亦老

大猫咪

老黑 有你真好，辛苦啦   走一个！

马黑黑

大猫咪 发表于 2022-3-17 23:21
老黑 有你真好，辛苦啦   走一个！

干杯

红影

马黑黑 发表于 2022-3-17 23:08
CSS的translate也是可以的，这里仅以 translateX 为例：
代码：&lt;style&gt;.mvBox {        position: relative;         ...

这个我记得也可以淡入淡出的，现在只是滚动，不是淡入淡出

红影

纯代码的滚动字，这个好，以后可以把原来的那些滚动字都替换掉了

红影

红影

这个svg的文本动画有点问题，要等挺长时间才开始动，不知道是什么原因。

红影

马黑黑 发表于 2022-3-17 23:08
CSS的translate也是可以的，这里仅以 translateX 为例：
代码：&lt;style&gt;.mvBox {        position: relative;         ...

还是css的比较好，直接就能动。

红影

找到了前面一个帖子
文字走马灯之淡进淡出
https://www.huachaowang.com/foru ... 56697&fromuid=2
(出处: 花潮论坛)

红影

学习黑黑代码

红影

CSS模拟marquee效果
https://www.huachaowang.com/foru ... 56619&fromuid=2
(出处: 花潮论坛)

把这个帖子也搬来这里，既然marquee标签已被废弃，以后要学会用css方式做滚动字。

马黑黑

红影 发表于 2022-3-18 11:05
CSS模拟marquee效果
https://www.huachaowang.com/forum.php?mod=viewthread&tid=56619&fromuid=2
(出处: ...

好的，已经添加

马黑黑

红影 发表于 2022-3-18 10:36
还是css的比较好，直接就能动。

都是CSS，那个是CSS动画，我没怎么调好吧

马黑黑

红影 发表于 2022-3-18 10:19
这个我记得也可以淡入淡出的，现在只是滚动，不是淡入淡出

淡入淡出就是滚动吧，自左向右或相反、自上向下或相反的那类

红影

马黑黑 发表于 2022-3-18 12:40
好的，已经添加

都是黑黑以前的帖子，影子一直记着呢

红影

马黑黑 发表于 2022-3-18 12:41
都是CSS，那个是CSS动画，我没怎么调好吧

不知道为什么svg的开始不动，要等一段时间才动呢。

红影

马黑黑 发表于 2022-3-18 12:42
淡入淡出就是滚动吧，自左向右或相反、自上向下或相反的那类

嗯嗯，不过，是从看不到滚动出来，再进入看不到。或者从透明度0变化到1？

马黑黑

红影 发表于 2022-3-18 14:45
嗯嗯，不过，是从看不到滚动出来，再进入看不到。或者从透明度0变化到1？

这些都可以弄的，我提供的是实现原理，细节自己去试试就OK了。

马黑黑

红影 发表于 2022-3-18 14:44
不知道为什么svg的开始不动，要等一段时间才动呢。

不会吧？一开始就动的，是不是时间、长度等设置不合理？