SVG 自學微筆記(08) - 線性&放射漸層

2023-05-28

2023-06-22

資料視覺化

不定更新、即將迎來結尾 (๑´ㅂ`๑)

學習資源: 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) - 再談漸層填色

技術類文章