一、内置图形:
rect(矩形)
circle(圆)
ellipse(椭圆)
line(直线)
polyline(折线)
polygon(多边形)
path(路径)
二、内置图形的html属性或(css样式):
fill(填充颜色)
fill-opacity(填充透明度)
stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]
三、常见图形用法
1、矩形
基本用法
<rect x="0" y="0" width="100" height="100" fill="#f06"/>
<!--x表示横坐标,y表示纵坐标,width表示宽,height表示高-->
![clipboard.png clipboard.png](https://image-static.segmentfault.com/231/770/2317708711-5ba9b29d60c7e_articlex)
扩展用法
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
<rect x="50" y="20" width="150" height="150"
fill="red" stroke="blue" stroke-width="20" fill-opacity="1" stroke-opacity="0.1"/>
2、圆
基本用法
<circle cx="100" cy="50" r="100" fil='#f06'/>
<!-- cx表示圆心横坐标,cy表示圆心纵坐标,r表示半径 -->
![clipboard.png clipboard.png](https://image-static.segmentfault.com/382/039/3820399458-5ba9b2f480baf_articlex)
扩展用法
<circle cx="100" cy="50" r="40"
style="stroke:blue;stroke-width:10;fill:pink"/>
<circle cx="100" cy="50" r="40"
stroke="black" stroke-width="2" fill="red"/>
3、椭圆
基本用法
<ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/>
<!-- cx表示圆心横坐标,cy表示圆心纵坐标,rx表示横向半径,ry表示纵向半径 -->
![clipboard.png clipboard.png](https://image-static.segmentfault.com/361/291/3612910571-5ba9b367815af_articlex)
扩展用法
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
<ellipse cx="300" cy="80" rx="100" ry="50"
fill="pink" stroke="red" stroke-width="2"/>
4、直线
基本用法
<line x1="0" y1=