Marinerer
commented
3 years ago SVG入门教程
源自：https://www.ruanyifeng.com/blog/2018/08/svg.html
参考：MDN SVG教程
贝塞尔曲线 - 维基百科
[TOC]
概述
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
- SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。
- SVG 代码也可以写在一个独立文件中，然后用
<img>、<object>、<embed>、<iframe>等标签插入网页。- CSS 也可以使用 SVG 文件
- SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页
<html>
<head>SVG</head>
<body>
<!--直接插入svg代码-->
<svg width="300" height="180">
<circle cx="30" cy="50" r="25" />
</svg>
<!--独立文件插入-->
<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>
<!--base64-->
<img src="data:image/svg+xml;base64,[data]">
<!--css中引入-->
<style>
.logo {
background: url(icon.svg);
}
</style>
</body>
</html>语法
2.1 <svg>标签
SVG 代码都放在顶层标签<svg>之中。下面是一个例子。
<svg width="450" height="400" viewBox="0 0 450 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Label the points -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
Sorry, your browser does not support inline SVG.
</svg><svg>的width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。
如果只想展示 SVG 图像的一部分，就要指定viewBox属性。
<svg width="100" height="100" viewBox="50 50 50 50">
<circle id="mycircle" cx="50" cy="50" r="50" />
</svg><viewBox>属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。
注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。
如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。
2.2 <circle>圆形
<circle>标签代表圆形。
<svg width="300" height="180">
<circle cx="30" cy="50" r="25" />
<circle cx="90" cy="50" r="25" class="red" />
<circle cx="150" cy="50" r="25" class="fancy" />
</svg>上面的代码定义了三个圆。<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于<svg>画布的左上角原点。
class属性用来指定对应的 CSS 类。
.red {
fill: red;
}
.fancy {
fill: none;
stroke: black;
stroke-width: 3pt;
}SVG 的 CSS 属性与网页元素有所不同。
fill：填充色stroke：描边色stroke-width：边框宽度stroke-linecap：控制边框终点的形状
butt用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。square的效果差不多，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制。round表示边框的终点是圆角，圆角的半径也是由stroke-width控制的。stroke-linejoin：控制两条描边线段之间，用什么样式连接 ，比如尖角、圆弧、横切
miterroundbevel
2.3 <line>直线
<line>标签用来绘制直线。
<svg width="300" height="180">
<line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:5" />
</svg>上面代码中，<line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。
2.4 <polyline>折线
<polyline>标签用于绘制一根折线。
<svg width="300" height="180">
<polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg><polyline>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
2.5 <rect>矩形
<rect>标签用于绘制矩形。
<svg width="300" height="180">
<rect x="0" y="0" height="100" width="200" rx="10" ry="10" style="stroke: #70d5dd; fill: #dd524b" />
</svg><rect>的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。
rx 和 ry 属性可以创建圆角矩形，rx定义水平轴向的圆角半径，ry定义垂直轴向的圆角半径。
2.6 <ellipse>椭圆
<ellipse>标签用于绘制椭圆。
<svg width="300" height="180">
<ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/>
</svg><ellipse>的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。
2.7 <polygon>多边形
<polygon>标签用于绘制多边形。
<svg width="300" height="180">
<polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100,100 0,100 0,0"/>
</svg><polygon>的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。
2.8 <path>路径
<path>标签用于制路径。
<svg width="90" height="90">
<path d="
M 18,3
L 46,3
L 46,40
L 61,40
L 32,68
L 3,40
L 18,40
Z
" fill="blue" />
</svg>
<svg width="90" height="90">
<path d="
M60,30
a30,30 0 0,1 0,60
L0,90 0,30
a30,30 0 0,1 60,0" fill="red" />
</svg>
<svg width="90" height="90">
<path d="
M75,45
a30,30 0 0,1 -60,0
a30,30 0 0,1 60,0" stroke-width="1" stroke="blue" fill="none"/>
</svg><path>的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。
- M：移动到（moveto）
- L：画直线到（lineto）
- Z：闭合路径
- A：弧形
- C：贝塞尔曲线
Path相关指令：
先罗列一下有关于<path>元素相关的指令：
⚠️ 特别注意： 参数大写代表绝对坐标，小写代表与前一个坐标的相对座标。
| 指令 | 参数 | 描述 |
|---|---|---|
M |
x y |
起始点坐标x y （Move to） |
L |
x y |
从当前点的坐标画直线到指定点的 x y坐标 （Line to） |
H |
x |
从当前点的坐标画水平直线到指定的x轴坐标 （Horizontal line to） |
V |
y |
从当前点的座标画垂直直线到指定的y轴坐标 （Vertical line to） |
C |
x1 y1 x2 y2 x y |
从当前点的坐标画条贝塞尔曲线到指定点的x, y坐标，其中 x1 y1及x2, y2为控制点 （Curve） |
S |
x2 y2 x y |
从当前点的坐标画条反射的贝塞曲线到指定点的x, y坐标，其中x2, y2为反射的控制点（Smooth curve） |
Q |
x1 y1 x y |
从当前点的坐标画条反射二次贝塞曲线到指定点的x, y坐标，其中x1 y1为控制点（Quadratic Bézier curve） |
T |
x y |
从当前点的坐标画条反射二次贝塞曲线到指定点的x, y坐标，以前一个坐标为反射控制点（Smooth Quadratic Bézier curve） |
A |
rx ry x-axis-rotation large-arc-flag sweep-flag x y |
从当前点的坐标画个椭圆形到指定点的x, y坐标，其中rx, ry为椭圆形的x轴及y轴的半径，x-axis-rotation是弧线与x轴的旋转角度，large-arc-flag则设定1最大角度的弧线或是0最小角度的弧线，sweep-flag设定方向为1顺时针方向或0逆时针方向（Arc） |
Z |
关闭路径，将当前点坐标与第一个点的坐标连接起来（Closepath） |
2.9 <text>文本
<text>标签用于绘制文本。
<svg height="200" width="200">
<text x="10" y="20" style="fill:red;" font-weight="bold">Several lines:
<tspan x="24" y="45">First line.</tspan>
<tspan x="24" y="70">Second line.</tspan>
</text>
</svg><text>的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。
设置字体属性：
SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。
文本相关的元素：
tspan: 用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。tref: 允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用xlink:href属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。textPath: 该元素利用它的xlink:href属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走。
2.10 <use>标签
<use>标签用于复制一个形状。
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg><use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。另外，还可以指定width和height坐标。
2.11 <g>组
<g>标签用于将多个形状组成一个组（group），方便复用。
<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>2.12 <defs>标签
<defs>标签用于自定义形状，它内部的代码不会显示，仅供引用。
<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>2.13 <pattern>标签
<pattern>标签用于自定义一个形状，该形状可以被引用来平铺一个区域。
<svg width="500" height="500">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>上面代码中，<pattern>标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示<pattern>的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。
2.14 <image>图片
<image>标签用于插入图片文件。
<svg viewBox="0 0 100 100" width="100" height="100">
<image xlink:href="path/to/image.jpg"
width="50%" height="50%"/>
</svg>上面代码中，<image>的xlink:href属性表示图像的来源。
2.15 <animate>动画
<animate>标签用于产生动画效果。
<svg width="500px" height="500px">
<rect x="0" y="0" width="100" height="100" fill="#feac5e">
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
</rect>
</svg>上面代码中，矩形会不断移动，产生动画效果。
<animate>的属性含义如下。
- attributeName：发生动画效果的属性名。
- from：单次动画的初始值。
- to：单次动画的结束值。
- dur：单次动画的持续时间。
- repeatCount：动画的循环模式。
可以在多个属性上面定义动画。
<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />2.16 <animateTransform>变形动画
<animate>标签对 CSS 的transform属性不起作用，如果需要变形，就要使用<animateTransform>标签。
<svg width="500px" height="500px">
<rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
<animateTransform
attributeName="transform"
type="rotate"
begin="0s"
dur="10s"
from="0 200 200"
to="360 400 400"
repeatCount="indefinite"
/>
</rect>
</svg>上面代码中，<animateTransform>的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。
2.17 <animateMotion> 路径动画
<animateMotion> 元素可以定义一个元素沿着指定路径进行移动。
- 直线路径可以简单使用
from + to属性来指定起点和终点; - 使用
path指定复杂的路径； - 可以指定
<path>元素作为自己的路径
注意：为了复用一个已经定义的路径，就有必要使用一个
mpath元素嵌入到<animateMotion>中，而不是使用path。例如：
<mpath xlink:href="#cubicCurve"/>
<svg viewBox="0 0 200 100">
<path id="cubicCurve" fill="none" stroke="lightgrey" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">
<animateMotion
dur="10s"
repeatCount="indefinite"
path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z"
/>
</circle>
<rect x="0" y="0" width="10" height="10" fill="blue">
<animateMotion dur="20" repeatCount="indefinite">
<mpath xlink:href="#cubicCurve" />
</animateMotion>
</rect>
</svg>
<animateMotion>有个rotate属性，默认为0，元素在运动时不会旋转。当设置为auto时，元素对应的水平轴会始终与path路径保持水平，上图中加上rotate="auto"后的效果就像是车子开过山坡。
2.17 <linearGradient> 线性渐变
渐变有两种类型：
线性渐变和径向渐变。你必须给渐变内容指定一个id属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。
线性渐变沿着直线改变颜色，要插入一个线性渐变，你需要在SVG文件的defs元素内部，创建一个<linearGradient> 节点。
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<style type="text/css"><![CDATA[
#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: red; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: blue; }
]]></style>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>2.18 <radialGradient>径向渐变
<?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="RadialGradient1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
</svg>2.19 <clipPath>剪切
我们在一个圆形的基础上创建半圆形，在(100,100)创建一个圆形，半径是100。属性clip-path引用了一个带单个rect元素的<clipPath>元素。它内部的这个矩形将把画布的上半部分涂黑。注意，clipPath元素经常放在一个defs元素内。
<svg version="1.1">
<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>2.20 <mask>遮罩
遮罩的效果最令人印象深刻的是表现为一个渐变。如果你想要让一个元素淡出，你可以利用遮罩效果实现。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="green" />
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>2.21 <filter>滤镜
见 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Filter_effects
填充和描边
以下属性均可以直接用作CSS样式表内部的属性。
填充属性
fill : 设置SVG对象内部的填充色。可选值：颜色值 | none
fill-rule : 确定形状内部（即要填充的区域）的算法。 可选值：nonzero | evenodd
fill-opacity : 控制填充色的不透明度。 可选值：[0-1] | <percentage>
fill-rule比较难懂，详见 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule
描边属性
stroke: 描边颜色stroke-width: 描边的粗细stroke-linecap: 描边端点表现方式。可选值：butt | round | squarestroke-linejoin: 描边转角的表现方式。可选值：miter(尖角) | round(圆角) | bevel(斜角)-
stroke-miterlimit: 描边相交（锐角）的表现方式。默认大小是4stroke-miterlimit属性给miter-length和stroke-width之间的比率做了限制，它的比值范围应大于或等于1。当比值不在这个范围的时候， stroke 就会被转换成斜角（bevel）。 stroke-dasharray: 设置虚线描边。可选值为：none | <dasharray>stroke-dashoffset: 虚线的起始偏移。可选值为：<percentage> | <length>stroke-opacity: 描边透明度。默认是1
stroke-dasharray和stroke-dashoffset可用于实现描边动画。
🌰 心形路径动画例子：
<svg class="heart" width="90" height="90" viewBox="0 0 90 90">
<g class="heart-group">
<path class="heart-heartPath" stroke-width="2" d="M60,30 a30,30 0 0,1 0,60 L0,90 0,30 a30,30 0 0,1 60,0" />
</g>
</svg>
<style>
.heart {
margin: 90px;
overflow: visible;
&-group {
transform-origin: 0 90px;
transform: rotate(-45deg);
animation: group-anim 4s infinite;
}
&-heartPath {
stroke: #E21737;
fill: transparent;
stroke-dasharray: 308.522, 308.522;
stroke-dashoffset: 308.522;
animation: heart-anim 4s infinite;
}
}
@keyframes group-anim {
0%, 100% {
opacity: 0;
}
40%, 90% {
opacity: 1;
}
}
@keyframes heart-anim {
15% {
stroke-dashoffset: 308.522;
fill: transparent;
}
50% {
stroke-dashoffset: 0;
fill: transparent;
}
70%, 100% {
stroke-dashoffset: 0;
fill: #E21737;
}
}
</style>其他属性
vector-effect
vector-effect 指定绘制对象时要使用的矢量效果。矢量效果会先于其他任何合成操作（即滤镜，蒙版和剪辑）应用。
可选值：
none|non-scaling-stroke|non-scaling-size|non-rotation|fixed-position
最常用的就是non-scaling-stroke，指定描边宽度不随SVG本身尺寸变大而变大。
JavaScript 操作
3.1 DOM 操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。
<svg
id="mysvg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 600"
preserveAspectRatio="xMidYMid meet"
>
<circle id="mycircle" cx="400" cy="300" r="50" />
<svg>上面代码插入网页之后，就可以用 CSS 定制样式。
circle {
stroke-width: 5;
stroke: #f00;
fill: #ff0;
}
circle:hover {
stroke: #090;
fill: #fff;
}然后，可以用 JavaScript 代码操作 SVG。
var mycircle = document.getElementById('mycircle');
mycircle.addEventListener('click', function(e) {
console.log('circle clicked - enlarging');
mycircle.setAttribute('r', 60);
}, false);上面代码指定，如果点击图形，就改写circle元素的r属性。
3.2 获取 SVG DOM
使用<object>、<iframe>、<embed>标签插入 SVG 文件，可以获取 SVG DOM。
var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();注意，如果使用<img>标签插入 SVG 文件，就无法获取 SVG DOM。
3.3 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。
<div id="svg-container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" width="500" height="440"
>
<!-- svg code -->
</svg>
</div>使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。
var svgString = new XMLSerializer()
.serializeToString(document.querySelector('svg'));
文档
工具
教程
SVG基础教程
SVG 入门指南
svg从入门到图标绘制和组件封装
SVG中的Transform详解: 平移,旋转和缩放
SVG动画从入门到实战