数据可视化系列--svg入门基础（二）

hermanncain

2019-11-17

关注关注

接上一篇：数据可视化-svg入门基础（一），基础一主要是介绍了svg概念，元素样式设置等。

svg是（scalable vector graphic）伸缩矢量图像。

一、目录

（1）图形元素

（2）文字元素

（3）特殊元素

（4）滤镜元素

（5）渐变元素

二、图形元素

1、矩形

矩形使用<rect></rect>标签来进行绘制。

示例图：

数据可视化系列--svg入门基础（二）

代码：

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="yellow"></rect>
</svg>

参数说明：

（1）x：左上角x的坐标，距离左边的距离，相当于margin-left；

（2）y：左上角y的坐标，距离顶部的距离，相当于margin-top；

（3）width：矩形的宽度；

（4）height：矩形的高度；

（5）rx：圆角矩形，x轴方向的半径；

（6）ry：圆角矩形，y轴方向的半径

（7）fill：填充颜色

2、圆形

圆形使用<circle></circle>标签来进行绘制。

示例图：

数据可视化系列--svg入门基础（二）

实例代码：

<svg width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="yellow"></circle>
</svg>

参数说明：

（1）cx：圆形的x坐标；

（2）cy：圆心的y做标；

（3）r：半径

3、椭圆形

椭圆形使用标签<ellipse></ellipse>标签进行绘制，与圆形的绘制方法类似。

示例图：

数据可视化系列--svg入门基础（二）

实例代码如下：

<svg width="200" height="200">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow"></ellipse>
</svg>

参数说明：

cx：圆心的x坐标；

cy：圆心的y坐标；

rx：水平方向上的半径；

ry：垂直方向上的半径

4、线段

线段使用<line></line>标签进行绘制。

实例代码

<svg width="200" height="200">
  <line x1="10" y1="10" x2="90" y2="90" stroke="yellow"></line>
</svg>

参数说明：

x1：起点的x坐标；

y1：起点的y坐标；

x2：终点的x坐标；

y2：终点的y坐标

5、折线和多边形

折线和多边形的绘制方法类似，都是用points属性设置各个点的坐标。

折线使用标签<polyline></polyline>进行绘制，而多边形使用标签<polygon></polygon>进行绘制，且多边形会将起点和终点连接起来，折线不会。

示例图：

数据可视化系列--svg入门基础（二）

实例代码：

/* 图一 折线，不会将起点与终点连接 */
<svg width="200" height="200">
  <polyline points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polyline>
</svg>

/* 图二 多边形，将起点与终点连接 */
<svg width="200" height="200">
  <polygon points="50,10 80,90 10,30 90,30 20,90" stroke="#fb3" stroke-width="3" fill="transparent"></polygon>
</svg>

参数说明：

ponits：设置各个点的坐标，各组坐标之间使用空格分隔，x坐标和y坐标之间使用逗号分开。

6、路径

路径使用标签<path></path>进行绘制，使用d属性控制路径的类型和绘制。路径的功能最多，前面的所有图形都可以使用路径进行绘制。

d属性值的书写有两种，使用逗号分隔坐标，如：d="M10, 10"，也可以使用空格的形式，如：d="M 10 10"

注意：大写字母：表示坐标系中使用绝对坐标，小写字母：使用相对坐标（相对当前画笔所在的点）

6.1移动类参数

M：moveto，将画笔移动到指定坐标，如：d="M10,10"，表示将画笔移动到坐标(10,10)的位置。

示例图：

数据可视化系列--svg入门基础（二）

实例代码：

<svg width="200" height="200">
    <path d="M 10 10 L 180 180" stroke="#fb3" stroke-width="4" fill="transparent"></path>
   </svg>

6.2绘制直线类参数

L：lineto，绘制直线到指定坐标，如：d="M 10 10 L 80 80"，表示绘制一条起点坐标为(10,10)，终点坐标为(80,80)的直线。

