SVG详解

发表于 更新于 分类于 阅读次数： 本文字数： 22k 阅读时长 ≈ 20 分钟

1. 前言

SVG 是一种 XML 语言，类似 XHTML，可以用来绘制矢量图形，英文全称是Scalable Vector Graphics 可缩放矢量图, 是W3C的一项建议. 基于像素的图像, 如果被放大会看到明显的失真, 而svg是基于形状描述的, svg图像无论放大多少倍都不会失真.

svg标签是SVG图像的容器.

语法格式

1
<svg> </svg>

svg有很多属性和子标签.

2. 使用SVG绘制矩形, 圆形, 椭圆形

  • 矩形 rect
  • 圆形 circle
  • 椭圆形 ellipse
  • 线条 line
  • 多条线 polyline
  • 多边形 polygon
  • 路径 path

2.1. 绘制矩形rect

rect是rectangle的缩写

语法

1
<rect />

属性:

  • width: 定义矩形的宽度.
  • height: 定义矩形的高度.
  • fill: 定义矩形的填充颜色.
  • stroke-width: 定义了矩形的边框宽度.
  • stroke: 定义矩形边框的颜色.
  • fill-opacity: 定义填充颜色的透明度.
  • stroke-opacity: 定义描边颜色的透明度.
  • x: 横坐标
  • y: 纵坐标
  • rx: 定义圆角x轴上的半径(用于绘制圆角矩形)
  • ry: 定义圆角y轴上的半径(用于绘制圆角矩形)

说明: 其中fill, stroke-width, stroke, fill-opacity, stroke-opacity是很多种图形上都有的属性.

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG demo</title>
</head>
<body>
    <svg width="400" height="400">
        <rect width="300" height="100" fill="blue" stroke-width="3" stroke="black">

        </rect>
    </svg>

</body>
</html>

绘制一个带透明度的矩形

1
2
3
4
5
6
7

<svg width="400" height="400">
    <rect width="200" height="200" fill="blue" x="50" y="50" fill-opacity="0.5" stroke-width="3" stroke="black" stroke-opacity="0.5">

    </rect>
</svg>

绘制圆角矩形

1
2
3
4
5
6
7
8


<svg width="400" height="400">
    <rect width="200" height="200" rx="25" ry="25" fill="blue" x="50" y="50" fill-opacity="0.5" stroke-width="3" stroke="black" stroke-opacity="0.5">

    </rect>
</svg>

2.2. 绘制圆形

语法

1
2
3

<circle></circle>

属性:

  • cx: 定义圆形中心的x坐标
  • cy: 定义圆形中心的y坐标
  • r: 定义圆形的半径
  • fill: 定义圆形的填充颜色.
  • stroke-width: 定义了圆形的边框宽度.
  • stroke: 定义圆形边框的颜色.
  • fill-opacity: 定义填充颜色的透明度.
  • stroke-opacity: 定义描边颜色的透明度.

示例:

绘制一个圆形

1
2
3
4
5
6
7
8

<svg width="100" height="100">
    <circle cx="50" cy="50" r="25" fill="blue" fill-opacity="0.5" stroke-width="3" stroke="black" stroke-opacity="0.5">

    </circle>
</svg>


2.3. 绘制椭圆形

绘制椭圆形使用ellipse标签

语法:

1
<ellipse />

属性:

  • cx: 定义椭圆形中心的x坐标
  • cy: 定义椭圆形中心的y坐标
  • rx: 定义椭圆形的水平半径
  • ry: 定义椭圆形的垂直半径
  • fill: 定义椭圆形的填充颜色.
  • stroke-width: 定义了椭圆形的边框宽度.
  • stroke: 定义椭圆形边框的颜色.
  • fill-opacity: 定义填充颜色的透明度.
  • stroke-opacity: 定义描边颜色的透明度.

示例:

绘制一个椭圆形

1
2
3
4
5
6
7

<svg width="200" height="200">
    <ellipse cx="100" cy="100" rx="80" ry="50" fill="blue" fill-opacity="0.5" stroke-width="3" stroke="black" stroke-opacity="0.5">

    </ellipse>
</svg>

绘制三个堆叠的椭圆

1
2
3
4
5
6
7

