日期: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指定直线的颜色(必需要设置的属性,否则这条直线看不见)
4.text文本
x 用于指定文本左上角的位置,y 用于指定字体的基线位置。(基线是印刷术语,指文本中一条不可见的线,所有字母都以之为基准对齐。“p”和“y”这样的字母会伸到基线以下,伸出的部分叫下伸部分。)
三.为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"/>
效果如下:
注意:
看上图你可能会觉得奇怪,会什么圆形中出现了三种颜色。这是因为描边与每个圆形的边缘对其,既不完全位于圆形内部,也不完全位于圆形外部,而是一半在内部一半在外部。描边中在内部的颜色与原内部的颜色叠加就出现了第三种颜色。