<?xml version="1.0" standalone="no"?>
svg 檔案可通過以下標籤嵌入 html 文件:、或者矩形rect
x,y width height
圓形circle
cx,cy cr
橢圓ellipse
cx,cy rx ry
線 line
x1,y1, x2,y2
折線 polyline
points="x1,y1 x2,y2…… xn,yn"
多邊形 polygon
points="x1,y1 x2,y2…… xn,yn"
路徑 path
d="" m = moveto (大絕小相對)
l = lineto
h = horizontal line to
v = vertical lineto
c = curveto c x1 y1, x2 y2, x y
s = smooth curveto s x2 y2, x y
q = quadratic belzier curveto q x1,y1 x,y
t = smooth quadratic belzier curveto(
光滑的二次貝塞爾曲線
) x y
a = elliptical arc (
橢圓弧)
rx ry x-axis-rotation large-arc-flag sweep-flag x y
z = closepath
文字text
x,y xmlns:xlink=""
feblend容器:fecolormatrix
fecomponenttransfer
fecomposite
feconvolvematrix
fediffuselighting
fedisplacementmap
feflood
fegaussianblur
feimage
femerge
femorphology
feoffset
fespecularlighting
fetile
feturbulence
fedistantlight
fepointlight
fespotlight
線性漸變//整個影象建立效果
lineargradient
x1 y1 x2 y2 stop offset from to
放射性漸變 radialgradient
cx cy r fx fy stop offset
例項:手冊:
svg基本知識
寫這篇文章的緣由是因為做dashboard的專案,圖形是svg的專案,參考的專案使用div寫的,然後為了改樣式一直在套樣式,結果套不出來,也是醉了,整理了一下svg的基本格式,從w3c上整理的,詳細的列子參考 目錄 svg形狀 矩形 圓形 橢圓 線 多邊形 折線 標籤 svg 濾鏡 svg 高斯模糊...
基本形狀 基本 SVG 文件 2
定義和組 如前一頁中定義的多邊形和漸變,預定義項的實際用法通常有兩種形式。在這兩種形式下,定義的項都通過其本地 url 或 uri 引用。象 html 頁面一樣,id 屬性建立了文件中的乙個引用點。舉例說來,這意味著 uri irisgradient 引用標識為 irisgradient 的文件部分...
簡單使用SVG
在前端的工作過程中經常會使用一些圖示。在之前我們曾用過兩種方式 純css,iconfont。使用是一種簡單的方式,然而卻有樣式不好調整,資源較大的缺點。純css只能實現較簡單的圖形,多用before after實現,優點是體積小,缺點是每次使用都是手寫,調整太浪費時間。iconfont是阿里的乙個圖...