<svg width="200" height="200">
    <ellipse cx="100" cy="80" rx="80" ry="20" fill="blue" stroke-width="3" stroke="black" stroke-opacity="0.5" />
    <ellipse cx="100" cy="110" rx="80" ry="20" fill="purple" stroke-width="3" stroke="black" stroke-opacity="0.5" />
    <ellipse cx="100" cy="140" rx="80" ry="20" fill="lime"  stroke-width="3" stroke="black" stroke-opacity="0.5" />
</svg>

2.4. 绘制线条

语法:

1
2
3

<line />

属性:

  • x1: 定义直线起点的x轴坐标
  • y1: 定义直线起点的y轴坐标
  • x2: 定义直线末端的x轴坐标
  • y2: 定义直线末端的y轴坐标
  • stroke-width: 定义了直线的宽度.
  • stroke: 定义直线的颜色.
  • stroke-opacity: 定义直线颜色的透明度.

坐标的原点始终在画布的左上角

示例:

绘制一条直线

1
2
3
4
5
6
7

<svg width="200" height="200">
    <line x1="50" y1="50" x2="180" y2="180" stroke-width="3" stroke="blue">

    </line>
</svg>

2.5. 绘制多边形

绘制多边形使用polygon标签

语法:

1
2
3

<polygon />

它用于创建至少包含三条边的多边形.

属性:

  • points: 定义多边形顶点坐标. 例如: points=”220,20 250,190, 160,210”
    x坐标与y坐标之间用逗号隔开, 顶点之间用空格隔开. 绘制过程中, 从起点依照顺序连线, 最后回到起点形成的封闭图形即为多边形.

示例:

绘制一个三角形

1
2
3
4
5
6
7

<svg width="300" height="300">
    <polygon points="220,20 250,190, 160,210" stroke-width="3">

    </polygon>
</svg>

绘制一个四边形

1
2
3
4
5
6
7

<svg width="300" height="300">
    <polygon points="220,20 250,190, 160,210 150,10" stroke-width="3">

    </polygon>
</svg>

绘制五角星

1
2
3
4
5
6
7

<svg width="500" height="210">
    <polygon points="100,10 40,198, 198,78 10,78 160,198" fill="lime" stroke-width="3">

    </polygon>
</svg>

2.6. 绘制折线

绘制多线条使用polyline标签

语法:

1
2
3

<polyline />

属性:

  • points: 折线端点坐标

示例:

绘制一条折线

1
2
3
4
5
6
<svg width="500" height="210">
    <polyline points="100,10 120,20, 150,130" stroke-width="5" stroke="red" fill="none">

    </polyline>
</svg>

注意:线条的颜色使用stroke属性定义, 不要有填充即fill=”none”, 否则其绘制出来的图形类似多边形

3. svg绘制文本

在svg里面绘制文本使用text标签.

语法:

1
<text> content </text>

属性:

  • x: 定义文本起始未知的x轴坐标
  • y: 定义文本起始未知的y轴坐标
  • font-size: 定义文本字体大小
  • text-archor: 定义文本的对齐方式 (start| middle| end)

示例:

绘制一段文本

1
2
3
4
5
6
7

<svg width="500" height="310">
    <text x="15" y="15" stroke-width="1" stroke="red">
this is the content
    </text>
</svg>

旋转文本

1
2
3
4
5
6
7

<svg width="500" height="310">
    <text x="0" y="15" stroke-width="1" stroke="red" transform="rotate(30 20,40)">
        this is the content
    </text>
</svg>

绘制多行文本

1
2
3
4
5
6
7
8
9

<svg width="500" height="310">
    <text x="0" y="15" stroke-width="1" stroke="red">
        this is the content
        <tspan x="0" y="40" > first line  </tspan>
        <tspan  x="0" y="80" > second line  </tspan>
    </text>
</svg>

带超链接的文本

1
2
3
4
5
6
7
8
9

<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="310">
    <a xlink:href="https://philoenglish.com" target="_blank">
        <text x="0" y="15" stroke-width="1" stroke="blue">
            this is the content
        </text>
    </a>
</svg>

4. SVG绘制路径

使用path标签来绘制路径.

语法:

1
2
3

<path />

属性:

  • d: 绘制路径的命令, 是draw的缩写.
    • M命令: 是move to的缩写, 命令后接起始坐标 例如 M150 0
    • L命令: 是line to的缩写, 从上一个命令的结束点绘制一条直线到坐标位置 例如l75 100

注意: 命令字母的大小写含义是不同的, 大写字母表示绝对定位, 小写字母表示相对定位, 绝对定位相对于屏幕坐标原点的位置, 相对定位相对于上一个命令结束点的位置.

