环境准备

Editor:VS Code (插件:SVG by jock)

参考资料

MDN SVG 主题 https://developer.mozilla.org/zh-CN/docs/Web/SVG

上手

基本框架

1
2
3
4
5
6
7
8
9
10
11
12
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">

<rect width="100%" height="100%" fill="red" />

<circle cx="150" cy="100" r="80" fill="green" />

<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

文件格式:.svg

基本形状

矩形

1
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
参数 描述
x 矩形左上角的x位置
y 矩形左上角的y位置
width 矩形的宽度
height 矩形的高度
rx 圆角的x方位的半径
ry 圆角的y方位的半径

圆形

1
<circle cx="25" cy="75" r="20"/>
参数 描述
r 圆的半径
cx 圆心的x位置
cy 圆心的y位置

椭圆

1
<ellipse cx="75" cy="75" rx="20" ry="5"/>
参数 描述
rx 椭圆的x半径
ry 椭圆的y半径
cx 椭圆中心的x位置
cy 椭圆中心的y位置

线条

1
<line x1="10" x2="50" y1="110" y2="150"/>
参数 描述
x1 起点的x位置
y1 起点的y位置
x2 终点的x位置
y2 终点的y位置

折线

1
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

points 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字,一个是x坐标,一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样:“0 0, 1 1, 2 2”。

多边形

polygon 和折线很像,它们都是由连接一组点集的直线构成。不同的是,polygon 的路径在最后一个点处自动回到第一个点。需要注意的是,矩形也是一种多边形,如果需要更多灵活性的话,你也可以用多边形创建一个矩形。

1
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

路径

1
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>

d 一个点集数列以及其它关于如何绘制路径的信息。请阅读下文了解更多。

最常用的 path

<path> 元素是SVG基本形状中最强大的一个。 你可以用它创建线条, 曲线, 弧线等等。

直线命令

这有一个比较好的例子,不过我们没画任何东西,只是将画笔移动到路径的起点,所以我们不会看到任何图案。但是,我把我们移动到的点标注出来了,所以在下面的例子里会看到 (10,10) 坐标上有一个点。注意,如果只画path,这里什么都不会显示。(这段不太好理解,说明一下:为了更好地展示路径,下面的所有例子里,在用path绘制路径的同时,也会用circle标注路径上的点。)

1
2
3
4
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10"/>
<circle cx="10" cy="10" r="2" fill="red"/>
</svg>

HV 分别表示绘制水平和垂直线,大写的 HV 后面直接跟绝对距离,小写的 hv 后面直接跟相对距离

1
2
3
4
5
6
7
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
<circle cx="10" cy="10" r="2" fill="red"/>
<circle cx="90" cy="90" r="2" fill="red"/>
<circle cx="90" cy="10" r="2" fill="red"/>
<circle cx="10" cy="90" r="2" fill="red"/>
</svg>

曲线命令

贝塞尔曲线

三次贝塞尔曲线(两个控制点,一个终点)

1
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

x1 y1 是第一个控制点,x2 y2 是第二个控制点,x y 是终点

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">

<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
<path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
<path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
<path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
<path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
<path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

</svg>

二次贝塞尔曲线(一个控制点,一个终点)

1
Q x1 y1, x y (or q dx1 dy1, dx dy)

x1 y1 是控制点,x y 是终点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<svg width="200" height="400" xmlns="http://www.w3.org/2000/svg">
<style>
.gate:hover {fill:green !important;stroke:green !important; stroke-width:4;}
</style>
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="transparent" stroke="black" stroke-width="2"/>
<circle class="gate" cx="10" cy="80" r="3" fill="red" />
<path class="gate" d="M10 80 40 10" stroke="red" stroke-width="2" />
<circle class="gate" cx="40" cy="10" r="3" fill="red" />
<circle class="gate" cx="65" cy="10" r="3" fill="red" />
<path class="gate" d="M65 10 95 80" stroke="red" stroke-width="2" />
<circle class="gate" cx="95" cy="80" r="3" fill="red" />
<path class="gate" d="M95 80 125 150" stroke="blue" stroke-width="2"><title>line</title></path>
<circle class="gate" cx="125" cy="150" r="3" fill="blue" />
<circle class="gate" cx="150" cy="150" r="3" fill="red" />
<path class="gate" d="M150 150 180 80" stroke="red" stroke-width="2" />
<circle class="gate" cx="180" cy="80" r="3" fill="red" />
<path d="M10 300 Q 52.5 230 95 300 T 180 300" fill="transparent" stroke="black" stroke-width="2"/>
<circle class="gate" cx="10" cy="300" r="3" fill="red" />
<path class="gate" d="M10 300 52.5 230" stroke="red" stroke-width="2" />
<circle class="gate" cx="52.5" cy="230" r="3" fill="red" />
<path class="gate" d="M52.5 230 95 300" stroke="red" stroke-width="2" />
<circle class="gate" cx="95" cy="300" r="3" fill="red" />
<path class="gate" d="M95 300 137.5 370" stroke="blue" stroke-width="2"><title>line</title></path>
<circle class="gate" cx="137.5" cy="370" r="3" fill="blue" />
<path class="gate" d="M137.5 370 180 300" stroke="blue" stroke-width="2" />
<circle class="gate" cx="180" cy="300" r="3" fill="red" />
</svg>
line line
弧线

基本上,弧线可以视为圆形或椭圆形的一部分

1
2
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

rx ry 分别是 x,y 轴方向半径

x-axis-rotation 是与 x 轴夹角

large-arc-flag 决定弧线是大于还是小于 180 度,0表示小角度弧,1表示大角度弧

sweep-flag 是弧线方向,0 表示从起点到终点沿逆时针画弧,1 表示从起点到终点沿顺时针画弧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<style>
.changecolor:hover{fill-opacity:1}
</style>
<path d="M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5" class="changecolor"/>

<path d="M 110 215
A 30 50 0 0 0 162.55 162.45
M 172.55 152.45
A 30 50 -45 0 0 215.1 109.9" stroke="black" stroke-width="2" stroke-dasharray="5,5" fill="transparent"/>

<path d="M80 300
A 45 45 0 1 0 125 255
L 125 300 80 300
A 45 45 0 0 1 125 255
" fill="transparent" stroke="black" stroke-width="2"/>

</svg>

Fill 和 Stroke 属性

使用CSS

文本

变换

平移

旋转

斜切

缩放

成果

MM 32 MCU MindMotion SOC Solutions Table Title AAA AAAAAAAAAAAAAAA AAA AAAAAAAAAAAAA AAA AAAAAAAAA AAAAAAAAAAAAAAAAAAA nNRST PD0-OSC_IN PD1-OSC_OUT AAAA BBBB UART nNRST nNRST nNRST nNRST nNRST nNRST nNRST nNRST nNRST nNRST nNRST nNRST nNRST nNRST nNRST nNRST