数据可视化系列--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

原文地址：https://www.cnblogs.com/chengxs/p/10887650.html

时间： 2024-10-11 07:34:14

数据可视化系列--svg入门基础（一）的相关文章

[原创.数据可视化系列之四]跨平台，多格式的等值线和等值面的生成

这些年做项目的时候,碰到等值面基本都是arcgis server来支撑的,通过构建GP服务,一般的都能满足做等值线和等值面的需求.可是突然有一天,我发现如果没有arcgis server 的话,我既然没法生成等值面等值线了.况且,还有许多别的要求: 没有arcgis server支持,arcgis server毕竟是很大一笔开销,个人基本无法负担: 跨平台,有的服务器是linux,有的是windows,看来,只能是java的类库了: 免费,生成等值线和等值面的程序不能有费用: 输出多种格式,既能

[原创.数据可视化系列之七]阿里竞赛作品技术展示

今年9月份,数据秀(dataxiu.com)团队参与阿里和国家公共气象服务中心主办,浙江大学和阿里云承办的“公益云图数据可视化创新大赛”. “公益云图数据可视化创新大赛”将融合开放气象.空气质量监测.企业排放和公共环境等领域的数据的,基于阿里云天池大数据平台开发一批关注环境公益的可视化技术,借助阿里云的计算能力及可视化工具,挖掘复杂异构多源数据之间的关联关系,以数据可视化的方式呈现给决策者和公众,共同促进环境治理和绿色产业创新. 数据秀团队开发的“公益云图”作品使用了美国国家环境预报中心GFS(

[原创.数据可视化系列之五]韩国&quot;萨德&quot;系统防御图

自从7月8日美国和韩国共同宣布将在韩国部署萨德反导系统后,韩国国内对此事的巨大争议以及本地区一些国家的强烈不满情绪在持续发酵.“萨德”(THAAD)全称“末段高空区域防御系统”,是美国导弹防御局和美国陆军隶下的陆基战区反导系统.韩国无视中.俄等地区国家的利益关切,执意将“萨德”引入韩国,其宣称的理由是出于保卫国家安全的考虑.但是“萨德”入韩不仅无益于韩国的安全,而且还将如同“冷战幽灵”一般威胁东北亚的和平与稳定. 现在,我们用数据可视化的方法来看看萨德的探测范围,对民用航空的影响和的防御范围,由

谈谈Python实战数据可视化之pygal模块(基础篇)

前沿 对于需要在尺寸不同的屏幕上显示的图表,请考虑使用Pygal来生成它们,因为它们将自动缩放,以适合观看者的屏幕,这样它们在任何设备上显示时都会很美观.接下来我会谈谈pygal模块生成线.直方图的基本用法,用书本骰子的案例来更深入了解pygal模块的使用,对于pygal其他图形的创建其实方法差不多,实际运用时需要制作哪种图形就去官网查询,官网有很多图形创建的示例代码,pygal画廊官网链接:http://www.pygal.org/如下方图(有图有代码,自己打一遍其实懂得也差不多了): pyg

[原创.数据可视化系列之三]使用Ol3加载大量点数据

不管是百度地图还是高德地图,都很难得见到在地图上加载大量点要素,比如同屏1000的,因为这样客户端性能会很低,尤其是IE系列的浏览器,简直是卡的要死.但有的时候,还真的需要,比如,我要加载全球的AQI的测站和数据,这些站点在全球有4000多个,如何加载这些点并提高,OL3的ImageVector是一个很好地选择,简单的说,就是把这些要素渲染到一张图上,这样提高性能.代码如下: //加载JSON数据    mainxiu.loaddata=function(options)    {       

[原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布

基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案. 很久之前用过skyline,使用CS居多,也可以在浏览器使用actviex插件显示:另外就是arcgis globe,我没看到在项目中用的.后来google有一个globe,算是差的比较远. 一直到有一天,看到nokia的地图,没错,就是那个做手机的nokia,他们做的那个一个here.com 的地图,能够看三维地图,使用webgl在浏

数据可视化-Matplotlib简易入门（一）

本节的内容来源:https://www.dataquest.io/mission/10/plotting-basics 本节的数据来源:https://archive.ics.uci.edu/ml/datasets/Forest+Fires 原始数据展示(这张表记录了某个公园的火灾情况,X和Y代表的是坐标位置,area代表的是烧毁面积) import pandas forest_fires = pandas.read_csv('forest_fires.csv') print(forest_fi

[原创.数据可视化系列之六]使用openlyaers进行公网地图剪切

进行地图开发的过程中,我一般使用天地图或者微软的地图作为地图,因为这两种地图的经纬度偏差最小,基本可以满足用户需求,比如: 不用说,都是全部地图,这也是最常用的一种方法. 但是用户说,我只看大连的地图,就要大连这一块.这样需要一个整个大连地区的面,使用这个面去切地图,结果就可以了,如下图: 这样的图有点类似自己的发布的图.切图代码原理openlayers 3例子参见: http://openlayers.org/en/latest/examples/layer-clipping.html?q=c

python数据可视化——matplotlib 用户手册入门：pyplot 画图

参考matplotlib官方指南: https://matplotlib.org/tutorials/introductory/pyplot.html#sphx-glr-tutorials-introductory-pyplot-py pyplot是常用的画图模块,功能非常强大,下面就来见识下它的能力吧 1.快速画出常见图形 2.使用关键字字符串作图 3.使用类别变量画图 4.创建多图 1 import matplotlib.pyplot as plt 2 %matplotlib inline