SVG标准解读-几何图形-图案填充-核心要点

文章目录

1.SVG概述
2.svg标签
- 2.1.视图(viewport)和单位
- 2.2.坐标系统
- 2.3.viewBox
3.g标签
4.公共属性
5.几何图形
- 5.1 绘制直线
- 5.2 绘制矩形
- 5.3 绘制椭圆
- 5.4 绘制圆
- 5.5 多边形
- 5.6 折线
- 5.7 路径
- - 5.7.1 M指令和L指令
  - 5.7.2 H指令和V指令
  - 5.7.3 Q指令
  - 5.7.4 C指令
  - 5.7.5 T指令
  - 5.7.6 S指令
  - 5.7.7 A指令
6.defs标签
7.pattern标签
8.text标签
- 8.1.文字基本
- 8.2.tspan-文字分区
- 8.3.textPath-文字路径
9.作者答疑

1.SVG概述

SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

2.svg标签

2.1.视图(viewport)和单位

viewport指的是SVG图像的可视区域，一个SVG图像的viewport可以无限大，但是可视区域最大只能是屏幕的分辨率，通过svg元素中的width和height属性指定viewport的大小。在svg中默认的单位为px，能够写单位，也能够不写单位。在数值的后面可以指定单位，一般单位的名称如下所示：

名称	解释
em	默认的字体大小，通常一个字符的高度
ex	字符x的高度
px	像素
pt	点数，1/72英寸
pc	Picas，1/6英寸
cm	厘米
mm	毫秒
in	英寸

2.2.坐标系统

y轴右方x为正值，x轴下方y为正值。简而言之，x轴向右为正，y轴向下为正。下面展示一个svg源码，指定一个宽高为10cm的可视区域，绘制两个矩形。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="10cm" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g><rect x="50" y="100" width="50" height="50" style="stroke: #000000; fill: none;"/><rect x="100" y="100" width="50mm" height="50mm" style="stroke: #000000; fill: none;" />
</g>
</svg>

2.3.viewBox

可以使用viewBox来指定自己的用户坐标系统。如果你指定的用户坐标系统和viewport坐标系统的宽高比相同，它将会被拉伸填充满整个viewport区域。

viewBox = "<min-x> <min-y> <width> <height>"

min-y、min-y指定viewBox的左上顶点坐标，width和height指定viewBox的宽高，这里的四个值均不可为零或负值。通过该值和preserveAspectRatio属性的设置可以视图坐标和用户坐标的变换，想要深入了解的读者可以查阅相关资料，本文就介绍最常用的一种情况，就是viewBox和视图一致。

3.g标签

<g>标记就是’group’的简写，是用来分组用的，它能把多个元素放在一组里，对<g>标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承<g>标记上的所有属性。

4.公共属性

用于描述svg元素的样式显示属性，包括颜色，边框，线宽等属性。显示属性既可以在元素的属性中表达，也可以用CSS样式属性来表达。

元素属性：stroke=“red” stroke-width=“2”;
css属性：style=“stroke:red;stroke-width=2”

简单样式名称和值如下表所示：

参数	描述	值
fill	填充图形颜色	颜色，渐变
stroke	绘制图形的边框颜色	颜色，渐变
stroke-width	绘制图形的边框宽度	数值
stroke-linejoin	线条连接处样式	miter\|round\|bevel
stroke-linecap	线条首尾处样式	butt\|round\|square
transform	属性变换	translate\|scale\|rotate
transform-origin	变换中心	数值\|百分比\|位置

5.几何图形

在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素，虽然有时候受透明度影响，看起来不是被覆盖的，但是SVG确实是严格按照先后顺序来渲染的。默认线宽为stroke-width=“1” 。

注意：SVG是以XML定义的，所以是大小写敏感的。

5.1 绘制直线

绘制一条直线，从点(x1,y1)到(x2,y2)。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><line x1="40" y1="30" x2="200" y2="89" style="stroke:burlywood;stroke-width:1"></line>
</svg>

参数	是否必须	描述
x1	否	直线起点的x坐标，默认是0
y1	否	直线起点的y坐标，默认是0
x2	是	直线终点的x坐标
y2	是	直线终点的y坐标
style	否	显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

5.2 绘制矩形

绘制一个矩形或者圆角矩形，创建一个宽150，高100，圆角半径15的矩形。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><rect x="200" y="50" rx="15" ry="15" width="150" height="100" fill="azure" stroke="burlywood" stroke-width="2"></rect>
</svg>

参数	是否必须	描述
x	否	矩形左上角的x坐标，默认是0
y	否	矩形左上角的y坐标，默认是0
rx	否	矩形水平方向的圆角半径，默认是0
ry	否	矩形垂直方向的圆角半径，默认与rx相等
width	是	矩形宽度
height	是	矩形高度
style	否	显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

5.3 绘制椭圆

