大数据可视化——SVG

一、SVG概述

1、图形分为位图和矢量图。

位图是基于颜色的描述，是由像素点组成的图像；

矢量图是基于数学矢量的描述，是由几何图组成的图像，与分辨率无关。

可缩放矢量图形，即SVG，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。

2、SVG中定义了几种形状元素，分别为：

矩形	圆形	椭圆	线条	折线	多边形	路径	文本
<rect>	<circle>	<ellipse>	<line>	<polyline>	<polygon>	<path>	<text>

这些元素中表示形状的参数各有不同，但也有一些共同的属性，如平移的方向和大小、颜色样式等。

二、SVG样式设置

步骤：1.添加画布SVG； 2.在画布SVG中添加形状的对象。

画布：width和height表示画布的大小；version表示SVG的版本号（可省略）；xmlns表示命名空间。

<svg width="300" height="300" version="1.1"  xmlns="http://www.w3.org/2000/svg"></svg>

 SVG的默认样式没有描边，并且是黑色填充。可以使用下面列举的一些常见的SVG样式/属性来美化你的可视化作品：

样式/属性	含义	备注
fill	填充	颜色值；设置对象内部的颜色
stroke	描边	颜色值；设置绘制对象线条的颜色
stroke-width	描边宽度	数字（通常以像素为单位）
opacity	不透明度	定义图形的整体透明度，数值在[0.0,1.0]之间， 0.0——完全透明；1.0——完全不透明
fill-opacity	不透明度	控制填充色的不透明度