SVG 實例
親自試一試實例
下面的例子將 SVG 代碼直接嵌入到 HTML 代碼中。
Firefox、Internet Explorer 9、Google 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