绘制一个椭圆，创建一个圆心在(cx,cy)，X轴半径为rx，Y轴半径为ry的椭圆。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><ellipse cx="250" cy="100" rx="50" ry="50" style="fill:azure;stroke:burlywood;stroke-width:2"></ellipse>
</svg>

参数	是否必须	描述
cx	否	圆心的x坐标，默认是0
cy	否	圆心的y坐标，默认是0
rx	是	圆心的X轴半径
ry	否	圆心的Y轴半径，默认为rx的值
style	否	显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

5.4 绘制圆

绘制一个圆，创建一个圆心在(cx,cy)，半径为r的圆。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

参数	是否必须	描述
cx	否	圆心的x坐标，默认是0
cy	否	圆心的y坐标，默认是0
r	是	圆的半径
style	否	显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

5.5 多边形

绘制一个又一系列点组成的多边形。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><polygon points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50" style="fill:azure;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></polygon>
</svg>

参数	是否必须	描述
points	是	曲线上点的坐标集合。图形的绘制是根据points的点坐标从左向右开始，如，对于points=“x1,y1 x2,y2 x3,y3 x4,y4”；图形从（x1,y1）开始，然后连接（x2,y2），再连接（x3,y3），再连接（x4,y4），最后首尾相连（连接起点x1，y1），最终形成闭合的图形。
style	否	显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

5.6 折线

绘制一个又一系列点组成的折线，与多边形的区别在于最后一点不连接起始点。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><polyline points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50" style="fill:azure;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></polygon>
</svg>

参数	是否必须	描述
points	是	曲线上点的坐标集合。图形的绘制是根据points的点坐标从左向右开始，如，对于points=“x1,y1 x2,y2 x3,y3 x4,y4”；图形从（x1,y1）开始，然后连接（x2,y2），再连接（x3,y3），再连接（x4,y4）。
style	否	显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性

5.7 路径

绘制复杂的多边形，一些列复杂的点组成的轨迹路径。

参数	是否必须	描述
d	是	绘制路径的指令以及参数。
style	否	显示样式，主要用于规定了绘制矩形的样式属性，详情参考显示属性。

d参数：大写的指令代表了绝对定位(以画布左上角为0点)，而小写则代表相对定位(以上一个点为0点)；

指令	参数	描述
M	x y	将当前的起始位置移动到x, y
L	x y	将路径当前结束位置与x, y相连接
H	x	将路径当前结束位置与x, 当前位置y相连接
V	y	将路径当前结束位置与当前位置y, x相连接
Q	cx cy px py	由一个控制点C与结束点P来控制二次贝塞尔曲线的绘制
C	cx1 cy1 cx2 cy2 px py	由两个控制点C1,C2和结束点来控制三次贝塞尔曲线的绘制
T	x y	由一个控制点(默认是上一个锚点的镜像)，和结束点来绘制光滑的二次贝塞尔曲线
S	cx1 cy1 px py	由两个控制点(默认是上一个锚点的镜像)和C1以及一个结束点P来绘制光滑的三次贝塞尔曲线
A	rx ry xa lf sf ex ey	由七个参数控制，详情看A指令
Z	无	结束绘制并连接起点

5.7.1 M指令和L指令

M指令表示起始点，L指令表示下一个点。绘制一条路径从(20,90)，经过(100,100)和(190,20)。如下所示：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><path d="M20,90 L30,10 L100,100 L190,20" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>
</svg>

5.7.2 H指令和V指令

H指令：连接到水平线上的某个点。V指令：连接到垂直线上的某个点。绘制一条路径从(20,90)，X轴坐标转到40，然后Y轴坐标转到120。如下所示：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><path d="M20,90 H40 V120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>
</svg>

5.7.3 Q指令

绘制一条二次贝塞尔曲线，二次贝塞尔曲线由一个起点、一个控制点和一个结束点来控制。M表明起始点，Q表明控制点和结束点。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><path d="M20,20 Q100,50,80,120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>
</svg>

5.7.4 C指令

绘制一条三次贝塞尔曲线，三次贝塞尔曲线由一个起点、两个控制点和一个结束点来控制。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><path d="M20,20 C100,10 200,50 80,120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>
</svg>

5.7.5 T指令

T指令是用于创建平滑的二次贝塞尔曲线，T指令只需规定结束点的位置，其控制点的位置应为其上一个控制点关于该结束点对称点，如果上一个控制点不存在，则最后一个锚点的位置即为控制点的位置

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><path d="M20,20 C100,10 200,50 80,120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>
</svg>

5.7.6 S指令

创建平滑的三次贝塞尔曲线，S指令需规定一个控制点和一个结束点，与T指令类似，其第一个控制点的位置应为其上一个控制点关于该结束点的对称点，如果上一个控制点不存在，则最后一个锚点的位置即为第一个控制点的位置；第二个控制点由S指令来规定。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><path d="M20,20 S100,30,70,40 S120,150,60,120" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>
</svg>

