发表更新web16 分钟读完 (大约2437个字)

SVG详解

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

相关文章

SVG详解

https://pengtech.net/web/svg.html

作者

鹏叔

发布于

2023-08-08

更新于

2024-08-07

许可协议

#
评论
关注我

follow.it

友情链接

分类

标签

AI2
Almalinux2
Android4
Angular68
Ansible6
Astro3
CMS1
Comments2
English2
Fedora3
GORM1
Gemini AI1
Giscus2
Golang9
Helm3
Hexo8
IDEA3
Java4
Linux3
Macos2
MariaDB1
Material1
Matrix2
NAS1
NPM1
Nodejs13
OS1
Redhat2
Rust4
SEO2
SSL1
Seo1
TLS1
Ubuntu3
Vultr4
Windows8
angularjs2
backend1
blog1
bootstrap2
browser2
chartjs1
chrome3
css5
database14
design16
docker2
dovecot1
element-web1
email1
fedora2
firefox1
git2
gitlab11
golang5
gradle2
html4
java9
javascript63
k8s6
less1
life2
linux57
macOS2
marketing2
material design17
maven3
network12
nginx7
pagination1
pgadmin1
pnpm1
postfix1
product6
sass1
sentry2
shell2
source_control2
spring2
spring boot2
springboot1
strapi5
swagger1
tailwindcss3
tauri9
tmux1
typescript1
v2ray5
v2rayA3
v2rayN1
v2rayNG1
virualbox1
vmware9
vscode7
web61
webpack2
websocket2
windows2
wordpress2

最新文章

归档

×