前端可视化SVG 学习知识点

Posted 努力挣钱的小鑫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端可视化SVG 学习知识点相关的知识，希望对你有一定的参考价值。

基本概念和语法

SVG 的定义和历史

SVG 是可缩放矢量图形（Scalable Vector Graphics）的缩写，它是一种用于描述二维矢量图形的 XML 标记语言。与传统的栅格图像不同，SVG 图像可以无限缩放而不会失真，同时也支持交互和动画等特性。

SVG 最早于 1999 年由 W3C 发布，用于在 Web 上展示矢量图形，并于 2001 年正式成为标准。在过去的二十多年中，SVG 经历了多次更新和改进，增加了更多的功能和特性，如动画、交互等，并逐渐得到广泛的应用。

SVG 2.0 于 2016 年 9 月 15 日成为 W3C 候选推荐标准，最新草案于 2020 年 5 月 26 日发布。

SVG 的优点和缺点

SVG 的优点包括：

  1. 矢量图形缩放不会失真（像素点数量不变而导致图像出现模糊、锯齿等），而光栅图形（PNG、JPG）缩放会导致失真。
    • 矢量图形：基于矢量的点、线、形状和数学公式来构建的图形，该图形是没有像素的，放大缩小是不会失真的。
    • 光栅图形：由像素点构建的图像——微小的彩色方块，大量像素点可以形成高清图像，比如照片。图像像素越多，质量越高。
  2. 其他优点：灵活（JS 和 CSS 操作）；支持动画；轻量（尺寸小）；可打印（不会失真）；利于 SEO（会被搜索引擎索引）；可压缩；易于编辑等。

SVG 的缺点包括：

  1. 不适和高清图片制作（非像素级渲染）；
  2. SVG 图像变得复杂时，加载会比较慢；
  3. 存在部分浏览器兼容问题。

SVG 的应用场景

  • SVG 非常适合显示矢量徽标（Logo）、图标（ICON）和其他几何设计。
  • SVG 适合应用在需适配多种尺寸的屏幕上展示，因为SVG的扩展性更好。
  • 当需要创建简单的动画时，SVG 是一种理想的格式。
    • SVG 可以与 JS 交互来制作线条动画、过渡和其他复杂的动画。
    • SVG 可以与 CSS 动画交互，也可以使用自己内置的 SMIL 动画。
  • SVG 也非常适合制作各种图表（条形图、折线图、饼图、散点图等等），以及大屏可视化页面开发。

SVG 的文件结构和语法规则

SVG 的文件结构和语法规则包括以下几点：

  1. 文件格式：SVG 文件是一种基于 XML 语法的文本文件，以 .svg 或 .svgz 为后缀名。其中，.svg 是未压缩的文本格式，而 .svgz 是经过压缩的二进制格式。
  2. XML声明：SVG文件必须以XML声明开始，指定XML版本和字符集。例如：
<?xml version="1.0" encoding="UTF-8"?>
  1. 命名空间：SVG使用命名空间来区分不同元素和属性的定义和作用（现代浏览器会默认添加）。SVG 默认命名空间为 "http://www.w3.org/2000/svg" ，可以通过 xmlns 属性来指定和扩展其他命名空间。例如：
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  1. 根元素 SVG 文件必须包含一个根元素 <svg>，表示图形容器的大小和属性。其中，width 和 height 属性指定画布的宽度和高度，viewBox 属性指定可视范围的位置和大小。
  2. 元素和属性 SVG 文件中包含多个元素和属性，用于描述和绘制图形。常见的元素包括 <rect>、<circle>、<line>、<path> 等，常见的属性包括 fill、stroke、stroke-width、transform 等。
  3. 嵌套和顺序 SVG 元素可以嵌套在其他元素中，形成复杂的图形结构。元素的顺序和层次决定了它们的显示顺序和遮挡关系。

图形绘制基础

SVG 坐标系和单位

SVG 使用的坐标系统（网格系统）和 Canvas 的差不多（笛卡尔坐标系）。坐标系是以左上角为 (0,0) 坐标原点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。

SVG 坐标系统，在没有明确指定单位时，默认以像素为单位，我们也可以手动指明坐标系的单位。

SVG 坐标系分为视口坐标系和用户坐标系：

视口坐标系（视口-viewport）：视口坐标系是在视口上建立的坐标系，原点在视口左上角的点(0, 0)，x轴正向向右，y轴正向下。

用户坐标系（视图框-viewBox）：用户坐标系是建立在 SVG 视口上的坐标系。该坐标系最初与视口坐标系相同——它的原点位于视口的左上角。使用 viewBox 属性，可以修改初始用户坐标系，使其不再与视口坐标系相同。

SVG 常见形状和元素

常见的 SVG 形状包括：矩形（rect）、圆形（circle）、椭圆形（ellipse）、线段（line）、折线（polyline）、多边形（polygon）

常见的 SVG 元素还包括：

  • path：路径
  • image：图片
  • text、tspan：文字
  • g 、defs、use、symbols：图形组合和复用

SVG 路径和路径命令

在 SVG 中，可以使用路径 <path> 来描述复杂的图形。路径由一系列的路径命令组成，常用的路径命令包括：M（移动到）、L（画直线）、Z（关闭路径）、H（水平线）、V（垂直线）、C（贝塞尔曲线）等。

SVG 填充和描边效果

使用属性 fill（填充） 和 stroke（描边），其中描边属性中 stroke-dasharray（将虚线类型应用在边框上）和 stroke-dashoffset（指定在dasharray模式下路径的偏移量）是 SVG 路径动画的应用原理。