5.7.7 A指令

A指令用于绘制一段弧线，弧线实际是一个取自椭圆上两个点之间的弧，第一个点是路径最后一个锚点，第二个是结束点，弧线的细节由几个主要的参数控制。

语法： rx ry xa lf sf ex ey

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><path d="M130,130 A40,30,0,1,1,180,170" style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></path>
</svg>

参数	描述
rx	椭圆长轴半径
ry	椭圆短轴半径
xa	椭圆与x轴的夹角
lf	所取的弧大小，1取大弧，0取小弧
sf	绘制弧线的方向，1顺时针绘制，0逆时针绘制
ex	结束点的x坐标
ey	结束点的y坐标

6.defs标签

<defs>元素用于嵌入可在SVG映像内重用的定义。

7.pattern标签

使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复（或平铺）从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200"><defs><pattern id="s18" x="7" y="7" width="2" height="2" patternUnits="userSpaceOnUse">      <text x="0" y="2" font-size="1.5" font-family="Gulim" fill="#383431">18</text></pattern></defs><polygon points="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50" fill="url(#s18)"></polygon>
</svg>

名称	描述
patternUnits	用来定义图案效果区域的单位。它为模式内的各种长度值以及定义模式子区域的属性指定坐标系。如果patternUnits =“userSpaceOnUse”，则值表示使用’pattern’元素时当前用户坐标系中的值。如果patternUnits =“objectBoundingBox”，则值表示在使用’pattern’元素时就地引用元素上的边界框的分数或百分比的值。默认是objectBoundingBox。
patternContentUnits	用来定义模式内容区域的单位。它为模式内的各种长度值以及定义模式子区域的属性指定坐标系。如果patternContentUnits =“userSpaceOnUse”，则值表示使用’pattern’元素时当前用户坐标系中的值。如果patternContentUnits =“objectBoundingBox”，则值表示在使用’pattern’元素时就地引用元素上的边界框的分数或百分比值。默认是userSpaceOnUse。
x	图案边界框的x轴坐标。缺省值是0。相当于图案整体平移，在userSpaceOnUse下有效。
y	图案边界框的y轴坐标。缺省值是0。相当于图案整体平移，在userSpaceOnUse下有效。
width	图案边界框的宽度。缺省值是0。
height	图案边界框的高度。默认是0。
preserveAspectRatio	以保留原始内容的宽高比。
xlink:href	用于指另一种模式。

userSpaceOnUse：x、y、width和height表示的值都是当前用户坐标系统的值。也就是说，这些值没有缩放，都是绝对值。比如：将pattern中width、height设为80、60时，相当于width、height为0.2。
objectBoundingBox(默认值)：x、y、width和height的值都是占外框（包裹pattern的元素）的百分比。比如上面的例子中：将pattern中width、height设为1时，相当于pattern内的图案占rect的百分百，上面实例设置为0.2，相当于占rect的20%。

8.text标签

8.1.文字基本

(x,y)用于指定文字起始位置。准确的说，x指定文字最左侧坐标位置，y指定文字baseline所处y轴位置。
fill的默认为black，stroke默认为none。如果设置了stroke，字的边缘会再“描一层边”。如果设置了stroke并将fill设为none，呈现为空心字。css中影响字体样式的属性同样可以作用在上：font-size, font-weight, font-family, font-style, font-decoration, word-spacing, letter-spacing。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
<g id="coordinates" stroke="black" stroke-width="1"><path d="M10 0v90m0 -60h200m-200 30h200m-200 30h200"></path>
</g>
<g id="text"><text x="10" y="30">First Line</text><text x="10" y="60" stroke="black">Second Line</text><text x="10" y="90" stroke="blue" fill="none" stroke-width=".5">Third Line</text>
</g>
</svg>

8.2.tspan-文字分区

让部分文字呈现出不同的样式。允许被嵌入在内部来实现。同时还有两个属性dx,dy针对上一个tspan的偏移，(x,y)是将内的文字定位到其坐标系的(x,y)位置。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
<g id="coordinates" fill="none" stroke="black" stroke-width="1"><path d="M10 0v30h200m-190 0v30h190m-180 0v30h180"></path>
</g>
<g id="text" font-size="2rem"><text x="10" y="30">first line<tspan x="20" y="60">second line</tspan><tspan dx="2" dy="10">third line</tspan></text>
</g>
</svg>

8.3.textPath-文字路径

内嵌于中的元素，通过xlink:href属性指向一个元素，可以将其内部字符的baseline设置成指定的path。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
<defs><path id="circle" d="M70 20 a40 40 0 1 1 -1 0"></path>
</defs>
<text><textPath xlink:href="#circle">Text following a circle.............</textPath>
</text>

如下图所示：

9.作者答疑

如有疑问，请留言。