示例:

使用path画一个三角形

1
2
3
4
5

<svg width="200" height="200">
           <path d="M150 0 l20 20 l-40 80" stroke-width="2"  fill="red"></path>
       </svg>

绘制一个复杂的叠加图形

在该示例中我们将绘制一个三角形的示意图, 文字标注顶点.

首先在svg容器中画三个顶点.

1
2
3
4
5
6
7
8
9

<svg width="450" height="400">
        <g fill="black">
            <circle cx="100" cy="350" r="3"/>
            <circle cx="250" cy="50" r="3"/>
            <circle cx="400" cy="350" r="3"/>
        </g>
</svg>

然后给顶点表示文字

1
2
3
4
5
6
7
8
9
10
11
12
13

<svg width="450" height="400">
<g fill="black">
    <circle cx="100" cy="350" r="3"/>
    <circle cx="250" cy="50" r="3"/>
    <circle cx="400" cy="350" r="3"/>
</g>
<g fill="black" font-size="24">
    <text x="100" y="350"  text-anchor="end" >A </text>
    <text x="250" y="50"  text-anchor="middle">B </text>
    <text x="400" y="350" text-anchor="start">C </text>
</g>
</svg>

然后使用path划线的方法画出三角形的边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<svg width="450" height="400">
        <g fill="black">
            <circle cx="100" cy="350" r="3"/>
            <circle cx="250" cy="50" r="3"/>
            <circle cx="400" cy="350" r="3"/>
        </g>
        <g fill="black" font-size="24">
            <text x="100" y="350"  text-anchor="end" >A </text>
            <text x="250" y="50"  text-anchor="middle">B </text>
            <text x="400" y="350" text-anchor="start">C </text>
        </g>
        <g stroke="black" stroke-width="2">
            <path d="M100 350 L250 50" ></path>
            <path d="M250 50 L400 350"></path>
            <path d="M400 350 L100 350"></path>
        </g>
</svg>

说明: 在本来中我们使用g标签(group标签)将画点, 连线, 标记分组到一起, 并使用group标签定义其子元素的公共属性.

5. svg描边属性

描边属性

1
2
3
4
<path stroke="" /> <!-- 笔画属性 -->
<path stroke-width="" /> <!-- 笔画宽度属性 -->
<path stroke-linecap="" />  <!-- 笔画笔帽属性 -->
<path stroke-dasharray="" />  <!-- 虚线笔画属性 -->

stroke属性示例, 画三条不同颜色的线:

1
2
3
4
5
6
7
8
9

<svg width="450" height="400">
    <g stroke-width="2">
        <path stroke="black" d="M100 50 l200 0" ></path>
        <path stroke="blue" d="M100 100 l200 0"></path>
        <path stroke="green" d="M100 150 l200 0"></path>
    </g>
</svg>

stroke-width示例:

画三条不同粗细的线条.

1
2
3
4
5
6
7
<svg width="450" height="400">
    <g>
        <path stroke="black" stroke-width="2" d="M100 50 l200 0" ></path>
        <path stroke="blue" stroke-width="4" d="M100 100 l200 0"></path>
        <path stroke="green" stroke-width="6" d="M100 150 l200 0"></path>
    </g>
</svg>

stroke-linecap示例:

画三条不同线帽的线条.

1
2
3
4
5
6
7
8
9

<svg width="450" height="400">
        <g stroke="black">
            <path  stroke-width="6" stroke-linecap="butt" d="M100 50 l200 0" ></path>
            <path  stroke-width="6" stroke-linecap="round" d="M100 100 l200 0"></path>
            <path  stroke-width="6" stroke-linecap="square" d="M100 150 l200 0"></path>
        </g>
    </svg>

stroke-dasharray示例:

绘制三条样式不同的虚线

1
2
3
4
5
6
7
8
9

<svg width="450" height="400">
        <g stroke="black">
            <path  stroke-width="6" stroke-dasharray="5,5" d="M100 50 l200 0" ></path>
            <path  stroke-width="6" stroke-dasharray="10,10" d="M100 100 l200 0"></path>
            <path  stroke-width="6" stroke-dasharray="20,10,5,5,5,10" d="M100 150 l200 0"></path>
        </g>
    </svg>

6. SVG模糊和阴影效果

给svg图形添加模糊效果需要使用到filter属性.

语法:

1
2
3
<defs>
    <filter id="xxx"></filter>
