掃碼下載編程獅APP
W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
下面的例子是把SVG代碼直接嵌入到HTML代碼中。
谷歌Chrome,火狐,Internet Explorer9,和Safari都支持。
注意:下面的例子將不會在Opera運行,即使Opera支持SVG - 它也不支持SVG在HTML代碼中直接使用。
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)并縮放的文本 + 逐步放大并改變顏色的矩形
更多建議:
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: