一.Svg是什么?
- SVG 指可伸缩矢量图形
- SVG 用来定义用于网络的基于矢量的图形
-
SVG 使用 XML 格式定义图形 +
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
在使用svg画图时,要先在文档中写入<svg>节点<svg></svg>在其中扮演的角色就相当于一块画板,可以在其中绘制各种图案
二.矩形 <rect>
实例:如下图
![](https://img-blog.csdnimg.cn/513532684a7c4df3b506a7458ffc47f3.png)
结果:如下图
![](https://img-blog.csdnimg.cn/38aa5033f49044f1ba656af89170212b.png)
- width宽度
- Height高度
- Stroke 围绕颜色
- Stroke-width围绕颜色宽度
- Fill背景颜色
- Css属性可以写在style中
实例:如下图
![](https://img-blog.csdnimg.cn/e3b337035a7e42d4a6e6df777a225a60.png)
效果:如下图
![](https://img-blog.csdnimg.cn/b9608d9805ef47ff9ea5c89440f4afcf.png)
其中:
- cx指圆形在水平方向的偏移量
- cy指圆形在垂直方向的偏移量
- r指圆形的半径
- 圆心在容器的左上角
四.椭圆 <ellipse>
实例:如下图
效果:如下图
1.cx指椭圆形在水平方向的偏移量
2.cy指椭圆形在垂直方向的偏移量
3.rx指椭圆形在水平方向的半径
4.ry指椭圆形在垂直方向的半径
4.圆心在容器的左上角