2019年7月14日 星期日

svg 的漸層- linearGradient 與 radialGradient

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

簡單雙色:

See the Pen
svg gradient
by deathhell (@deathhell)
on CodePen.



多個顏色:

See the Pen
svg gradient 2
by deathhell (@deathhell)
on CodePen.



利用 stop-opacity 設定透明度,值為 0~1

See the Pen
svg gradient 3
by deathhell (@deathhell)
on CodePen.



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

See the Pen
svg gradient 4
by deathhell (@deathhell)
on CodePen.



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

See the Pen
svg gradient 5
by deathhell (@deathhell)
on CodePen.



放射狀漸層則使用 radialGradient

See the Pen
svg gradient 6
by deathhell (@deathhell)
on CodePen.



利用 cx 跟 cy 改變圓心位置,以及用 r 改變漸層半徑

See the Pen
svg gradient 7
by deathhell (@deathhell)
on CodePen.


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

See the Pen
svg gradient 8
by deathhell (@deathhell)
on CodePen.



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

See the Pen
svg gradient 9
by deathhell (@deathhell)
on CodePen.




反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...