SVG介绍

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

SVG是什么

可缩放矢量图形（Scalable Vector Graphics，SVG）基于 XML 标记语言，用于描述二维的矢量图形。

svg不同于canvas，这个格式提供的是矢量图而非点阵图，因此不会出现失真的情况，同时在数据可视化、复杂的动画方面比较有优势。

SVG环境如何准备

• 浏览器中直接打开
• 以标签的方式直接内嵌在html中
• 作为CSS背景图或者img标签引入

SVG绘画

svg的绘画并不像canvas依赖于JS的API，我们可以直接通过书写xml格式的标签进行绘画。

画布属性

svg标签拥有width、height属性用来控制画布宽高，viewBox="x y w h"设置可视区域，xmlns和xmlns:xlink设置xml规范和命名空间

图形

• 基本图形

  • 圆形，cx、cy为圆心坐标，r为圆的半径

  • 矩形，x、y为起始点坐标，width、height为宽高，rx、ry为矩形圆角半径

  • 椭圆，cx、cy为圆心坐标，rx、ry设置xy轴半径

  • 线条，x1、y1设置起点，x2、y2设置终点

  • 折现（或线段集）points通过设置多个点的字符串确定连接点的坐标

    • <polyline points="0 0, 20 40, 70 80, 100 90, 200 30, 250 50"/>

  • 类似polyline，不过最后一个点会和第一个点连接。

• path

  • path拥有强大的自由度，可以绘制复杂的线条和图形，支持直线、矩形甚至贝塞尔曲线，通过d属性修改线条

  • 直线命令

    命令	作用
    M x y	提起画笔（不画线，仅改变下一次绘制起点）
    L x y	移动画笔，画线式的M
    H x	画一条横线
    V y	画一条竖线
    Z	闭合起点和终点

  • 曲线命令

    命令	作用
    Q x1 y1,x y	绘制二次贝塞尔曲线，x1 y1为终点，x y为控制点
    T x y	x、y为终点位置，通过前一个控制点推断出后一个控制点
    C x1 y1, x2 y2, x y	x、y为终点位置，x1、y1为曲线起始点的控制点，x2、y2为曲线终止的控制点。
    S x2 y2, x y	简化的三次贝塞尔曲线
    A rx ry x-axis-rotation large-arc-flag sweep-flag x y	rx、ry为两个轴向半径，x-axis-rotation为弧度在x轴的旋转角度，large-arc-flag为0表示劣弧（小角），否则为优弧，x、y为终点

    • 关于贝塞尔曲线，可以通过贝塞尔游戏等网站学习

轮廓和填充

• 填充

  属性	内容
  fill	none、合法的颜色表示（red、#66ccff、rgb()等）
  fill-opacity	填充透明度，用0~1的小数表示
  fill-rule	设置判断内部的算法（evenodd、nonzero）

• 轮廓

  属性	内容
  stroke	轮廓颜色
  stroke-width	轮廓宽度
  stroke-linecap	轮廓终点形状（miter、round、bevel）
  stroke-dasharray	虚线属性（实线长，虚线长，实线长。。。）
  stroke-opacity	轮廓透明度

动画

类似canvas动画，svg想要动态地变换，依然要借助JS或CSS，我们可以通过JS动态地修改svg标签的属性（尤其是path中的d属性）来创作动画。

当然，要想屏蔽复杂的底层，我们可以借助AI绘制svg图形，然后用GSAP工具进行动画的创作。