SVG基础知识入门教程

WEB前端 HTML教程 2020年6月4日

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。SVG 是属于对图像的形状描述得文本文件，体积较小，放大不会失真，其他图像格式都是基于像素处理的。SVG 文件可以直接插入网页，成为 DOM 的一部分。也可以被img、object、embed、iframe等标签插入网页。SVG 文件也可以在JavaScript 和 CSS 中使用 。SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页。下面雷雪松给大家分享一下SVG基础知识入门教程。

1、SVG文档的元素基本可以分为以下几类：
图形元素：circle， ellipse， line， path， polygon， polyline， rect；
解释元素：desc， metadata， title；
结构元素：defs， g， svg， symbol， use；
渐变元素：linearGradient， radialGradient；
动画元素：animate， animateColor， animateMotion， animateTransform， set；
其他元素：a，altGlyphDef，clipPath，color-profile，cursor，filter，font，fontface，foreignObject，image，marker，mask，pattern，script，style，switch，text，view等。

2、SVG 常用元素讲解
a、tspan可以嵌套在的 text 标签中。
[cc lang=”html” escaped=”true”]<text x=”10″ y=”30″ style=”font-size:12pt;”>
Switch among
<tspan style=”font-style:italic”>italic</tspan>, normal,
and <tspan style=”font-weight:bold”>bold</tspan> text.
</text>[/cc]

b、textPath让文字可以按照一定的路径任意排放。
[cc lang=”html” escaped=”true”]<path id=”sharp-corner” d=”M 30 110 100 110 100 160″ style=”stroke: gray; fill: none;”/>
<text>
<textPath xlink:href=”#sharp-corner”>
Making a quick turn
</textPath>
</text>[/cc]

c、a为文本创建跳转链接
[cc lang=”html” escaped=”true”]<a xlink:href=”http://www.w3schools.com/svg/” target=”_blank”>
<text x=”0″ y=”15″ fill=”red”>I love SVG</text>
</a>[/cc]

d、rect用于绘制一个矩形。x表示横坐标，y表示纵坐标，width表示宽，height表示高，rx表示圆角的x方位的半径，ry表示圆角的y方位的半径。
[cc lang=”html” escaped=”true”]<rect x=”50″ y=”20″ width=”150″ height=”150″ rx=”10″ ry=”10″></react>[/cc]

e、circle(圆) 用于绘制一个圆圈。cx表示圆心横坐标，cy表示圆心纵坐标，r表示半径
[cc lang=”html” escaped=”true”]<circle cx=”100″ cy=”50″ r=”40″/>[/cc]

f、 ellipse(椭圆) 用于绘制椭圆。 cx表示圆心横坐标，cy表示圆心纵坐标，rx表示横向半径，ry表示纵向半径
[cc lang=”html” escaped=”true”]<ellipse cx=”300″ cy=”80″ rx=”100″ ry=”50″/>[/cc]

g、 line(直线) 用于绘制一条线。x1起点横坐标，y1表示起点纵坐标，x2表示终点横坐标，y2表示终点纵坐标
[cc lang=”html” escaped=”true”]<line x1=”0″ y1=”0″ x2=”200″ y2=”200″/>[/cc]

h、 polyline(折线) 用于绘制由连接的直线组成的首尾不闭合开放形状。
[cc lang=”html” escaped=”true”]<polyline points=”0,40 40,40 40,80 80,80 80,120 120,120 120,160″/>
<!– 0,40为第一个点 40,40为第二个点 40,80为第三个点 … –>[/cc]

i、path(路径) 用于绘制任何路径。path 中 d(data) 属性是用来定义相关线条数据，通常是以 M/m 为起始，代表的就是 move to 的意思。在 path 中，一共可以定义 10 种不同的图形。例如 M/m，L/l。 大家可以注意，每种标识符有两种书写方式，即，大小写。大写: 参照的是绝对坐标，即，SVG 的右上角；小写: 参照的相对坐标，即，前一个点的坐标。

