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

標籤: SVG

在 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 來改變起點跟終點外空間的樣式,可以設定的值跟線性漸層一樣。