H：horizontal lineto，绘制水平直线到指定坐标，如：d="M 10 10 H 100"，表示是绘制一条起点坐标为(10,10)，终点坐标为(100,10)的直线，注意：H只需要设置一个值，如果设置了多个值，则最后取最后一个值。

V：vertical，绘制垂直直线到指定坐标，如：d="M 10 10 V 100"，表示绘制一条起点坐标(10,10)，终点坐标为(10,100)的直线，注意：V只需要设置一个值，如果是多个值，则取最后一个值。

6.3绘制曲线类参数

C：curveto，绘制三次方贝塞尔曲线到终点坐标，中间经过两个控制点控制曲线的弧度，所以需要制定三个坐标来实现绘制曲线，如：d="M10,10 C40,5 40,140 100,100"

S：shorthand/smooth curveto，绘制平滑三次方贝塞尔曲线到终点坐标，与上一条三次方贝塞尔曲线相连，第一个控制点为上一条曲线第二个控制点的对称点，所以还需制定一个控制点坐标和终点坐标。如：d="M10,10 C40,5 40,140 100,100 S140,180 160,160"，如果不与贝塞尔曲线相连，即：d="M10,10 S140,180 160,160"，则绘制的图线接近于二次贝塞尔曲线

Q：quadratic Bezier curveto，绘制二次贝塞尔曲线到终点坐标，中间经过一个控制点控制曲线的弧度，如：d="M10,10 Q40,140 100,100"

T：shorthand/smooth quadratic Bezier curveto，绘制平湖二次贝塞尔曲线到终点坐标，与上一条二次贝塞尔曲线相连，控制点为上一条曲线控制点的对称点，所以还需指定一个终点坐标，如：d="M10,10 Q40,140 100,100 T160,160"，如果不与贝塞尔曲线相连，即：d="M10,10 T160,160"，则绘制的图线是一条直线。

示例图：

数据可视化系列--svg入门基础（二）

实例代码：

/* 图一 三次方贝塞尔曲线 */
<svg width="200" height="200">
  <path d="M10,10 C40,5 40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

/* 图二 三次方贝塞尔曲线，与上一条曲线相连 */
<svg width="200" height="200">
  <path d="M10,10 C40,5 40,140 100,100 S140,180 160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

/* 图三 二次贝塞尔曲线 */
<svg width="200" height="200">
  <path d="M10,10 Q40,140 100,100" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

/* 图四 二次方贝塞尔曲线，与上一条曲线相连 */
<svg width="200" height="200">
  <path d="M10,10 Q40,140 100,100 T160,160" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
</svg>

6.4绘制弧线类参数

A：el liptical arc，绘制椭圆曲线到指定坐标，需设置的参数有：

（1）rx，ry：x轴方向半径，y轴方向半径；

（2）x-axis-rotation：x轴与水平顺时针方向夹角；

（3）large-arc-flag：角度弧线大小(1：大，0：小)；

（4）sweep-flag：绘制方向(1：顺时针，0：逆时针)；

（5）x y：终点坐标

示例图：

数据可视化系列--svg入门基础（二）

实例代码：

<svg width="500" height="500">
    <path d="M50,50 A60 30 0 1,0 150,50 Z" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
  </svg>

分析：起点坐标(50,50)，终点坐标(150,50)，角度为0，角度弧线大小large-arc-flag为1，选择大弧度，根据分析，即选择红色的弧线，又绘制方向sweep-flag为0，为逆时针，即从起点沿着逆时针方向绘制到终点，所以是红色虎先位于下方。

数据可视化系列--svg入门基础（二）

注意：当 (起点与终点之间的直线距离／2) > (椭圆的水平半径) 时，角度为0的情况下，此时椭圆会等比放大，到相等为止。

6.5闭合类参数

Z：closepath，绘制直线将终点与起点连接

再次提醒：大写字母：表示坐标系中使用绝对坐标，小写字母：使用相对坐标（相对当前画笔所在的点）

三、文字元素

1、基础

在svg中使用<text></text>标签绘制文字。

参数说明：

x：文字的x坐标；

y：文字的y坐标；

