論壇 | 最新的Web開發教程
 

SVG例子


試戴它自己的例子

下面的例子直接嵌入SVG代碼插入HTML代碼。

這是火狐,IE 9,谷歌Chrome,Opera和Safari瀏覽器的支持。


SVG示例

SVG基本形狀

一個圓形
矩形
用不透明的矩形
與不透明2的矩形
帶圓角的矩形
橢圓
在彼此的頂部三個橢圓
兩個橢圓
一行
有三個邊的多邊形
有四個邊的多邊形
一個明星
另一位明星
折線
另一個折線
一條路徑
二次貝塞爾曲線
寫文本
旋轉文本
幾行文字
文字為紐帶
定義線條,文字或輪廓的顏色(stroke)
定義線條,文字或輪廓的寬度(stroke-width)
定義不同類型的結局到開放路徑(stroke-linecap)
定義虛線(stroke-dasharray)

SVG過濾器

feGaussianBlur -模糊效果
feOffset -偏移一個矩形,然後混合原始的偏移圖像的頂部
feOffset -模糊偏移圖像
feOffset -讓陰影黑
feOffset -把陰影的顏色
一個feBlend過濾器
過濾器1
過濾器2
過濾器3
過濾器4
過濾器5
過濾器6

SVG漸變

從黃色到紅色的水平線性梯度的橢圓
從黃色到紅色的垂直線性梯度的橢圓
從黃色到紅色的水平線性梯度橢圓形,和一個文本
徑向漸變的橢圓從白色到藍色
另一種橢圓形徑向漸變從白色到藍色

SVG雜項

矩形反复消失5秒以上
越來越矩形會改變顏色
三個矩形會改變顏色
移動文本沿運動路徑
移動,旋轉和縮放文本一起運動路徑
移動,旋轉,並沿運動路徑比例文本+越來越多的矩形會改變顏色
橢圓旋轉