svg drawer 弄个渐变字

马黑黑

马黑黑

代码：

1. <svg id="msvg" width="600" height="400" style="border: 1px solid gray"></svg>
   
2. 
   
3. <script>
   
4. var sc = document.createElement('script');
   
5. sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=102';
   
6. document.body.appendChild(sc);
   
7. sc.onload = () => {
   
8.         var dr = _dr(msvg);
   
9.         dr.defs('defs');
   
10.         var stop = `
    
11.           <stop offset="0" stop-color="orange"/>
    
12.           <stop offset="0.5" stop-color="green"/>
    
13.           <stop offset="1" stop-color="tomato"/>
    
14.         `;
    
15.         dr.gradient('linearGradient', {id: 'grd', x1: 1, x2: 0, y1: 0, y2: 1}, stop);
    
16.         dr.text('SVG DRAWER', 80, 100, 'url(#grd)').style('font: bold 60px sans-serif');
    
17.         dr.circle(300,240,100,'url(#grd)');
    
18. };
    
19. </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 参数调用了渐变。画圆是做渐变效果的观察之用，画矩形更好观察，只是圆比矩形好看。

马黑黑

dr 最终生成的随感代码如下：

1. <svg id="msvg" width="800" height="400"><defs id="defs"><linearGradient id="grd" x1="1" x2="0" y1="0" y2="1">
   
2. <stop offset="0" stop-color="orange"></stop>
   
3. <stop offset="0.5" stop-color="green"></stop>
   
4. <stop offset="1" stop-color="tomato"></stop>
   
5. </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>

复制代码

马黑黑

上一楼的代码美化一下：

1. <svg id="msvg" width="800" height="400">
   
2.         <defs id="defs">
   
3.                 <linearGradient id="grd" x1="1" x2="0" y1="0" y2="1">
   
4.                         <stop offset="0" stop-color="orange"></stop>
   
5.                         <stop offset="0.5" stop-color="green"></stop>
   
6.                         <stop offset="1" stop-color="tomato"></stop>
   
7.                 </linearGradient>
   
8.         </defs>
   
9.         <text x="80" y="100" fill="url(#grd)" style="font: bold 60px sans-serif">SVG DRAWER</text>
   
10.         <circle cx="300" cy="240" r="100" fill="url(#grd)"></circle>
    
11. </svg>

复制代码

红影

这个可以自己设置颜色，感觉渐变色比那个彩虹字更好看呢

红影

马黑黑 发表于 2024-10-23 21:16
代码解释：

08行：指定画笔，注意 svg id 用不用引号都可以，关键是 id="啥啥啥" 的时候啥啥啥和括号里 ...

15行给出了渐变方向，这样斜向渐变更好看呢。

红影

这个还是js封装的，以后弄渐变字方便了

马黑黑

红影 发表于 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它来管颜色，是不是有点不务正业。。随手拉个单词上岗的感觉

花飞飞

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
上一楼的代码美化一下：

美化后的层次更分明。。还是觉得这种方法更接小白的地气儿

马黑黑

花飞飞 发表于 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，它就回到上个内容了。