日期：2020-09-26
作者：18届 WRZ
标签：数据可视化
一.SVG简介
SVG(可伸缩矢量图标)是一种文本格式。SVG代码可以直接包含在HTML文档中，或者动态插入到DOM中。(对DOM还不太熟悉的铁子可以浏览一下这篇文章)。除了IE8及之前版本，所有浏览器都支持SVG。SVG也是一种XML语言，那些不包含结束标签的元素要自关闭。
二.SVG简单图形绘制
1.SVG矩形
先来熟悉一下SVG的坐标系统
<rect x="0" y="0" width="500" height="50"/>
用rect来绘制矩形，其中x和y用于指定矩形左上角的坐标，width和height来指定矩形的大小
2.SVG圆形
<circle cx="250" cy="25" r="25"/>
cx,cy指定了圆心的坐标，r用于指定圆的半径。要注意的是用该方式画出来的圆形是实心的，且用黑色填充
3.SVG椭圆
<ellipse cx="250" cy="25" rx="100" ry="25"/>
4.SVG直线
<line x1="0" y1="0" x2="400" y2="10" stroke="black"/>
x1,y1指定直线的起始坐标；x2,y2指定直线的结束坐标。stroke指定直线的颜色(必需要设置的属性，否则这条直线看不见)
三.为SVG元素添加样式
1.SVG的默认样式是黑色填充，没有描边。常用SVG属性如下：
| 属性 | 描述 |
|---|---|
| fill | 颜色值，用于填充。可以使用颜色名、十六进制、RGB、RGBA |
| stroke | 颜色值，用于描边 |
| stroke-width | 边的宽度，通常单位是像素 |
| opacity | 透明度，取值范围为0.0(完全透明)~1.0(完全不透明) |
2.给SVG元素应用样式的两种方式
- 作为元素属性直接应用或使用CSS样式规则
<circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/>
效果如下：
- 通过类来指定样式
<circle cx="25" cy="25" r="22" class="pumpkin"/>
.pumpkin{
fill:yellow;
stroke:orange;
stroke-width:5
}
四.分层与绘制顺序
代码中元素出现的顺序决定了它们的深度次序。
<rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>
效果如下：
五.透明度的设定
前面介绍了通过opacity属性可以改变透明度，这里介绍另一种方法，即通过rgba来设置透明度，最后一个属性表示透明度，取值范围是0.0~1.0
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)"
stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)"
stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>
效果如下：
注意：
看上图你可能会觉得奇怪，会什么圆形中出现了三种颜色。这是因为描边与每个圆形的边缘对其，既不完全位于圆形内部，也不完全位于圆形外部，而是一半在内部一半在外部。描边中在内部的颜色与原内部的颜色叠加就出现了第三种颜色。