SVG画图描边

什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

一、SVG绘制圆形--
circle:绘制圆形标签;
cx/cy:定义圆形中心点;
r:定义圆形半径;
stroke:定义描边颜色;
stroke-Width:定义描边宽度;
fill:定义内填充颜色;

二 、SVG绘制矩形和圆角矩形--
rect:绘制矩形标签;
x:矩形的左侧位置,定义矩形到
y:矩形的顶端位置,定义矩形到
rx/ry:是圆角半径;
style:
fill:填充颜色;
fill-opacity:填充颜色透明度;
stroke:描边颜色;
stroke-Width:描边宽度;
stroke-opacity:描边透明度;

三、绘制椭圆--
ellipse:绘制椭圆标签;
cx:定义椭圆中心的X坐标;
cy:定义椭圆中心的Y坐标;
rx:定义椭圆的水平半径;
ry:定义椭圆的垂直半径;

四、SVG绘制直线--
line:绘制直线标签;
x1:直线起始点X坐标;
y1:直线起始点Y坐标;

x2:直线终止点X坐标;
y2:直线终止点Y坐标;

总结Demo:

动态描边