svgdr 创建渐变指令 gradient(name, options, stops)接收三个参数：参数一 name 是svg渐变标签名，或是线性渐变 linearGradient，或是 径向（发射性）渐变 radialGradient；参数二 options 为JS对象，属性以键值对的方式写在花括号 {} 内，建议包含渐变的ID，例如：{id: 'lGrd', x1: 0, x2: 0, y1: 1, y2: 1}，如果不包含 ID，则需要后续通过 id(id) 指令添加；参数三 stops 用于设置svg渐变的颜色设定，更新前只接受字符串值，例如下面的例子——
<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);
// 创建一组 stop 标签（字符串）
var stop = `
<stop offset="0.3" stop-color="tan" />
<stop offset="1" stop-color="turquoise" />
`;
// 创建线性渐变
dr.gradient('linearGradient', {id: 'lGrd', gradientTransform: 'rotate(45)'}, stop);
// 绘制一个圆，使用渐变填充
dr.circle(200, 200, 190, 'url(#lGrd)');
</script>
更新 gradient 指令之后，可以使用一个二维数组来描述一系列 stop 标签的颜色设置，比字符串表达形式更灵巧、简洁，试看——
<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);
// 创建stop标签用到的颜色和色标边界值（二维数组）
var stop = [['tan', 0.3], ['turquoise', 1]];
// 或者用百分比 [['tan', '30%'], ['turquoise', '100%']]
dr.gradient('linearGradient',{id: 'lGrd', gradientTransform: 'rotate(45)'}, stop);
dr.circle(200, 200, 190, 'url(#lGrd)');
</script>
需要注意的是，stop数组参数的子元素，颜色值必须使用小角引号包裹，色标值分两种情况，其一，若使用的是 0~1 的浮点数表示，可以不需要小角引号，其二，若使用百分比表示，则必须使用小角引号包裹。此外还需注意，渐变至少需要两种颜色参与。
【说明】gradient() 指令升级后 stops 参数仍然支持字符串值，svgdr 会自行判断传参的性质并做恰当处理，只要传参合法有效，svgdr 会将使用者的设计渲染出准确的效果。
发表于 2025-9-21 13:01
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-9-21 17:15
发表于 2025-9-21 17:43
楼主
