SVG初识【一】

矩形

<svg width="400" height="110">
 
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150"
height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

svg	svg标签
width	svg宽度
height	svg高度
rect	rect标签
width	rect宽度
height	rect高度
style	基本属性
fill	填充颜色fill:rgb(0,0,255)
stroke-width边缘宽度	stroke-width:3
stroke边框颜色	stroke:rgb(0,0,0)
rx，ry	圆角效果

圆形

<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

circle	圆形
cx	左边距
cy	上边距
r:rx ry 的缩写	圆只有r 图形的宽高曲率
stroke边框颜色	black
stroke-width	边框宽度
fill内填充颜色	red

椭圆

<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />

cx	左边距
cy	右边距
rx	主轴长度
ry	侧轴长度

直线

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />

line	类型
x1,y1	起始坐标
x2,y2	结束坐标
style	填充颜色和宽度

折线

<polyline points="50 100,150 100,
150 80,200 150,
150 220,150 200,
50 200,50 100"
 style="fill:none;stroke:black;stroke-width:3" />