SVG 範例


線上範例

下面的範例是把SVG程式碼直接嵌入到HTML程式碼中。

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

注意:下面的範例將不會在Opera執行,即使Opera支援SVG - 它也不支援SVG在HTML程式碼中直接使用。


SVG 範例

SVG基本形狀

一個圓

矩形

不透明矩形

一個矩形不透明2

一個帶圓角矩形

一個橢圓

累疊而上的三個橢圓

兩個橢圓

一條線

三角形

四邊形

一個星星

另一個星星

折線

另一個折線

路徑

二次貝茲曲線

撰寫文字

旋轉文字

路徑上文字

幾行文字

文字連結

定義一條線,文字或輪廓顏色(stroke)

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

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

定義虛線(stroke-dasharray)

SVG濾鏡

feGaussianBlur - 模糊效果

feOffset - 偏移一個矩形,然後混合偏移影象頂部

feOffset - 模糊偏移影象

feOffset - 使陰影變黑色

feOffset - 為陰影塗上一層顏色

一個feBlend濾鏡

一個feColorMatrix濾鏡

一個feComponentTransfer濾鏡

feOffset、feFlood、feComposite、feMerge 以及 feMergeNode

一個feMorphology濾鏡

濾鏡1

濾鏡2

濾鏡3

濾鏡4

濾鏡5

濾鏡6

SVG漸層

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

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

水平線性漸層從黃色到紅色並新增一個橢圓內文字

放射性漸層從白色到藍色橢圓

放射性漸層從白色到藍色的另一個橢圓

SVG雜項

重複用 5 秒時間淡出的矩形

矩形會變大並改變顏色

會改變顏色的三個矩形

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

沿一個運動路徑移動、旋轉並縮放的文字

沿一個運動路徑移動、旋轉並縮放的文字 + 逐步放大並改變顏色的矩形