SVG入門漸變

前言

svg並非只能簡單填充顏色和描邊，更令人興奮的是，你還可以建立和並在填充和描邊上應用漸變色。

有兩種型別的漸變：線性漸變和徑向漸變。你必須給漸變內容指定乙個id屬性，否則文件內的其他元素就不能引用它。為了讓漸變能被重複使用，漸變內容需要定義在標籤內部，而不是定義在形狀上面。

線性漸變

線性漸變沿著直線改變顏色，要插入乙個線性漸變，你需要在svg檔案的defs元素內部，建立乙個節點。

width
="120"
height
="240"
version
="1.1"
xmlns
="">
>
"gradient1"
>
class
="stop1"
offset
="0%"
/>
class
="stop2"
offset
="50%"
/>
class
="stop3"
offset
="100%"
/>
lineargradient
>
"gradient2"
x1="0" x2
="0"
y1="0" y2
="1"
>
offset
="0%"
stop-color
="red"
/>
offset
="50%"
stop-color
="black"
stop-opacity
="0"
/>
offset
="100%"
stop-color
="blue"
/>
lineargradient
>
type
="text/css"
>
style
>
defs
>
"rect1" x=
"10" y=
"10"
rx="15"
ry="15"
width
="100"
height
="100"
/>
"10" y=
"120"
rx="15"
ry="15"
width
="100"
height
="100"
fill
="url(#gradient2)"
/>
svg>

線性漸變內部有幾個結點，這些結點通過指定位置的offset（偏移）屬性和stop-color（顏色中值）屬性來說明在漸變的特定位置上應該是什麼顏色；

可以直接指定這兩個屬性值，也可以通過css來指定他們的值。

offset的值可以為0，1也可以是0%，100%。

類似於填充和描邊，你也可以指定屬性stop-opacity來設定某個位置的半透明度：

offset
="100%"
stop-color
="yellow"
stop-opacity
="0.5"
/>

使用漸變時，我們需要在乙個物件的屬性fill或屬性stroke中引用它，這跟你在css中使用url引用元素的方法一樣。

漸變的方向可以通過兩個點來控制，它們分別是屬性x1、x2、y1和y2，這些屬性定義了漸變路線走向。漸變色預設是水平方向的，但是通過修改這些屬性，就可以旋轉該方向。

"gradient2"
x1="0" x2
="0"
y1="0" y2
="1"
>

徑向漸變

徑向漸變與線性漸變相似，只是它是從乙個點開始發散繪製漸變。建立徑向漸變需要宣告在defs元素裡。

width
="120"
height
="240"
version
="1.1"
xmlns
="">
>
"radialgradient1"
>
offset
="0%"
stop-color
="red"
/>
offset
="100%"
stop-color
="blue"
/>
radialgradient
>
"radialgradient2"
cx="0.25"
cy="0.25" r=
"0.25"
>
offset
="0%"
stop-color
="red"
/>
offset
="100%"
stop-color
="blue"
/>
radialgradient
>
defs
>
"10" y=
"10"
rx="15"
ry="15"
width
="100"
height
="100"
fill
="url(#radialgradient1)"
/>
"10" y=
"120"
rx="15"
ry="15"
width
="100"
height
="100"
fill
="url(#radialgradient2)"
/>
svg>

中值（stops）的使用方法與之前一致，但是現在這個物件的顏色是中間是紅色的，且向著邊緣的方向漸漸的變成藍色。跟線性漸變一樣，節點可以有多個屬性來描述其位置和方向，但是它更加複雜。徑向漸變也是通過兩個點來定義其邊緣位置，兩點中的第乙個點定義了漸變結束所圍繞的圓環，它需要乙個中心點，由cx和cy屬性及半徑r來定義，通過設定這些點我們可以移動漸變範圍並改變它的大小，如上例的第二個所展示的。

SVG入門漸變

SVG 徑向漸變

SVG 徑向漸變

SVG 漸變學習（四）

SVG入門 漸變

SVG 徑向漸變

SVG 徑向漸變

SVG 漸變學習（四）

相關推薦

SVG入門漸變