svgdr渐变指令升级
本帖最后由 马黑黑 于 2025-9-21 13:04 编辑 <br /><br /><style>.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox h5 { font-size: 18px; margin: 6px 0; }
</style>
<div id="prevBox"></div>
<div class="artBox">
<p>svgdr 创建渐变指令 <mark>gradient(<txt-red>name, options, stops</txt-red>)</mark>接收三个参数：参数一 <txt-red>name</txt-red> 是svg渐变标签名，或是线性渐变 linearGradient，或是 径向（发射性）渐变 radialGradient；参数二 <txt-red>options</txt-red> 为JS对象，属性以键值对的方式写在花括号 <txt-red>{}</txt-red> 内，建议包含渐变的ID，例如：<mark>{id: 'lGrd', x1: 0, x2: 0, y1: 1, y2: 1}</mark>，如果不包含 ID，则需要后续通过 id(id) 指令添加；参数三 <txt-red>stops</txt-red> 用于设置svg渐变的颜色设定，更新前只接受字符串值，例如下面的例子——</p>
<div class="codebox" data-prev="1">
<svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
var dr = Dr.dr(msvg);
<txt-green>// 创建一组 stop 标签（字符串）</txt-green>
var stop = `
<stop offset="0.3" stop-color="tan" />
<stop offset="1" stop-color="turquoise" />
`;
<txt-green>// 创建线性渐变</txt-green>
dr.gradient('linearGradient', {id: 'lGrd', gradientTransform: 'rotate(45)'}, stop);
<txt-green>// 绘制一个圆，使用渐变填充</txt-green>
dr.circle(200, 200, 190, 'url(#lGrd)');
</script>
</div>
<p>更新 gradient 指令之后，可以使用一个二维数组来描述一系列 stop 标签的颜色设置，比字符串表达形式更灵巧、简洁，试看——</p>
<div class="codebox" data-prev="1">
<svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js?v=1.0';
var dr = Dr.dr(msvg);
<txt-green>// 创建stop标签用到的颜色和色标边界值（二维数组）</txt-green>
var stop = [['tan', 0.3], ['turquoise', 1]];
<txt-green>// 或者用百分比 [['tan', '30%'], ['turquoise', '100%']]</txt-green>
dr.gradient('linearGradient',{id: 'lGrd', gradientTransform: 'rotate(45)'}, stop);
dr.circle(200, 200, 190, 'url(#lGrd)');
</script>
</div>
<p>需要注意的是，stop数组参数的子元素，颜色值必须使用小角引号包裹，色标值分两种情况，其一，若使用的是 0~1 的浮点数表示，可以不需要小角引号，其二，若使用百分比表示，则必须使用小角引号包裹。此外还需注意，渐变至少需要两种颜色参与。</p>
<p>【说明】gradient() 指令升级后 stops 参数仍然支持字符串值，svgdr 会自行判断传参的性质并做恰当处理，只要传参合法有效，svgdr 会将使用者的设计渲染出准确的效果。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 这个用二维数组描述 stop 标签的方式好简洁啊，只要给颜色值和色标值就可以了。其余都被黑黑封装了吧{:4_199:} 更新后的封装后面带了v=1.0，是为了区别于更新前吧。我重复一遍为给自己提醒的{:4_173:} 马老师辛苦了！升级后，代码更灵巧、简洁{:4_191:} 谢谢黑黑老师详解，辛苦了。{:4_190:} 杨帆 发表于 2025-9-21 17:15
马老师辛苦了！升级后，代码更灵巧、简洁
{:4_190:} 马黑黑 发表于 2025-9-21 17:54
{:4_191:} 红影 发表于 2025-9-21 16:22
更新后的封装后面带了v=1.0，是为了区别于更新前吧。我重复一遍为给自己提醒的
这个不是。这是处理缓存刷新问题：由于浏览器的缓存机制特性，它不会主动下载更新后的资源，会继续使用原有的缓存。因此，相同的JS资源地址之后加 ?v=x 之类的后缀，浏览器会认为是新的资源，会下载，下载后缓存里是 x 版本，如果此后JS资源又有更新，它也不认得，需要在引用或导入时继续加不同的后缀，比如 ?v=x.y，这时浏览器认为是个新的资源，又会下载。
当然，浏览器使用可以手动硬刷新，强制浏览器重新下载资源，不论这些资源有没有版本后缀：Ctrl键 + F5，硬刷新之后再软刷新一下，F5，一般就OK了。 红影 发表于 2025-9-21 16:20
这个用二维数组描述 stop 标签的方式好简洁啊，只要给颜色值和色标值就可以了。其余都被黑黑封装了吧{:4_19 ...
是 svgdr 封装了 stop 标签，如果传来的是数组参数的话 越来越先进了。
二维数组就可以定了颜色和边界，这样多加几种色彩也很方便。。。{:4_199:} 花飞飞 发表于 2025-9-21 18:45
越来越先进了。
二维数组就可以定了颜色和边界，这样多加几种色彩也很方便。。。
多一些选择 马黑黑 发表于 2025-9-21 18:00
这个不是。这是处理缓存刷新问题：由于浏览器的缓存机制特性，它不会主动下载更新后的资源，会继续使用原 ...
原来是为了让浏览器辨别更新后的资源，嗯嗯，知道了{:4_187:} 马黑黑 发表于 2025-9-21 18:01
是 svgdr 封装了 stop 标签，如果传来的是数组参数的话
这个好方便啊，可以加更多颜色了{:4_187:} 红影 发表于 2025-9-21 19:53
这个好方便啊，可以加更多颜色了
就是要求对JS数组以及参数的约定要了解清除 红影 发表于 2025-9-21 19:53
原来是为了让浏览器辨别更新后的资源，嗯嗯，知道了
你看，做个帖子，需要的知识面还是挺广的 马黑黑 发表于 2025-9-21 19:47
多一些选择
去超市买东西一样，种类多总是更吸引人。{:4_173:} 马黑黑 发表于 2025-9-21 20:03
就是要求对JS数组以及参数的约定要了解清除
嗯嗯，这个肯定需要知道的{:4_187:} 马黑黑 发表于 2025-9-21 20:04
你看，做个帖子，需要的知识面还是挺广的
是啊，各种细节都需要考虑到呢。 红影 发表于 2025-9-21 21:12
是啊，各种细节都需要考虑到呢。
嗯嗯 红影 发表于 2025-9-21 21:11
嗯嗯，这个肯定需要知道的
那挺好