</defs>

filter元素是在defs(definitions的简写形式)中定义的, 需要为filter指定id属性以便调用方使用该filter效果

示例:

高斯滤镜效果

7. svg自适应

前面我们讲过SVG是可缩放的矢量图, 如果您动手试验过上面的一些例子, 您会发现以上示例都是不可缩放的.

原因在于我们给SVG定义了固定的高度和宽度, 例如width="400" height="400", 这往往是不适合的. 如果在制造svg时就固定它的尺寸. 在使用时会很不方便, 而且损失了SVG可缩放的优势.

在大多数情况下. SVG的大小在使用时才能确定. 那么我们在制造SVG时怎样给予它高度和宽度呢. 此时我们可以使用百分比定义SVG的尺寸, 例如width="100%" height="100%". 这样定义的SVG就可以通过调整包裹它的容器例如div上尺寸乘以SVG定义的百分比来确定svg最终的尺寸.

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div style="height: 400px; width: 400Px; background-color:red"> 
        <svg width="100%" height="auto" viewBox="0 0 137 137" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fill-rule="evenodd">
            <path d="M55.56 128.42a3.57 3.57 0 0 1-3.53-4.21c.03-.16 2.81-16.26-1.86-25.98-2.9-6.02-6.09-7.1-11.86-9.07-2.96-1-6.32-2.15-10.16-4.21-6.43-3.46-9.3-9.67-14.62-14.14C6.35 64.78-5.12 58.74 2.7 47.08c3.32-4.95 9.79-7.45 14.39-7.68a15 15 0 0 1 .73-.02c3.46 0 6.3 1.23 8.58 2.21 1.24.54 2.41 1.04 3.3 1.17.26.04.55.06.86.06.75 0 1.58-.1 2.46-.22 1.05-.14 2.22-.29 3.47-.29.88 0 1.7.07 2.5.23 1.25.23 2.54.47 3.65.47.46 0 .85-.04 1.18-.13.71-.17 1.46-.4 2.19-.64 1.35-.42 2.74-.85 4.29-1.12a11.69 11.69 0 0 1 3.67-.04c-3.42-2.46-6.18-5.5-5.1-9.09 1.29-4.32 6.91-4.82 11.04-4.82 2.1 0 4.53.15 7.23.46.52-4.97.67-13.19.67-13.27a3.6 3.6 0 0 1 2.13-3.21c.47-.21 4.91-2.08 13.6-2.08l2 .03c9.94.32 16.55 2.3 17.27 2.52.68.2 7.3 2.18 15.78 7.36 8.52 5.22 11.6 9.78 11.91 10.28.75 1.16.76 2.67.02 3.84-.5.79-4.58 7.32-6.75 11.51a53.62 53.62 0 0 1 8.14 4.94c1.42 1.09 5.74 4.4 4.49 8.61-1.06 3.55-5.04 4.52-8.7 4.76 1.75 4.74 1.65 9.3-.34 13.36l-.28.55c-1.01 2.05-1.12 2.26-.76 3.83.3 1.33.78 2.68 1.28 4.1.54 1.56 1.1 3.16 1.5 4.89l.26.95.02.08c.3 1.06.81 2.85 1.19 4.4.6 2.4 1.2 4.9-.94 6.5-.4.3-10.27 7.5-32.83 10.21-20.61 2.48-38.93 15.8-39.11 15.93-.63.46-1.36.7-2.13.7" fill="#FFFFFE"/>
            <path d="M94.06 39.45c9.6 2.86 18.12 6.08 24.27 9a32.64 32.64 0 0 1 1.86-4.69c2.25-4.54 7.3-12.57 7.3-12.57s-2.72-4.23-10.77-9.16c-8.39-5.12-14.96-6.98-14.96-6.98s-6.51-2.06-16.34-2.37c-9.43-.3-14.03 1.74-14.03 1.74s-.17 9.48-.8 14.52c-.21 1.77-.59 3.42-.98 4.82 6.65.98 15.23 2.93 24.45 5.69" fill="#322549"/>
            <path d="M132.97 57.14c-1.28 4.27-20.38 2.33-42.65-4.33-22.28-6.66-39.3-15.52-38.02-19.8 1.27-4.27 20.37-2.33 42.65 4.33 22.27 6.66 39.3 15.52 38.02 19.8" fill="#322549"/>
            <path d="M121.36 54.91c-.72 2.42-14.43.45-30.6-4.4-16.19-4.83-28.72-10.7-28-13.11.71-2.41 14.42-.45 30.6 4.39s28.72 10.71 28 13.12" fill="#322549"/>
            <path d="M64.58 37.85c-.54.23-1.06.49-1.56.8-2.73 1.72-4.12 4.6-5.8 7.22-2.09-.94-4.01-1.62-6.32-1.22-2.14.37-4.15 1.19-6.2 1.7-2.03.52-4.28.1-6.37-.3-3.2-.6-6.07.7-9.15.25-3.44-.49-7.02-3.57-11.9-3.33-4.15.22-9.23 2.57-11.6 6.1-2.28 3.4-2.18 11.1 2.82 12.21 2.2.5 3.8-.16 5.23 1.92 4.73 6.83 8.68 14.6 16.12 18.6 10.94 5.87 18.27 3.94 23.54 14.88 5.27 10.95 2.17 28.16 2.17 28.16s18.92-13.97 40.81-16.6c21.9-2.64 31.12-9.53 31.12-9.53.47-.35-1.73-7.56-1.88-8.26-.7-3.06-2.08-5.92-2.78-8.99-.7-3.04.02-4.12 1.31-6.76 2.28-4.64 1.09-9.59-1.4-13.89-2.25-3.9-5.7-7.3-9.94-8.94-7.53-2.9-10.14-3.41-10.14-3.41s-1.22-8.75-15.81-10.57c-5.42-.68-10.78-1.8-16.27-1.3-2 .18-4.11.48-6 1.26" fill="#322549"/>
            <path d="M10.3 60.03s1.22 6.5 2.43 6.5c1.22 0 1.9-6.5 1.9-6.5H10.3" fill="#322549"/>
            <path d="M17.03 49.9c-2.1.63-3.98.5-4.22-.3-.24-.8 1.26-1.96 3.35-2.59 2.1-.63 3.98-.5 4.22.3.24.8-1.26 1.96-3.35 2.59zm70.02 45.77c6.56-2.9 13.2-5.78 19.42-9.36 4.75-2.74 10.49-6.25 13.05-11.3 5.3-10.41-6.67-18.76-15.53-20.42-1.5-.28-12.81-1.72-13.23.85.41-2.54 3.22-3.68 4.56-5.64 2.12-3.07-.87-3.64-3.26-4.67-4.12-1.78-8.4-3.1-12.92-3.19-4.66-.08-8.55.45-12.05 3.88-.62.6-1.43 1.5-1.55 2.35-.35 2.51 4.67 3.29 6.1 2.4a28.4 28.4 0 0 1 10.78-3.73c2.48-.31 5.05-.44 7.46.32.65.21 1.35.46 1.91.85.06.04.48.45.52.45h-4.05s-2.43 3.82-8.1 5.44c-5.68 1.63-13.3-1.62-13.3-1.62s-5.56-2.64-10.58-1.99c-5.03.65-6.13 0-6.13 0v2.4s-2.43-1.63-5.27-2.4c-2.84-.77-6.9-2.67-11.96-1.84-5.07.84-6.09.18-10.75-1.84-4.66-2.01-9.68-1.43-12.57 3.68-2.89 5.12.81 8.4.81 8.4l4.22.11c.92-.06 1.84-.11 2.7-.1.29-1.77 1.12-5.6 3.08-6.55 2.56-1.24 1.36 3 1.63 5 .12.9.31 1.79.48 2.5 3.39 1.27 6.67 3.24 11.2 2.57 5.48-.82 11.36-4.61 16.63-1.7l.22.12c.51-1.15 1.76-3.67 3.03-4 1.66-.44.14 2.27-.13 3.7-.12.63-.2 1.26-.25 1.77.56.31 1.12.62 1.68.9.36-1.35 1.03-3.39 2.04-3.88 1.54-.74.57 2.21.59 3.66 0 .53.03 1.06.07 1.51 2.66 1.14 5.28 1.79 7.96 1.36 5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.5.2 5.88-.06 5.73-2.37.07 1.04.85 1.45.28 2.62-.43.9-1.45 1.45-2.35 1.75-2.72.94-4.85-.69-7.31-1.6-2.72-1.02-5.74-2.78-8.67-3.07-3.65-.37-8.52 2.06-13.38 1.25-4.87-.81-8.92-6.7-15.61-5.88-6.7.81-9.13 4.06-15 2.43-.91-.25-1.73-.52-2.49-.8-.05.2-.1.44-.14.72-.2 1.55.72 4.82-1.26 3.86-1.56-.76-2.2-4.6-2.4-6.2-2.23-1.01-4.22-1.83-7-1.83-.44 0-.85.02-1.25.05 1.63 2.74 5.84 9.4 10.89 14.15C32.7 80.27 39 80.46 39 80.46s-2.03-1.62-3.85-3.04c-1.83-1.42-4.46-5.92-4.46-5.92a64 64 0 0 0 10.94 7.34 501.7 501.7 0 0 0 13.59 6.9s-1.02-.2-3.45-.62c-2.43-.4-7.1-2.22-7.1-2.22s6.29 5.47 12.57 9.53c6.29 4.05 17.64 8.3 17.64 8.3s2.38-.74 12.17-5.06z" fill="#F5EA3C"/>
            <path d="M72.96 31.3l-.12.62c6.56 1.51 13.7 3.4 21.13 5.65a324.6 324.6 0 0 1 22.61 7.71l.27-.63c-6.13-2.82-13.79-8.7-22-11.18-7.98-2.4-15.38-1.11-21.9-2.17M75.52 50.67s2.3 1.77 5.24 1.11c2.95-.64 5.25-2.82 5.25-2.82s-1.73-.32-3.92-.17c-.1.37-.21.78-.36 1.12-.35.78-1.2 1.19-1.2 1.19s-.24-.37-.41-1.34a2.78 2.78 0 0 1-.04-.7c-2.56.53-4.56 1.6-4.56 1.6M119.74 81.8s-5.31 4.91-17.9 10.61c-13.44 6.1-27.48 10.92-41.07 16.7l-.79 7.28s10.23-5.9 24.97-9.23c14.74-3.35 24.76-5.37 29.67-6.42a32.9 32.9 0 0 0 8.66-3.22l-3.54-15.72" fill="#FFFFFE"/><path d="M17.03 49.9c-2.1.63-3.98.5-4.22-.3-.24-.8 1.26-1.96 3.35-2.59 2.1-.63 3.98-.5 4.22.3.24.8-1.26 1.96-3.35 2.59zm89.44 36.4c4.75-2.73 10.49-6.24 13.05-11.29 5.3-10.41-6.67-18.76-15.53-20.42-1.5-.28-12.81-1.72-13.23.85.41-2.54 3.22-3.68 4.56-5.64 2.12-3.07-.87-3.64-3.26-4.67-4.12-1.78-8.4-3.1-12.92-3.19-4.66-.08-8.55.45-12.05 3.88-.62.6-1.43 1.5-1.55 2.35-.35 2.51 4.67 3.29 6.1 2.4a28.4 28.4 0 0 1 10.78-3.73c2.48-.31 5.05-.44 7.46.32.65.21 1.35.46 1.91.85.06.04.48.45.52.45h-4.05s-2.43 3.82-8.1 5.44c-5.68 1.63-13.3-1.62-13.3-1.62s-5.56-2.64-10.58-1.99c-5.03.65-6.13 0-6.13 0v2.4s-2.43-1.63-5.27-2.4c-2.84-.77-6.9-2.67-11.96-1.84-5.07.84-6.09.18-10.75-1.84-4.66-2.01-9.68-1.43-12.57 3.68-2.89 5.12.81 8.4.81 8.4l4.22.11c.92-.06 1.84-.11 2.7-.1.29-1.77 1.12-5.6 3.08-6.55 2.56-1.24 1.36 3 1.63 5 .12.9.31 1.79.48 2.5 3.39 1.27 6.67 3.24 11.2 2.57 5.48-.82 11.36-4.61 16.63-1.7l.22.12c.51-1.15 1.76-3.67 3.03-4 1.66-.44.14 2.27-.13 3.7-.12.63-.2 1.26-.25 1.77.56.31 1.12.62 1.68.9.36-1.35 1.03-3.39 2.04-3.88 1.54-.74.57 2.21.59 3.66 0 .53.03 1.06.07 1.51 2.66 1.14 5.28 1.79 7.96 1.36 5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.22.17 2.86.12 4-.4 1.71-.79.68-1.98-.89-1.89a3.02 3.02 0 0 1 2.4-1.4c3.41-.23 4.58 4.4 5.71 6.81 1.7 3.61 1.35 7.59-.5 11.07-5.6 10.49-22.03 17.44-22.03 17.44s2.38-.75 12.17-5.07c6.56-2.9 13.2-5.78 19.42-9.36z" fill="#409144"/>
            <path d="M65.56 65.66c5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.02.14 3.38.06 4.73-.74l.44-.82c-1.63.37-5.75 1.02-7.92-1.01-2.75-2.58-4.64-4.2-11.54-3.26-5.73.8-9.33 1.01-14.3-1.4-.05.33-.08.65-.07.9 0 .54.03 1.07.07 1.52 2.66 1.14 5.28 1.79 7.96 1.36zm-9.92-4.83c-.43-.24-.87-.5-1.33-.8l-.66-.4a6.3 6.3 0 0 0-.18.7c-.12.64-.2 1.27-.25 1.78.56.31 1.12.62 1.68.9.17-.65.42-1.46.74-2.18zm-38.3-2.14c.09-.6.25-1.44.5-2.32-3.7-.64-7.19-.61-9.1-.53.5 1.81 1.67 2.85 1.67 2.85l4.22.11c.92-.06 1.84-.11 2.7-.1zm33.01 1.83l.22.12c.23-.52.62-1.33 1.1-2.09-5.17-2.49-8.23-1.34-12.39.25-4.82 1.86-8.34 2.23-15.58-.8a22 22 0 0 0-1.62-.6c.12.81.29 1.6.45 2.25 3.38 1.27 6.66 3.24 11.2 2.57 5.47-.82 11.35-4.61 16.62-1.7zM104 54.59c-1.25-.23-9.27-1.26-12.18-.13l-.18.07-.73.56a.92.92 0 0 0-.14.35c.01-.1.04-.19.06-.28L87.12 58s17.72-2.29 22.27 8.54c4.56 10.82-7.95 21.33-17.19 26.85 4.85-2.17 9.68-4.43 14.27-7.08 4.75-2.74 10.49-6.25 13.05-11.3 5.3-10.41-6.67-18.76-15.53-20.42zM69.9 50.92l-2.5-.45c.77.3 1.7.45 2.5.45zm.58 5.63c-2.59-1.2-5.03-3.69-6.46-5.33 1.7.52 2.83 1.06 2.83 1.06s7.63 3.24 13.3 1.62a16 16 0 0 0 1.97-.7l.05-.01c.16-.07.31-.13.48-.22l.06-.03c3.86-1.83 5.56-4.48 5.56-4.48h4.04s-1.34 4.69-7.24 7.48c-5.9 2.8-10.54 2.5-14.59.61z" fill="#317F3F"/>
            <path d="M85.43 96.38l.15-.07-.15.07M75 100.7l-.05.01.04-.01M75.14 100.65c-.02 0-.03 0-.04.02l.04-.02M75.36 100.57l-.07.02.07-.02M30 65.52c8.31.75 12.91-1.93 16.1-1.68 3.2.26 3.72 3.2 12.15 4.6 8.44 1.41 11.8-2.17 16.2.13 3.34 1.75 6.7 3.77 10.4 4.72 1.1.28 2.71.5 4.23.35 2-.19 3.86-.99 4.19-3.06.26-1.7-.93-2.5-1.35-3.77.19.89.73 1.63.28 2.55-.43.9-1.45 1.45-2.35 1.75-2.72.94-4.85-.69-7.31-1.6-2.72-1.02-5.74-2.78-8.67-3.07-3.65-.37-8.52 2.06-13.38 1.25-4.87-.81-8.92-6.7-15.61-5.88-6.7.81-9.13 4.06-15 2.43-.91-.25-1.73-.52-2.49-.8a6.51 6.51 0 0 0-.16 1.8c.9.1 1.82.2 2.77.28M23.6 61.82c-2.24-1.01-4.23-1.83-7-1.83-.45 0-.86.02-1.26.05.53.9 1.34 2.2 2.36 3.73 1.53.3 3.77.7 6.47 1.08-.3-1.14-.48-2.31-.57-3.03" fill="#E8B63D"/>
            <path d="M33 75.01c.5 1.28.6 2.5-.79 2.58-2.93.18-14.5-13.82-14.52-13.83a61.82 61.82 0 0 0 8.54 10.43C32.7 80.27 39 80.46 39 80.46s-2.03-1.62-3.85-3.04a13.13 13.13 0 0 1-2.15-2.4M41.63 78.84l1.31.69c-6.04-3.58-11.5-7.41-11.54-7.44a65.6 65.6 0 0 0 10.23 6.75M93.45 88.1a33.72 33.72 0 0 1-11.38 2.54c-9.15.3-20.75-2.87-28.85-5.89l2 .98s-1.02-.2-3.45-.6c-2.43-.4-7.1-2.23-7.1-2.23s6.29 5.47 12.57 9.53c6.29 4.05 17.64 8.3 17.64 8.3s11.54-4.88 18.57-12.64M76.52 100.13l-.15.06.15-.06M81.73 97.98l-.45.2.45-.2M76.05 100.31l-.12.05.11-.05M80.53 98.48l-.36.16.36-.16M84.72 96.7l-.82.35.82-.36M83.11 97.39l-.59.25.59-.25M77.1 99.9l-.18.07.17-.07M78.56 99.31l-.24.1.24-.1M79.49 98.92l-.31.14.3-.14" fill="#E8B63D"/>
            <path d="M66.83 52.6c-.07-2.58 1.23-4.7 2.92-4.76 1.7-.04 3.12 2 3.19 4.58.07 2.58-1.24 4.7-2.92 4.75-1.7.05-3.12-2-3.19-4.58zm17.56 45.22c-5.62-2.47-12.84-7.58-13.06-15.43-.2-6.76.32-19.85.48-23.37 1.88-.93 3.2-3.56 3.11-6.61-.1-3.79-2.31-6.8-4.93-6.72-2.62.07-4.66 3.2-4.55 6.98.1 3.73 2.25 6.7 4.81 6.71-.25 3.67-.84 17.21-.51 23.54.38 7.3 7.66 15.72 18.12 17.27 10.32 1.51 29.54 1.09 29.54 1.09l1.71-1.24S90 100.3 84.4 97.82z" fill="#322549"/>
          </g>
        </svg>
    </div>

