(一)基本圖形
一裕便、<rect> 巨型
x
-
y
橫縱坐標(biāo)(原點(diǎn)是瀏覽器左上方)
width
-
height
這個(gè)巨型的寬高
rx
-
ry
圓角
如果只給了rx或者ry說明這個(gè)圓角是等半徑的
二偿衰、<circle> 圓形
- cx
- cy
- r
三下翎、<ellipse> 橢圓形
- cx
- cy
- rx
- ry
四宝当、<line> 直線
x1
y1
x2
-
y2
起點(diǎn)庆揩、終點(diǎn)坐標(biāo)
五跌穗、<polyline> 折線
-
points
(二)填充虏辫、描邊和變換
fill 填充
stroke 描邊顏色
stroke-width 描邊的粗細(xì)
-
transform 變形
(三)基本操作api
在寫js的svg操作要引入命名空間: SVG_NS = 'http://www.w3.org/2000/svg';
-
創(chuàng)建圖形
document.createElementNS(ns, tagName);
-
添加圖形
element.appendChild(childElement);
-
設(shè)置/獲取屬性
element.setAttribute(name, value);
element.getAttribute(value);