在 svg 設定漸層填色- linearGradient 與 radialGradient

在 svg 要使用漸層，需要使用 linearGradient 這個標籤，然後再使用 stop 去設定每個點的間層顏色就好，若使用 defs 可以設定完再利用 fill 的 url 去指定 id 即可。

像這樣設定漸層填色

<linearGradient id="gradient">
    <stop offset="0%" style="stop-color: red" />
    <stop offset="100%" style="stop-color: yellow" />
</linearGradient>

使用的方式：

<rect x="20" y="20" width="300" height="100" style="fill: url(#gradient)">

多幾個定位點就能設定多個顏色：

如果要有半透明的顏色，可以利用 stop-opacity 設定透明度，值為 0~1

要改變角度的話則是要設定起點跟終點的座標像這樣

<linearGradient id="right_to_left" xlink:href="#gradient" x1="100%" y1="0%" x2="0%" y2="0%" />

還可以利用 spreadMethod 去設定間曾如果起點跟終點位置以外還有空間的漸層方式，分為 pad(延續前後的顏色)、repeat(重複)和 reflect(鏡射)。

放射狀漸層則使用 radialGradient，其他設定方式基本與線性漸層相同

 在標籤上設定 cx 跟 cy 改變圓心位置，以及用 r 改變漸層半徑

 如果希望圓心不是在 cx 跟 cy 的地方，可以使用 fx 跟 fy 去調整圓心的點，調整完後會變成這樣，圓是以圓心畫出來的，但漸層的中心點不是在圓心。

一樣可以設定 spreadMethod 來改變起點跟終點外空間的樣式，可以設定的值跟線性漸層一樣。