SVG 自学微笔记(08) - 线性&放射渐层

不定更新、即将迎来结尾 (๑´ㅂ`๑)

学习资源: W3Schools、其他网路资料

渐层(Gradients)是W3Schools关于SVG基础教学的最后部分，渐层的效果就是让颜色渐渐地转变成另一种颜色，而在SVG中的渐层又有两种主要的类型，分别是线性(Linear)渐层和放射(Radial)渐层。

SVG : 渐层

(仅列出部分有使用到的属性)

<svg></svg>

height : 整个图形(画布)的原始长度width: 整个图形(画布)的原始宽度

<defs></defs>

defs是definitions(定义)的简写，用来存放SVG特殊元素的定义，像是filter还有这次的linearGradient和radialGradient

<stop></stop>

规範如何渐层填色 (可以超过2种颜色)offset: 渐层颜色的起始(结束)位置stop-color: 渐层的颜色stop-opacity: 渐层的颜色透明度

<ellipse></ellipse> 或 <ellipse />

cx : 圆心初始的 x 座标cy : 圆心初始的 y 座标rx : 圆的水平方向半径ry : 圆的垂直方向半径fill : 图形填满颜色

範例1 - 水平线性渐层

(左边x2是100%，右边x2是50%)

<linearGradient></linearGradient>有三种线性渐层，水平、垂直、倾斜渐层id: 渐层的名称x1、x2: 渐层色1和渐层色2的起始x轴位置y1、y2: 渐层色1和渐层色2的起始y轴位置

要达到水平渐层的效果，渐层的y1、y2位置必须相同，但是x1、x2位置必须不同，下面的渐层从左上最前端开始到右上最末端结束，当x2被修改成50%则代表渐层在中间就结束，后面都会是粉红色，而不再有渐层效果。

<svg height="300" width="400">    <defs>        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">            <stop offset="0%" style="stop-color: wheat;stop-opacity:1;"></stop>            <stop offset="100%" style="stop-color: pink;stop-opacity:1;"></stop>        </linearGradient>    </defs>    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse></svg>

(ellipse的fill属性可以透过url指定套用的颜色渐层效果)

範例2 - 垂直线性渐层

(左边y2是100%，右边y2是50%)

要达到垂直渐层的效果，渐层的x1、x2位置必须相同，但是y1、y2位置必须不同，下面的渐层从左上最前端开始到左下最末端结束，当y2被修改成50%则代表渐层在中间就结束，后面都会是粉红色，而不再有渐层效果。

<svg height="300" width="400">    <defs>        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">            <stop offset="0%" style="stop-color: wheat;stop-opacity:1;"></stop>            <stop offset="100%" style="stop-color: pink;stop-opacity:1;"></stop>        </linearGradient>    </defs>    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse></svg>

範例3 - 倾斜线性渐层

要达到倾斜渐层的效果，渐层的x1、x2位置必须不同，而且y1、y2位置也必须不同，下面的渐层从左偏下的最前端开始到右偏上最末端结束。

<svg height="300" width="400">    <defs>        <linearGradient id="grad1" x1="0%" y1="80%" x2="100%" y2="10%">            <stop offset="0%" style="stop-color: blue;stop-opacity:1;"></stop>            <stop offset="100%" style="stop-color: red;stop-opacity:1;"></stop>        </linearGradient>    </defs>    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse>    <text x="115" y="115" font-size="45" fill="white">SVG</text></svg>

範例4 - 放射性渐层

由放射核心向外发散产生放射性渐层效果，简单说就是圆形渐层。

<radialGradient></radialGradient>id: 渐层的名称cx、cy: 外层圆形圆心的x、y位置fx、fy: 有调整颜色最浓郁部分位置(内层圆心)的效果r: 外层圆形的半径

<svg height="300" width="400">    <defs>        <radialGradient id="grad1" cx="50%" cy="50%" fx="50%" fy="50%" r="50%">            <stop offset="0%" style="stop-color: blue;stop-opacity:1;"></stop>            <stop offset="100%" style="stop-color: red;stop-opacity:1;"></stop>        </radialGradient>    </defs>    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse></svg>

(fx、fy设定成50%的效果跟没有fx、fy的时候一模一样)

透过调整fx、fy可以看到蓝色核心区域向右下方移动的效果。

<svg height="300" width="400">    <defs>        <radialGradient id="grad1" cx="50%" cy="50%" fx="70%" fy="90%" r="50%">            <stop offset="0%" style="stop-color: blue;stop-opacity:1;"></stop>            <stop offset="100%" style="stop-color: red;stop-opacity:1;"></stop>        </radialGradient>    </defs>    <ellipse cx="160" cy="100" rx="150" ry="80" fill="url(#grad1)"></ellipse></svg>

下次就是最后一篇微笔记要来补SVG Path的坑啰! ヾ(*´∇`)ﾉ

参考资料

SVG Gradients (Linear) - W3Schools
SVG Gradients (Radial) - W3Schools
SVG 研究之路 (25) - 再谈渐层填色