SVG基本介绍

SVG 是一种开放标准的矢量图形语言，即表示可缩放矢量图形（Scalable Vector Graphics）格式，是由万维网联盟（W3C）开发并进行维护的。
那 SVG 都有哪些优点呢？
由于 SVG 图像是矢量图像，可以无限缩小放大，所以 SVG 可以在任何分辨率的设备上高清显示，不需要再像以前一样输出各种 @2x 倍图来适配不同分辨率的屏幕。
而且有非常成熟的设计工具支持导出 SVG 的图形格式，比如，AI 或者是 Sketch 等设计软件都支持直接导出 SVG 的图形格式，非常方便。

基本示例

<svg x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 100">
  <rect x="10" y="5" fill="white" stroke="black" width="90" height="90"></rect>
  <circle cx="170" cy="50" r="45" fill="white" stroke="black"></circle>
  <line fill="none" stroke="black" x1="230" y1="6" x2="260" y2="95"></line>
</svg>

表现如下
图片说明

rect

rect用来定义矩形或者正方形，常用属性如下

x、y相对于svg元素定位
width、height矩形的宽和高
fill 填充形状的颜色
stroke 表示边框的颜色
rx,rx 设置菱角的弧度（做成圆角矩形使用），如果设置长方形宽度和长度相同就标识为一个圆
stroke-width：边框宽带
fill-opacity：矩形的透明度
stroke-opacity：边框的透明度

如果没有指定值，则它们的默认值是 fill:black，和 stroke:none 即表示没有描边。

circle

circle用来定义一个圆,常用属性如下

cx、cy定义圆心的坐标
r为圆的半径

可以用ellipse来定义矩形，只不过多了两个参数rx、ry分别是短轴长和长轴长

line

line表示一条直线，x1和y1为直线的起点，x2和y2表示线的终点。

viewBox

我们在不设置 viwebox 的时候，viewbox 整个范围就是 viewport 的大小，从上面的代码可以看到，viewBox 有4个参数需要设置，x、y、width、height。并且都是没有带单位的。

SVG组合与路径

g 标签即 group 组，它可以用来集合多个 SVG 元素
path元素，路径起始于 d 属性，即 data，也就是一条路径的绘图数据。d 一般是以一个 M 或者是 m（moveTo）为第一个值，即确定一个起点。
图片说明

实战描边动画

先来看三个与描边动画相关的属性

stroke 用来定义边框的颜色
stroke-dasharray：定义 dash 和 gap 的长度。它主要是通过使用 , 来分隔实线和间隔的值。其实就是用来实现 CSS 中边框虚线的效果。和 CSS 中的 dash 的效果一样。例如：stroke-dasharray="5, 5" 表示，按照实线为 5，间隔为 5 的排布重复下去。
stroke-dashoffset：用来设置 dasharray 定义 dash 线条开始的位置。值可以为 number || percentage。百分数是相对于 SVG 的 viewport。通常结合 dasharray 可以实现描边动画效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .checkmark__circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke-miterlimit: 10;
            stroke: #7ac142;
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }

        .checkmark {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: block;
            stroke-width: 2;
            stroke: #fff;
            stroke-miterlimit: 10;
            margin: 10% auto;
            box-shadow: inset 0px 0px 0px #7ac142;
            animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
        }

        .checkmark__check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
        }

        @keyframes stroke {
            100% {
                stroke-dashoffset: 0;
            }
        }

        @keyframes scale {

            0%,
            100% {
                transform: none;
            }

            50% {
                transform: scale3d(1.1, 1.1, 1);
            }
        }

        @keyframes fill {
            100% {
                box-shadow: inset 0px 0px 0px 30px #7ac142;
            }
        }
    </style>
</head>

<body>
    <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
        <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
        <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
    </svg>
</body>

</html>

SVG学习笔记---入门