svg drawer 弄个渐变字
<svg id="msvg" width="600" height="400" style="border: 1px solid gray"></svg><script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=102';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr(msvg);
dr.defs('defs');
var stop = `
<stop offset="0" stop-color="orange"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="1" stop-color="tomato"/>
`;
dr.gradient('linearGradient', {id: 'grd', x1: 1, x2: 0, y1: 0, y2: 1}, stop);
dr.text('SVG DRAWER', 80, 100, 'url(#grd)').style('font: bold 60px sans-serif');
dr.circle(300,240,100,'url(#grd)');
};
</script>
代码：
<svg id="msvg" width="600" height="400" style="border: 1px solid gray"></svg>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=102';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr(msvg);
dr.defs('defs');
var stop = `
<stop offset="0" stop-color="orange"/>
<stop offset="0.5" stop-color="green"/>
<stop offset="1" stop-color="tomato"/>
`;
dr.gradient('linearGradient', {id: 'grd', x1: 1, x2: 0, y1: 0, y2: 1}, stop);
dr.text('SVG DRAWER', 80, 100, 'url(#grd)').style('font: bold 60px sans-serif');
dr.circle(300,240,100,'url(#grd)');
};
</script>
代码解释：
08行：指定画笔，注意 svg id 用不用引号都可以，关键是 id="啥啥啥" 的时候啥啥啥和括号里的对得上；
09行：创建 defs 标签，括号里的参数是 id，需要引号；
10 - 14行：声明一个 字符串变量，里面的内容是 svg 渐变标签的内部XML代，其实就是几行 stop 标签；
15行：创建渐变标签，参数有三个：① 渐变名称，② 渐变标签属性，用一个JS对象描述，花括号包裹的一组组键值对，③渐变标签内部XML代码，就是前面声明的 stop 变量；
16行：绘制文本，通过第三个参数（fill参数）引用渐变 id，注意写法是 'url(#id)' ，这是svg的语法规范；
17行：画一个圆，也是通过 fill 参数调用了渐变。画圆是做渐变效果的观察之用，画矩形更好观察，只是圆比矩形好看。 本帖最后由 马黑黑 于 2024-10-23 21:20 编辑
dr 最终生成的随感代码如下：
<svg id="msvg" width="800" height="400"><defs id="defs"><linearGradient id="grd" x1="1" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="orange"></stop>
<stop offset="0.5" stop-color="green"></stop>
<stop offset="1" stop-color="tomato"></stop>
</linearGradient></defs><text x="80" y="100" fill="url(#grd)" style="font: bold 60px sans-serif">SVG DRAWER</text><circle cx="300" cy="240" r="100" fill="url(#grd)"></circle></svg>
上一楼的代码美化一下：
<svg id="msvg" width="800" height="400">
<defs id="defs">
<linearGradient id="grd" x1="1" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="orange"></stop>
<stop offset="0.5" stop-color="green"></stop>
<stop offset="1" stop-color="tomato"></stop>
</linearGradient>
</defs>
<text x="80" y="100" fill="url(#grd)" style="font: bold 60px sans-serif">SVG DRAWER</text>
<circle cx="300" cy="240" r="100" fill="url(#grd)"></circle>
</svg> 这个可以自己设置颜色，感觉渐变色比那个彩虹字更好看呢{:4_187:} 马黑黑 发表于 2024-10-23 21:16
代码解释：
08行：指定画笔，注意 svg id 用不用引号都可以，关键是 id="啥啥啥" 的时候啥啥啥和括号里 ...
15行给出了渐变方向，这样斜向渐变更好看呢。 这个还是js封装的，以后弄渐变字方便了{:4_199:} 红影 发表于 2024-10-23 21:23
这个可以自己设置颜色，感觉渐变色比那个彩虹字更好看呢
就是有点麻烦：合适的渐变效果还是很难设计的 红影 发表于 2024-10-23 21:25
这个还是js封装的，以后弄渐变字方便了
多体会体会。
我原想简化一下实现方法，但是一是参数多，二是渐变的子标签可能也会多，不如就偷个懒，两种渐变用同一个命令；滤镜也是这么实现：一个命令制作所有渐变，不按滤镜种类分解指令。 红影 发表于 2024-10-23 21:24
15行给出了渐变方向，这样斜向渐变更好看呢。
方向就是 x1，x2，y1，y2 的取值，0 - 1 或 0% - 100% 之间，和CSS的设置方法不太一样 stop它来管颜色，是不是有点不务正业。。随手拉个单词上岗的感觉{:4_170:} id: 'grd', x1: 1, x2: 0, y1: 0, y2: 1
这里的1就是平时用的1PX么。。1跟0也没差多少吧
如果是百分数还好理解一丢丢 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=102';
这个JS看着有点不太一样。。。v=102啥意思呢。。 马黑黑 发表于 2024-10-23 21:18
上一楼的代码美化一下：
美化后的层次更分明。。还是觉得这种方法更接小白的地气儿{:4_173:} 花飞飞 发表于 2024-10-23 21:39
'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=102';
这个JS看着有点不太一样。。。v=10 ...
假装版本号更新，酱紫，原先使用过该资源的，浏览器会重新去下载一次，资源更新过的内容就可以使用了。渐变是新增的内容。 花飞飞 发表于 2024-10-23 21:40
美化后的层次更分明。。还是觉得这种方法更接小白的地气儿
美化很简单的，大把工具，包括在线工具 花飞飞 发表于 2024-10-23 21:38
id: 'grd', x1: 1, x2: 0, y1: 0, y2: 1
这里的1就是平时用的1PX么。。1跟0也没差多少吧
如果是百分数还 ...
不同语境，含义不同。这里：
一是，渐变要有id，插件封装渐变指令时允许在 {} 里放个id;
二是，渐变的 x1, x2，指的是渐变水平方向设置，y1,y2 指的是垂直方向设置，取值都是 0 -1 或 0% - 100% 之间，和 px 毫无关系，这是系数。
百分比和 0-1 是一码事，0=0%，1=100%
花飞飞 发表于 2024-10-23 21:36
stop它来管颜色，是不是有点不务正业。。随手拉个单词上岗的感觉
没有，这是很专业的。渐变规定的颜色过渡，就和颜色的终止有关。 马黑黑 发表于 2024-10-23 21:50
假装版本号更新，酱紫，原先使用过该资源的，浏览器会重新去下载一次，资源更新过的内容就可以使用了。渐 ...
好吧，好象明白些。能不能这样理解
比如我做图的时候，第一版叫xxx01，颜色位置啥的改一点叫02，然后改到07都有可能。。就是编号的意思。
如果当前06，如果要后悔改改为04，它就回到上个内容了。{:4_173:}