svgdr教程·渐变
渐变
指令：gradient()
参数：name, options, stopcode
语法：gradient(name, options, stopcode)
参数解释：
① name - SVG渐变名称，必须，两个可选值：linearGradient、radialGradient，即线性渐变和径向渐变
② options - 渐变标签的属性配置，必须，配置里至少要包含 *Gradient 标签的id，配置内容及方法稍后举例说明
③ stopcode - 渐变内部stop节点，即一组stop子标签，用于描述渐变颜色变化，稍后举例说明
一、初识SVG渐变
先看SVG渐变的简单代码结构：
<!-- 重要 ：（1）渐变必须有id，其内需要至少两个stop标签节点；（2）*Gradient标签放在<defs> ... </defs> 之内 --> <!-- 线性渐变 --> <defs> <linearGradient id="gID"> <stop ... /> <stop ... /> </linearGradient> </defs> <!-- 径向渐变 --> <defs> <radialGradient id="gID"> <stop ... /> <stop ... /> </radialGradient> </defs>
再看SVG渐变标签其他重要属性：
// 一、线性渐变 <linearGradient id="linearID" x1="0" x2="0" y1="0" y2="1"> ... </linearGradient> // 属性 x1、x2、y1、y2 定义渐变路线走向，取值范围 0-1 或 0%-100% // 横向和纵向渐变取值举例： // 0 1 0 0 -自左向右，缺省默认值 // 1 0 0 0 - 自右向左 // 0 0 0 1 - 自上而下 // 0 0 1 0 - 自下而上 // 原理 ：x1、x2为水平渐变，若它们相等，水平方向颜色不产生过渡；y1、y2为纵向渐变，若它们相等，垂直方向颜色不产生过渡。x1、x2、y1、y2在合法范围内取值自由，不同设置会得出不同的渐变形态 // 二、径向渐变 <radialGradient id="radialID" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5"> ... </radialGradient> // 说明 ：以上各参数均取值 0.5，这是缺省值，即即使没有设置这些属性它们都是这样取值，此时渐变中心点、焦点均在中心(50%) // 属性 cx、cy、r 定义渐变的中心点坐标和半径，取值范围 0%-100% 或 百分比的浮点数 // 属性 fx、fy 定义渐变焦点坐标（可选），用于控制渐变的形状和方向，取值范围同上 // cx、cy 规定的是径向渐变的发起点，fx、fy 规定的是渐变位置，这两组属性不易理解
接着来看看 stop 标签：
<!-- stop标签是 linearGradient 和 radialGradient 两个渐变标签所需的子标签，任何一种渐变至少需要两组 stop 标签节点 --> <!-- stop 标签必须的属性有 offset（偏移）、stop-color（颜色中值），还有可选参数 stop-opacity（不透明度）--> <!-- 线性渐变 --> <linearGradient id="lgID"> <stop offset="0%" stop-color="red" stop-opacity=".8" /> <stop offset="100%" stop-color="green" stop-opacity=".9" /> </linearGradient> <!-- 径向渐变 --> <radialGradient id="rdID"> <stop offset="0%" stop-color="red" stop-opacity=".8" /> <stop offset="100%" stop-color="green" stop-opacity=".9" /> </radialGradient>
svg渐变的属性还有一个需要提一下，spreadMethod，扩展方式，值有 pad（缺省默认）、reflect（反射）和 repeat（重复）。要让 spreadMethod 发挥作用，x1、x2 和 y1、y2 只要有一对不能设置边缘数值（即非0即1的数值）。
上述内容理解起来不容易，不过都是设计svg渐变的基础，要使用 svgdr 的 gradient() 指令来创建渐变并应用于目标元素，需要花点时间和精力至少弄懂个大概。下面是 gradient() 指令应用举例，代码中有注释说明：
绘制代码：
var attr1 = { id: 'linear', x1: .3, x2: .7, y1: .5, y2: .25 }; //声明线性渐变配置
var attr2 = { id: 'radial', cx: .5, cy: .5, r: .5}; //声明径向渐变配置
// 声明 stop 标签组代码字串
var stop = `
<stop offset="0%" stop-color="pink"></stop>
<stop offset="100%" stop-color="lightblue"></stop>
`;
dr.gradient('linearGradient', attr1, stop); //创建线性渐变
dr.gradient('radialGradient', attr2, stop); //创建径向渐变
dr.rect(10, 10, 380, 380, 'url(#linear)'); //画矩形 : fill属性应用线性渐变
dr.rect(410, 10, 380, 380, 'url(#radial)'); //画矩形 ：fill属性应用径向渐变
svgdr绘制指令生成的SVG代码：
上面的例子主要是展示两种svg渐变的创建与应用。下面的例子则在 stop 子节点层面多下了一些工夫：
svgdr绘制代码：
var stop = `
<stop offset="0%" stop-color="lightgreen"></stop>
<stop offset="50%" stop-color="lightgreen" stop-opacity="0.5"></stop>
<stop offset="51%" stop-color="olive"></stop>
<stop offset="100%" stop-color="olive"></stop>
`;
dr.gradient('radialGradient', {id: 'rGrd'}, stop);
dr.rect(0, 0, '100%', '100%', 'url(#rGrd)');
这组绘制代码，第二个stop子标签偏移 50%、加入透明度设置 0.5，第三个stop子标签偏移值 50%，这两个stop标签在径向渐变中设计了一个消除了锯齿的圆或椭圆，视被渲染对象宽高尺寸而定。最后，id="rGrd" 的径向渐变应用于宽高为svg宽高100%的矩形上生成一个漂亮的图案。
上面绘制代码生成的SVG代码：
渐变是一个复杂的机制，在svg中实现渐变更复杂。或许完全理解渐变很困难，但是，只要对之感兴趣，弄懂它不会难于上青天。
前一篇: svgdr教程·text文本
下一篇: svgdr教程·动画
评论列表 [1条]
#1 | 悄然 于 2024-11-11 19:30 发布: offset="0%" 这个偏移量的使用和技巧有待理解~~最后一个圆效果中间部分还有点立体。
