现实世界

马黑黑

代码：

<svg id="msvg" width="800" height="400">

<script type="module">

import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
var dr = draw.dr(msvg);

var stop = `
	<stop offset="0" stop-color="red" />
	<stop offset="1" stop-color="gold" />
	<animate attributeName="x2" values="0;1;0" dur="6s" repeatCount="indefinite" />
`;
var opt = { id: 'lGd', x1: 0, x2: 0, y1: 0, y2: 0};

dr.gradient('linearGradient', opt, stop);
dr.rect(20, 20, 220, 120, 'url(#lGd)'); //演示渐变状况
dr.text('现实世界',40,115,'url(#lGd)').style('font: bold 100px sans-seif; stroke: gray;');

</script>

红影

这层需要留么？刷新了一下，看看没有东西，你我就回复了。
这个文字渐变色好美，而且一半带背景一半不带。赶紧看看是怎样实现的

山里人

逐字同步又是大家的福音

红影

看数值，只有矩形里的字才有底纹的吧，超出的就没有了。字体100px，矩形x到220正好覆盖前两个字。
x2的变化决定了是横向颜色变化。

马黑黑

红影 发表于 2024-11-10 22:52
看数值，只有矩形里的字才有底纹的吧，超出的就没有了。字体100px，矩形x到220正好覆盖前两个字。
x2的变 ...

矩形和文本是各自独立的单元，矩形是用来观察整个渐变效果的

红影

去试了一下，去掉矩形，果然没有底色了。

马黑黑

红影 发表于 2024-11-10 23:01
去试了一下，去掉矩形，果然没有底色了。

如果需要文字加底色，矩形可以设置长一些，比文本长度略长一些。

红影

马黑黑 发表于 2024-11-10 23:00
矩形和文本是各自独立的单元，矩形是用来观察整个渐变效果的

原来是这样，有这样的参照挺好的，而且知道了可以这样让底色显示出来。

红影

马黑黑 发表于 2024-11-10 23:07
如果需要文字加底色，矩形可以设置长一些，比文本长度略长一些。

也可以设置椭圆圈覆盖文字吧，当然要算准位置，应该比矩形更容易算些。

马黑黑

红影 发表于 2024-11-10 23:21
原来是这样，有这样的参照挺好的，而且知道了可以这样让底色显示出来。

也可以这么设计文本：矩形+文本，或使用相同的渐变，或不同

马黑黑

红影 发表于 2024-11-10 23:22
也可以设置椭圆圈覆盖文字吧，当然要算准位置，应该比矩形更容易算些。

不行，文本会被遮挡或局部遮挡

梦江南

很漂亮的一种文字形式代码。学习了！

马黑黑

梦江南 发表于 2024-11-11 09:40
很漂亮的一种文字形式代码。学习了！

泡沫

矮油，这里有个这么漂亮的动态现实~~
一半在院里，一半在院外，还是同时淡变的。。。

马黑黑

泡沫 发表于 2024-11-11 19:45
矮油，这里有个这么漂亮的动态现实~~
一半在院里，一半在院外，还是同时淡变的。。。

红杏出墙

泡沫

values="0;1;0"有点印象这个是变化的速率，可以快出现慢跑之类的。。目前这个是匀速吧
repeatCount="indefinite"这个又不明白了。。没印象，新面孔

泡沫

马黑黑 发表于 2024-11-11 20:01
红杏出墙

天要下雨，红杏要出墙，这事儿王母娘娘都管不了。

泡沫

x1: 0, x2: 0, y1: 0, y2: 0这个本来是全覆盖的，
因为 attributeName="x2"给了个变动，所以横向渐变发生变化
如果想要竖着变，那就要把x2改成y2，就可以了。

马黑黑

泡沫 发表于 2024-11-11 20:24
x1: 0, x2: 0, y1: 0, y2: 0这个本来是全覆盖的，
因为 attributeName="x2"给了个变动，所以横向渐变发生 ...

理解正确

马黑黑

泡沫 发表于 2024-11-11 20:07
天要下雨，红杏要出墙，这事儿王母娘娘都管不了。

嗯呐，这是木有办法的