填充和描边也能使用 css 来进行控制，其 css 样式优先级为：

内联的 style > defs 中的 style > 外部 / head 内部 > 属性 fill

SVG 渐变和滤镜效果

SVG 渐变有两种类型：线性渐变和径向渐变

线性渐变使用 linearGradient 和 stop 元素，例如：

<linearGradient id="gradient1">
  <stop offset="0%" stop-color="red"></stop>
  <stop offset="50%" stop-color="green"></stop>
  <stop offset="100%" stop-color="blue"></stop>
</linearGradient>

滤镜效果通过在 defs 中定义，比如定义一个高斯模糊效果：

   <defs>
	<!-- 高斯模糊效果 -->
	<filter id="blurFilter">
	  <feGaussianBlur stdDeviation="8"></feGaussianBlur>
	</filter>
  </defs>

SVG 的形变操作

SVG 的形变支持平移（translate）、旋转（rotate）等，注意：形变会修改坐标系，SVG 渲染是先形变修改了坐标系后，根据新坐标系再设置元素 xy 坐标。

SVG 的描边动画

原理为 stroke-dasharray（描边虚线） 和 stroke-dashoffset（虚线偏移量） 属性的设置。将描边设置为虚线，接着将描边偏移到不可见处，通过动画让描边慢慢变为可见，这样就产生了动画效果了。例如：

#line 
/* 指定为虚线，300px大于或等于路径长度，虚线和偏移量大小会影响动画速度*/
	stroke-dasharray: 300px;
	/* 可见 */
	stroke-dashoffset: 300px;
	animation: line1Move 2s linear forwards;

@keyframes line1Move 
	100% 
	/* 可见 */
	stroke-dashoffset: 0px;

支持 stroke 属性的元素都能实现该动画，比如：path、ellipse、polyline 等。

动画和交互

SVG 动画的实现方式

  1. 用 JS 脚本实现：通过各种处理 SVG 的 JavaScript 库实现动画和交互效果。

  2. 用 CSS 样式实现：主要是使用 CSS3 的动画属性。

  3. 用 SMIL 实现：一种基于 SMIL 语言实现的 SVG 动画。

SMIL（Synchronized Multimedia Integration Language 同步多媒体集成语言，是W3C推荐的可扩展标记语言，用于描述多媒体演示）

SVG 的 SMIL 动画元素

SVG 中支持 SMIL 动画的元素：

  • set：经过特定时间间隔后，将属性设置为某个值（不是过度动画效果）。
  • animate：给某个属性创建过度动画效果。需将animate元素嵌套在要应用动画的元素内。
  • animateTransform：指定目标元素的形变（transform）属性，从而允许控制元素的平移、旋转、缩放或倾斜动画（类似于 CSS3 的形变）。
  • animateMotion：定义了一个元素如何沿着运动路径进行移动。

SVG 动画库-Snap.svg

Snap.svg 是一个专门用于处理 SVG 的 JavaScript 库 ( 类似jQuery )。

SVG 动画库-GSAP 动画库

GSAP 全称是（ GreenSock Animation Platform）GreenSock 动画平台。
GSAP 是一个强大的 JavaScript 动画库，可让开发人员轻松的制作各种复杂的动画。
与 Snap.svg 不一样，GSAP 无论是 HTML 元素、还是 SVG、或是 Vue、React 组件的动画，都可以满足你的需求。

Canvas和SVG的区别

摘要: 结合Echarts和D3，介绍Canvas和SVG各自的特点和区别

Canvas和SVG是html5支持的两种可视化技术。基于这两种技术，诞生了很多可视化工具。

Echarts是基于Canvas技术的可视化工具，底层封装了原生的JavaScript的绘图 API。我们很容易联想到另一个同样很优秀的web前端可视化库D3，D3是也最流行的可视化库之一，它被很多其他的表格插件所使用。D3底层基于SVG技术，与Canvas完全不一样，SVG的本质是一个XML 文档。

这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。它们都是有效的图形工具，可用来快速创建在网页中显示的轻型图形；它们都使用 JavaScript 和 HTML；它们都遵守万维网联合会 (W3C) 标准。

Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。它们很不相同，他们各有强项和弱点。

Canvas 通过JavaScript来绘制2D图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
这两种技术之间的主要区别是：

 Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas不支持鼠标键盘等事件。

 SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。Canvas和SVG在修改方式上还存在着不同。绘制Canvas对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。
现在对两种技术做对比归纳如下：
Canvas

1)依赖分辨率

2)不支持事件处理器

3)弱的文本渲染能力

4)能够以 .png 或 .jpg 格式保存结果图像

5)最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG

1)不依赖分辨率

2)支持事件处理器

3)最适合带有大型渲染区域的应用程序（比如谷歌地图）

4)复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

5)不适合游戏应用

以上对Echarts底层技术（Canvas）结合同类技术（SVG）做了简单的对比介绍，尽管从应用层的开发来说，我们可以不去关注原理，但我一直相信，了解技术的本质，更加有利于我们开发出强大且优秀的应用。

以上是关于前端可视化SVG 学习知识点的主要内容，如果未能解决你的问题，请参考以下文章

如何学习可视化？

Canvas和SVG的区别

初识 D3.js ：打造专属可视化

前端技术之SVG图片（图标）创建

ECharts数据可视化---你也可以如此炫酷

图形基础篇03 # 声明式图形系统：如何用SVG图形元素绘制可视化图表？