SVG 實例

2018-03-02 15:41 更新

SVG 實例

本節(jié)為你提供了一些 SVG 實例。

在線實例

下面的例子是把SVG代碼直接嵌入到HTML代碼中。

谷歌Chrome,火狐,Internet Explorer9,和Safari都支持。

注意:下面的例子將不會在Opera運行,即使Opera支持SVG - 它也不支持SVG在HTML代碼中直接使用。


SVG 實例

SVG基本形狀

一個圓

矩形

不透明矩形

一個矩形不透明2

一個帶圓角矩形

一個橢圓

累疊而上的三個橢圓

兩個橢圓

一條線

三角形

四邊形

一個星星

另一個星星

折線

另一個折線

路徑

二次貝塞爾曲線

編寫文字

旋轉(zhuǎn)文本

路徑上文字

幾行文字

文本鏈接

定義一條線,文本或輪廓顏色(stoke)

定義一條線寬度,文本或輪廓(stroke-width)

stroke-linecap屬性定義不同類型的開放路徑的終結(jié):

定義虛線(stroke-dasharray)

SVG濾鏡

feGaussianBlur - 模糊效果

feOffset - 偏移一個矩形,然后混合偏移圖像頂部

feOffset - 模糊偏移圖像

feOffset - 使陰影變黑色

feOffset - 為陰影涂上一層顏色

一個feBlend濾鏡

一個feColorMatrix濾鏡

一個feComponentTransfer濾鏡

feOffset、feFlood、feComposite、feMerge 以及 feMergeNode

一個feMorphology濾鏡

濾鏡1

濾鏡2

濾鏡3

濾鏡4

濾鏡5

濾鏡6

SVG漸變

水平線性漸變從黃色到紅色的橢圓形

垂直線性漸變從黃色到紅色橢圓形

水平線性漸變從黃色到紅色并添加一個橢圓內(nèi)文本

放射性漸變從白色到藍(lán)色橢圓

放射性漸變從白色到藍(lán)色的另一個橢圓

SVG雜項

重復(fù)用 5 秒時間淡出的矩形

矩形會變大并改變顏色

會改變顏色的三個矩形

沿一個運動路徑移動的文本

沿一個運動路徑移動、旋轉(zhuǎn)并縮放的文本

沿一個運動路徑移動、旋轉(zhuǎn)并縮放的文本 + 逐步放大并改變顏色的矩形

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號