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 秒時間淡出的矩形

矩形會變大並改變顏色

會改變顏色的三個矩形

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

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

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！