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

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