dx：相对于当前位置x方向的距离；

dy：相对于当前位置的y方向的距离；

textLength：文字的显示长度；

rotate：旋转角度，也可以使用transform="rotate(30)"

示例图：

数据可视化系列--svg入门基础（二）

实例代码：

<svg width="200" height="200">
  <text x="10" y="10" dx="10" dy="10" textLength="100" rotate="20">示例文字</text>
</svg>

2、文本路径

如果要实现文字沿着路径进行排列，可使用<textPath></textPath>标签来实现。需要提前定义好路径path，并指定id，textPath使用xlink:href定义文字要匹配的路径。

示例图：

数据可视化系列--svg入门基础（二）

实例代码：

<svg width="600" height="600">
        <path id="textPath1" d="M100,100 C140,50 140,240 200,200 S240,280 360,360" stroke="#fb3" stroke-width="4px" fill="transparent"></path>
        <text x="10" y="10" dx="-10" dy="-10" rotate="20">
          <textPath xlink:href="#textPath1" textLength="300">
            很扭曲的测试示例文字
          </textPath>
        </text>
      </svg>

四、特殊元素

1、克隆元素use

use标签用来克隆其他元素，克隆后的元素不能修改样式。示例图：

数据可视化系列--svg入门基础（二）

示例代码：

<svg>
  <rect id="rect1"
        x="10" y="10" width="100" height="100"
        stroke="#5588aa" stroke-width="5"
        fill="transparent"
  ></rect>
  <use x="20" y="20" xlink:href="#rect1"></use>
  </svg>

参数说明：

x：相对被克隆元素x轴偏移量；

y：相对被克隆元素y轴偏移量；

xlink:href：指向被克隆元素的ID

2、模板元素symbol

symbol标签用定义模版，需要结合use标签使用，模版在未被使用之前，不会展示在页面上。模版内部可包含多个元素

示例代码：

<svg>
  <symbol id="template1">
    <rect x="10" y="10" width="100" height="100"
          stroke="#5588aa" stroke-width="5"
          fill="transparent"
    ></rect>
  </symbol>
  <use x="20" y="20" xlink:href="#template1"></use>
  </svg>

3、组元素g

group的简写，用来创建分组，组内所有的元素都会继承g的属性，可以嵌套使用，也可以和use标签结合使用。另外可使用transform属性定义控制整个组的位置。

示例代码：

<svg>
  <g stroke="#5588aa" stroke-width="5" fill="transparent">
    <rect x="10" y="10" width="100" height="100"></rect>
    <rect x="120" y="120" width="100" height="100"></rect>
  </g>
</svg>

g标签内部的两个矩形，都会继承g标签的样式。

4、clipPath裁剪元素

lipPath元素主要用来剪裁元素，clipPath元素定义范围外的内容将不会被展示。另外要注意写在<clipPath></clipPath>标签内部的元素不会被显示，clipPath标签需要放在defs标签内。其他元素在引用clipPath元素时，需要使用clip-path="url(#ID)"。

示例代码：

<svg height="200" width="200">
    <defs>
      <clipPath id="clip">
        <rect width="100" height="100"></rect>
      </clipPath>
    </defs>
    <circle cx="90" cy="90" r="90" clip-path="url(#clip)" stroke="none" fill="yellow" />
  </svg>

分析图：

数据可视化系列--svg入门基础（二）

最终效果图：

数据可视化系列--svg入门基础（二）

【谢谢关注和阅读，后续新的文章首发：sau交流学习社区：https://www.mwcxs.top/】

svg 数据可视化

数据可视化系列--svg入门基础（二）

一、目录

二、图形元素

1、矩形

2、圆形

3、椭圆形

4、线段

5、折线和多边形

6、路径

6.1移动类参数

6.2绘制直线类参数

6.3绘制曲线类参数

6.4绘制弧线类参数

6.5闭合类参数

三、文字元素

1、基础

2、文本路径

四、特殊元素

1、克隆元素use

2、模板元素symbol

3、组元素g

4、clipPath裁剪元素

相关推荐