svg基本使用

<?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是阿里的乙個圖...