数据可视化系列--svg入门基础（一）
一、前言
1、SVG(Scalable Vector Graphics)可伸缩矢量图形
特点：
（1）使用xml格式来定义图形；
（2）用来定义web上的使用的矢量图；
（3）改变图像尺寸，图片质量不受损；
（4）所有元素属性可以使用动画；
（5）继承了W3C标准，在html中使用方式，html直接嵌入svg内容，或者直接引入svg文件。
/* svg标签，这里的rect为矩形，在后面的图形元素中会详细说明 */
<svg width="200" height="200">
<rect width="20" height="20" fill="red"></rect>
</svg>
/* 引入后缀名为.svg的文件 */
<img src="demo.svg" alt="测试svg图片">注意：svg为inline水平元素。且需要绘制的所有图形都应被包含在<svg></svg>标签内。
2、SVG坐标系
特点:（1）y轴向下；（2）顺时针方向的角度是正值。
注意：元素的所有操作都是相对自身坐标系进行的
3、颜色RGB和HSL
RGB: 三个分量：红色、绿色、蓝色，每个分量的取值范围[0, 255]，优点是显示器更容易解析。
HSL: 三个分量：颜色h、饱和度s%、亮度l%，每个分量的取值范围分别是[0, 359], [0, 100%], [0, 100%],，其中，h=0表示红色， h=0表示120绿色，h=0表示240 蓝色。
基于HSL的配色方案：http://paletton.com/
二、特殊元素
1、foreignObject
foreignObject元素通常被用来在svg代码中嵌入html节点。注意：该属性对IE不支持。<foreignObject>元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助<foreignObject>标签，我们可以直接在SVG内部嵌入XHTML元素。通常会与标签一起使用，在用户浏览器不支持时，告知用户。
举个例子：
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="120" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>文字测试foreignObject的功能</p>
</body>
</foreignObject>
</svg>可以看到<foreignObject>标签里面有一个设置了xmlns="http://www.w3.org/1999/xhtml"命名空间的<body>标签，此时<body>标签及其子标签都会按照XHTML标准渲染，实现了SVG和XHTML的混合使用。
这种混合特性有什么作用呢？作用很多，其中之一就是轻松实现SVG内的文本自动换行。
1.1文本自动换行
SVG要实现文本换行，往往需要手动阻断
<svg xmlns="http://www.w3.org/2000/svg">
<text font-size="12">
<tspan x="0" y="10">一段需要word wrap</tspan>
<tspan x="0" y="26">的文字。</tspan>
</text>
</svg>需要2个<tspan>元素，这一点都不工程。
但是如果使用<foreignObject>元素，则自动换行就是小菜：
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="120" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<p style="font-size:12px;margin:0;">一段需要word wrap的文字。</p>
</body>
</foreignObject>
</svg>
1.2将页面上的DOM元素轻松变成图片
SVG <foreignObject>元素还有其他更高级的应用，就是可以将页面上的DOM元素轻松变成图片。
原理：
1、获取对应DOM元素的outerHTML代码；
2、放在<foreignObject>元素中；
3、图片方式显示我们的SVG图形；
4、上一步的图片本质还是SVG，我们可以借助canvas drawImage()方法将图片放在画布上，然后使用canvas.toDataURL()方法转换成png或jpg图片。
三、作用于svg标签的属性
1、viewport
表示svg的可见区域的大小：width和height，控制svg的宽度和高度
2、viewBox
定义用户视野的位置以及大小，即定义用来观察SVG视图一个矩形区域，更形象的解释就是：SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！
如：viewBox ='20 20 100 100'，前两个参数表示viewBox视野相对svg视图的x y坐标，后两个参数表示viewBox的大小。
与svg实际大小的关系如下：
如上图所示，用户可以看到的部分是蓝色的星星，而星星的另一侧是看不到的。
viewBox的使用案例：
1、绘制矩形
<svg width="200" height="200" style="border: 2px solid #58a">
<rect x="30" y="30" width="100" height="100" fill="#fb3" stroke="none"></rect>
</svg>
2、增加视野viewBox viewBox='0 0 100 100'，相当于用户只能看到SVG视图中viewBox定义的区域，即下图红色框内区域：
viewBox="x, y, width, height" // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度
body>
<svg width="200" height="200" style="border:2px solid #58a" viewBox='0 0 100 100'>
<rect x="30" y="30" width="200" height="200" fill="#fb3" stroke="none"></rect>
</svg>
最终效果图：
3、preserveAspectRatio属性
这个属性也是作用于<svg>元素上，且作用对象都是viewBox。
比如：
preserveAspectRatio="xMidYMid meet"属性值为空格分隔的两个值组合而成。第一个值表示：viewBox如何viePort对齐；第二个值表示：如何维持高宽比（可以为空）。
其中，第一个值又分为两个部分组成。前半部分表示x方向的对齐。后半部分表示y方向对齐。
| 值 | 含义 |
| xMin | viewport和viewBox左边对齐 |
| xMid | viewport和viewBox的x轴中心对齐 |
| xMax | viewport和vieBox右边对齐 |
| YMin | viewport和viewBox上边缘对齐。注意：Y是大写 |
| YMid | viewport和viewBox的y轴中心点对齐。注意：Y是大写 |
| YMax | viewport和viewBox下边缘对齐。注意：Y是大写 |
xMaxYMax表示右-下
xMidYMid表示中-中
第二个值属性值支持
| 值 | 含义 |
| meet | 保持纵横比缩放viewBox适应viewport，受 |
| slice | 保持纵横比，同时比例小的方向放大填满viewport，攻 |
| none | 扭曲纵横比，充分适应viewport，变态 |
1、图1：红色区域为不设置preserveaspectRatio时的可视区域；
2、图2: 采用与x轴左边对齐、与y轴上边缘对齐的方式，保持纵横比缩放；
3、图3：保持纵横比的同时，以比例小的方向即x轴等比放大，填充svg区域
4、图4：preserveaspectRatio="none"，变形充分适应svg
四、作用于svg内部元素的样式
svg支持css选择器给元素添加样式
/* 定义样式 */
.rectStyle {
fill: yellow;
}
<svg width="200" height="200">
<rect class="rectStyle" width="20" height="20"></rect>
</svg>也可以直接在元素中设置样式：
<svg width="200" height="200">
<rect width="20" height="20" fill="yellow"></rect>
</svg>或者写成style
<svg width="200" height="200">
<rect style="fill: yellow;" width="20" height="20"></rect>
</svg>常见的样式说明：
1、填充
（1）fill：定义填充颜色和文字颜色；
（2）fill-opacity：定义填充颜色的透明度；
（3）fill-rule：指定填充规则，符合填充规则才可被填充，取值：[nonzero | evenodd | inherit]，默认值为nonzero。
nonzero： 该规则判断点任意方向的射线与图形路径的相交情况，默认为数值0，射线从左到右时，每穿过一条路径，数值加1；从右到左时，每穿过一条路径，数值减1，最后结果若为0，则表示点不在图形内部，不能填充。
evenodd：该规则判断点任意方向的射线与图形路径的相交情况，相交个数为奇数，则点在图形内部，可进行填充；反之在外部，不进行填充。
好像比较难理解这个，fill-rule到底是为了解决什么问题？
我们看上图，图中有一个路径A-B-C-D-E-F-G-H-I，当我们用fill填充它的时候，我们会发现其中有一个重叠的区域S，那么这个重叠的区域到底填不填充呢？这，就是fill-rule所干的事。
分析：沿着A-B-C-D-E-F-G-H-I方向走，我们会发现重叠区域S外部为A-B-C-D-A，形成方向为顺时针方向。重叠外部区域S的形成方向为逆时针H-I-A，所以重叠区域S不显示。这个和fill-rule设置无关，这是默认的。
来看一下经典的五角星问题：
相同的，这里有一个重叠区域S，不过如何才能知道是重叠区域呢？其实很简单，就是重叠区域的外面还有东西，而它们都还在整个形状之内。
我们可以发现五角星的重叠区域S的形成方向和外部是一样的，这种情况下，fill-rule就起作用了，如果是nonzero，区域S是显示的，如果是evenodd，区域S则不显示。
2、边框
（1）stroke：边框颜色；
（2）stroke-width：边框宽度；
（3）stroke-opacity：边框透明，取值[0,1]；
（4）stroke-linecap：单条线端点样式，一般应用于直线或者路径，取值：[ butt | square | round ]，分别是对接、方形和圆形
（5）stroke-dasharray：虚线边框，可以设置每段虚线的长度和间隔，之间使用逗号分隔或者空格分隔，如：
stroke-dasharray="10, 5, 5, 10"
（6）stroke-dashoffset：设置虚线描边偏移量，使图案向前移动
<svg width="200" height="200" viewBox='0 0 300 300'>
<line x1="20" y1="20" x2="120" y2="20"
stroke="red" stroke-width="5" stroke-linecap="butt"
stroke-dasharray="20 5 5 10">
</line>
<line x1="20" y1="60" x2="120" y2="60"
stroke="red" stroke-width="5" stroke-linecap="butt"
stroke-dasharray="20 5 5 10" stroke-dashoffset="10">
</line>
</svg>
虚线的样式为 20 5 5 10，偏移量为10，根据下图可发现第二个虚线，整体向前移动了10个单位
（7）sroke-linejoin：两条线段之间衔接点的样式，取值：[ miter | round | bevel ]，分别是尖角(图左一)、圆角(图左二)和斜角(图左三)
（8）sroke-miterlimit：默认值4，当miterLength / stroke-width < stroke-miterlimit时，stroke-linejoin值会变成换成bevel斜角。如下图中，stroke-width为15，根据计算公式，miterLength ／ stroke-width 约等于5.2，即当stroke-miterlimit小于6时，stroke-linejoin值会变成bevel斜角。
3、透明度
opacity：定义整个图形的透明度
4、字体
（1）font-size：字体大小；
（2）font-family：字体系列的名称；
（3）font-weight：字体粗细；
（4）font-style：字体样式，斜体和正常；
（5）text-decoration：下划线样式；
（6）text-anchor：设置文本的排列属性，属性值[start | middle | end | inherit]，如：middle表示，将文字定位原点移动至文字中心。
5、变换
基础概念同css。
（1）transform：同css，默认是左上角为旋转中心，如：transform="rotate(30)"；
（2）transform-origin：同css，设置旋转的操作中心；
（3）rotate：设置文字元素的旋转角度，正值为顺时针旋转，注意区分rotate和transform中的rotate，如rotate="30"
而transform中的rotate是对整个元素进行旋转操作。
<svg width="200" height="200">
<text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">示例文字1</text>
</svg>
<svg width="200" height="200">
<text x="10" y="10" dx="10" dy="10" textLength="100" transform="rotate(20)">示例文字2</text>
</svg>五、参考
1、http://www.runoob.http://www.runoob.com/svg/svg-tutorial.html
2、http://qiutianaimeili.com/html/page/2018/04/08sh1vbv35yr.html
数据可视化系列--svg入门基础（一）的更多相关文章
- 数据可视化-svg入门基础（二）
接上一篇:数据可视化-svg入门基础(一),基础一主要是介绍了svg概念,元素样式设置等. svg是(scalable vector graphic)伸缩矢量图像. 一.目录 (1)图形元素 (2)文 ...
- 数据可视化之powerBI入门（四）Power BI与PowerQuery、PowerPivot有什么关系
https://zhuanlan.zhihu.com/p/64146209 Power BI与PowerQuery.PowerPivot有什么关系? 刚开始学习PowerBI的时候,总是能碰到Powe ...
- 数据可视化之powerBI入门 （一）认识PowerBI
来自 https://zhuanlan.zhihu.com/p/64144024 Power BI是什么? Power BI是微软推出的数据分析和可视化工具,我们先来看看微软官方是怎么介绍的: Po ...
- [原创.数据可视化系列之五]韩国"萨德"系统防御图
自从7月8日美国和韩国共同宣布将在韩国部署萨德反导系统后,韩国国内对此事的巨大争议以及本地区一些国家的强烈不满情绪在持续发酵.“萨德”(THAAD)全称“末段高空区域防御系统”,是美国导弹防御局和美国 ...
- Python数据可视化系列-02-pyecharts可视化非常cool
pyecharts介绍 pyecharts网站 Pyecharts生成的图像,动态效果非常cool.在HTML上展示很是perfect.matplotlib用于科研,但是pyecharts用于展示和讲 ...
- [原创.数据可视化系列之八]使用等d3进行灰度图转伪彩色
对灰度图进行彩色化是数据可视化中常见的需求,使用d3在客户端比较容易实现,本文使用d3生成图片,并显示: 代码如下: 代码中首先下载数据文件,然后设定d3的色带信息,生成一个空白的canvas元素,并 ...
- 数据可视化之powerBI入门（二）体验PowerBI：零基础分分钟生成一份交互报表
https://zhuanlan.zhihu.com/p/64144595 体验PowerBI:零基础分分钟生成一份交互报表 首先我们准备一份数据,Excel格式 数据是从2006年到2015年10年 ...
- 数据可视化之powerBI入门（九）PowerBI数据建模：其实一点都不高深
https://zhuanlan.zhihu.com/p/64149834 数据建模并没有那么高深,你同样可以学会!这篇文章通过一个实例创建一个简单的数据建模,并引出两个重要的概念:度量值和DAX. ...
- [原创.数据可视化系列之三]使用Ol3加载大量点数据
不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI ...
随机推荐
- apache 301重定向到带www的二级域名
Options +FollowSymlinks RewriteEngine on rewritecond %{http_host} ^nlike.cn [nc] rewriterule ^(.*)$ ...
- css集合--表示有未读消息小红点的解决
只需要一个<i>标签,放在需要的文本后面即可 ex:<span>待解决问题<i></i><span> i{ display:block; b ...
- POJ - 1321 棋盘问题 【DFS】
题目链接 http://poj.org/problem?id=1321 思路 和N皇后问题类似 但是有一点不同的是 这个是只需要摆放K个棋子就可以了 所以 我们要做好 两个出口 并且要持续往下一层找 ...
- event loop笔记
注意四个对象: 主进程 执行栈 异步进程 任务队列 1.主进程读取js代码,形成对应的堆和执行栈(此时在同步环境) 2.当遇见异步任务,转交给异步进程进行处理 3.异步任务完成,将其推入任务队列 4. ...
- Contiki事件
一.事件相关数据结构 1.事件结构体 struct event_data { process_event_t ev; process_data_t data; struct process *p; } ...
- Java常用类Date、Calendar、SimpleDateFormat详解
Date类 java.util 包提供了 Date 类来封装当前的日期和时间,Date 类提供两个构造函数来实例化 Date 对象 第一个构造函数使用当前日期和时间来初始化对象 Date( ) 第 ...
- Spring注解实现原理
[Spring如何使用注解机制完成自动装配] Java实例构造时会调用默认父类无参构造方法,Spring正是利用了这一点,让"操作元素的代码"得以执行. [两种处理策略] ( ...
- (转)epoll非阻塞读写规则
EPOLL技术 在linux的网络编程中,很长的时间都在使用select来做事件触发.在linux新的内核中,有了一种替换它的机制,就是epoll.相比于select,epoll最大的好处在于它不会随 ...
- 网络编程学习笔记-linux常用的网络命令
网络参数设置命令 所有时刻如果你想要做好自己的网络参数设置,包括IP参数.路由参数和无线网络等,就得要了解下面这些相关的命令才行.其中Route及ip这两条命令是比较重要的.当然,比较早期的用法,我们 ...
- CardView以及RecycleView的一些问题
下面这些属性在listview的标签里有用,在recyclerView里没用. tools:listitem="@layout/list_single_answer_item_borrowe ...