马黑黑 发表于 2024-11-10 22:00

现实世界

本帖最后由 马黑黑 于 2024-11-10 22:05 编辑 <br /><br /><svg id="msvg" width="740" height="200"></svg>
<p>代码：</p>
<div id="hEdiv"><pre id="hEpre">
&lt;svg id="msvg" width="800" height="400"&gt;

&lt;script type="module"&gt;

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

var stop = `
        &lt;stop offset="0" stop-color="red" /&gt;
        &lt;stop offset="1" stop-color="gold" /&gt;
        &lt;animate attributeName="x2" values="0;1;0" dur="6s" repeatCount="indefinite" /&gt;
`;
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;');

&lt;/script&gt;
</pre></div>

<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
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;');

hl.hl(hEdiv, hEpre);
</script>

红影 发表于 2024-11-10 22:35

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

山里人 发表于 2024-11-10 22:51

逐字同步又是大家的福音

红影 发表于 2024-11-10 22:52

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

马黑黑 发表于 2024-11-10 23:00

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

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

红影 发表于 2024-11-10 23:01

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

马黑黑 发表于 2024-11-10 23:07

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

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

红影 发表于 2024-11-10 23:21

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

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

红影 发表于 2024-11-10 23:22

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

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

马黑黑 发表于 2024-11-10 23:23

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

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

马黑黑 发表于 2024-11-10 23:23

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

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

梦江南 发表于 2024-11-11 09:40

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

马黑黑 发表于 2024-11-11 12:50

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

{:4_190:}

泡沫 发表于 2024-11-11 19:45

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

马黑黑 发表于 2024-11-11 20:01

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

红杏出墙{:4_170:}

泡沫 发表于 2024-11-11 20:06

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

泡沫 发表于 2024-11-11 20:07

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

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

泡沫 发表于 2024-11-11 20:24

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

马黑黑 发表于 2024-11-11 20:45

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

理解正确

马黑黑 发表于 2024-11-11 20:49

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

嗯呐，这是木有办法的
页: [1] 2 3
查看完整版本: 现实世界