但是使用百分比确定SVG的尺寸相较于固定尺寸会带来另外一个问题, 在使用固定尺寸例如width="400" height="400", 由于它的尺寸是固定的那么它的长宽比也是固定的比如1:1.

使用百分比后在实际绘制出的图形长宽比就变得不固定了, 例如我们给SVG设置尺寸为width="100%" height="400%", 而其实际尺寸还受到包裹它的容器尺寸影响, 假如假如我们将上例中的图形宽度调整到800px现在容器的尺寸是<div style="height: 400px; width: 800Px; background-color:red"> 那么SVG的实际尺寸就是高:400px宽800px这样它的实际长宽比就变成了’1:2’, 这意味这图形发生了变形, 就像拉面一样被拉长了,
可以想象一张瓜子脸被拉宽会变得多难看, 当然您不必发挥想象, 您可以将上例中的宽度调整到800px, 就知道本来一张完美的鳄鱼脸变形后有多难看了.

问题的原因出在SVG的高度和宽度是不确定的, 导致高和宽的比例不确定.

为了解决这个问题, SVG引入了preserveAspectRatio这个属性, 此属性就是让SVG缩放时保持比例, preserveAspectRatio的默认值为<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">

meet- 缩放SVG图形，直到它符合viewPort高度和宽度
xMidYMid- 将区域置于区域viewBox的中心viewPort, 当然该属性还有其它值, 例如

meet即是让SVG自适应包裹SVG容器的宽度, 要搞清楚它是如果工作的还需要了解viewPort和viewBox可以详细阅读Understand the SVG Viewbox

高度宽度缩放的比例由viewBox="0 0 100 100"定义, 如果我们想让SVG按1:1的比例缩放, 就可定义为viewBox="0 0 100 100", 如果我们希望按其它比例缩放可以调整viewBox参数.

viewBox的是个参数分别为:

x - 指定最小 x 坐标
y - 指定最小 y 坐标
width - 用户坐标/px 单位的宽度
height - 用户坐标/px 单位的高度

刚刚我们讲的是按比例缩放, 这在大多数使用场景下都是这样的, preserveAspectRatio的默认值也是按多少场景设置的. 但是按比例缩放还有问题就是, 由于SVG的尺寸和包裹它的容器尺寸不是100%匹配的, 这样在图片周围就会留下空白.

在某些应用场景平铺图像反而更合适, 此时我们可以将preserveAspectRatio设置为none, 即可平铺图片. 更多属性可以参考preserveAspectRatio的官方文档.

8. 参考文档

一小时讲完SVG

SVG introduction

Understanding SVG preserveAspectRatio