j、viewBox指定坐标系原点的位置以及它的尺寸：x y width height。初始情况下，这个坐标系等同于初始化的视窗坐标系（由SVG图像的width和height确定），而且它的原点是在(0, 0)——即SVG的左上角。通过改变x和y这两个参数的值，可以调整原点的位置。改变width和height的值，可以改变坐标系统的尺寸。
[cc lang=”html” escaped=”true”]<svg width=”500″ height=”200″ viewBox=”0 0 50 20″ >
<rect x=”20″ y=”10″ width=”10″ height=”5″ style=”stroke: #000000; fill:none;”/>
</svg>
<!–x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度；viewport 为 [0,0] 到 [500,200]，viewbox 为 [0,0] 到 [50,20]–>[/cc]

k、use，该标签就是结合 g 标签一起使用，作用是可以复用 g 分组的样式。
[cc lang=”html” escaped=”true”]<g id=”Port”><circle style=”fill: inherit;” r=”10″/></g>
<use x=”50″ y=”30″ xlink:href=”#Port” class=”classA”/>[/cc]
use标签里面使用 xlink:href 加上指定 group 的 id，然后通过 x，y 属性指定副本放置的位置。不过，有一个限制，use 标签的 style 性，并不能覆盖点原始的 group style 样式。而且，有时候，我们只是想使用一些模板，即，图形并未被解析，只有代码存在。这时候，就需要使用 defs 来包裹了

l、defs用来保存一些代码，使其不会被浏览器解析。并且里面的分组可以被 use 属性的 style 样式所覆盖。
[cc lang=”html” escaped=”true”]<defs><g id=”Port”><circle style=”fill: inherit;” r=”10″/></g></defs>
<use x=”50″ y=”50″ xlink:href=”#Port” style=”fill: blue;”/>[/cc]

m、symbol元素用于定义图形模板(模板可以包含很多图形)，这个模板可以被use元素实例化。模板的功能与g元素很相似，都是提供一组图形对象，但是也有一些区别。与g元素不同的地方是：
1.symbol元素本身是不会被渲染的，只有symbol模板的实例会被渲染。
2.symbol元素可以拥有属性viewBox和preserveAspectRatio，这些允许symbol缩放图形元素。
从渲染角度来说，与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素；这些元素不会直接被渲染；他们的使用方式基本都是由use元素去实例化。正是这个原因，对于symbol来说，’display’属性是没有意义的。
[cc lang=”html” escaped=”true”]<symbol id=”sym01″ viewBox=”0 0 150 110″>
<circle cx=”50″ cy=”50″ r=”40″ stroke-width=”8″ stroke=”red” fill=”red”/>
<circle cx=”90″ cy=”60″ r=”40″ stroke-width=”8″ stroke=”green” fill=”white”/>
</symbol>
<use href=”#sym01″ x=”0″ y=”0″ width=”100″ height=”50″/>[/cc]

n、marker 一般是用来画箭头或者线段始末的标识图形。
[cc lang=”html” escaped=”true”]<defs>
<marker id=”Triangle” viewBox=”0 0 10 10″ refX=”1″ refY=”5″ markerWidth=”6″ markerHeight=”6″ orient=”auto”>
<path d=”M 0 0 L 10 5 L 0 10 z” />
</marker>
</defs>
<polyline points=”10,90 50,80 90,20″ fill=”none” stroke=”black”
stroke-width=”2″ marker-end=”url(#Triangle)” />[/cc]

o、stroke 定义元素的文本，线条或轮廓的颜色。stroke-wdth(边框宽度) 定义任何元素的文本，线条或轮廓的粗细。stroke-linecap 定义不同类型的结束行或任何路径的轮廓,即线条的端点样式。stroke-dasharray：定义 dash 和 gap 的长度。stroke-dashoffset: 用来设置 dasharray 定义其实 dash 线条开始的位置。值可以为 number || percentage。
[cc lang=”html” escaped=”true”]<svg width=”600px” height=”60px”>
<line x1=”0″ y1=”40″ x2=”600″ y2=”40″ stroke=”#000″ stroke-width=”3″ />
<line x1=”0″ y1=”20″ x2=”600″ y2=”20″ stroke=”#000″ stroke-width=”3″ stroke-dasharray=”10 4, 5 10, 1 1, 10 30″ stroke-dashoffst=”10″ />
</svg>[/cc]

来源：SVG基础知识入门教程