HTML躬行记（1）——SVG

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

SVG作为一种图像格式，可以包含在<img>元素内（如下所示）或CSS样式中（例如background-image属性）。

一、坐标系统

1）视口

在SVG中，有一张无限大的画布，而画布区域被称为视口（viewport）。通过<svg>元素的width和height两个属性可定义视口的尺寸，视口的原点在其左上角。

而在视口中，还包含一个坐标系统，由viewBox属性控制。它能包含四个数值（以逗号或空格分隔），分别是用户坐标系统的最小横坐标（x轴）和纵坐标（y轴），以及宽和高。

下面的两个<svg>元素，第一个采用了默认的坐标系统，第二个声明了新的坐标系统，并且宽高比相同，如图1所示，第二个矩形缩小了。

图 1

接下来修改两个最小坐标（如图2所示），第一个<svg>元素声明的最小坐标为(20,20)，虽然矩形的坐标是(0,0)，但是比最小坐标要小，所以就会往左上角偏移；第二个<svg>元素声明了负数坐标，与前一个正好相反；在第三个<svg>元素中，修改了矩形的坐标，正好在左上角。

图 2

2）preserveAspectRatio属性

当viewBox属性中声明的尺寸与视图的宽高比不一致时，可以使用preserveAspectRatio属性指定图形的缩放比例和对齐方式，语法如下，默认值是“xMidYMid meet”。

preserveAspectRatio: <align> [<meetOrSlice>]

其中<align>的属性值由两个轴（x和y）以及三个位置（min、mid和max）组合而成，如表1所列。

表 1

值	说明
xMin	viewport与viewBox的左侧对齐
xMid	viewport与viewBox的x轴中点对齐
xMax	viewport与viewBox的右侧对齐
YMin	viewport与viewBox的顶部对齐
YMid	viewport与viewBox的y轴中点对齐
YMax	viewport与viewBox的底部对齐

在下面的示例中，由于三个<svg>元素宽高比是3:2，而viewBox的宽高比是3:1，因此矩形会等比缩小。对它们分别应用xMinYMin、xMidYMid和xMinYMax，效果如图3所示。

图 3

注意，因为宽度正好适配，所以对于x轴的对齐方式，效果都是相同的。

<meetOrSlice>可控制图形的适配或裁剪，可选的值如表2所列。

表 2

值	说明
meet	保留图形的宽高比，并且缩放viewBox以适应viewport
slice	保留图形的宽高比，并且放大viewBox以覆盖viewport

在下面的示例中，两个矩形的高度比视口要大，对它们分别应用meet和slice，效果如图4所示，第二个矩形将整个视口给填满了。

图 4

二、形状

SVG的基本形状包括线段（line）、矩形（rect）、圆形（circle）、椭圆（ellipse）、多边形（polygon）和折线（polyline）。

1）<line>

线段元素需要指定起止点的坐标，如下所示，效果如图5所示。

图 5

其中stroke和stroke-width是笔画属性，可指定笔画的颜色和宽度，相关属性如表3所列，部分属性的效果如图6所示。

表 3

值	说明
stroke	笔画颜色
stroke-dasharray	笔画的外观（实线、点线或虚线），由一系列逗号分隔的数字组成，表示长度和空隙长度
stroke-dashoffset	相对绘图起点的偏移值
stroke-linecap	描边的展现形状
stroke-linejoin	路径转角处的形状
stroke-miterlimit	斜接长度与线宽的最大比例
stroke-opacity	笔画不透明度，取值范围0~1，其中0表示透明
stroke-width	笔画宽度

图 6

2）<rect>

除了直角矩形之外，还可以声明圆角矩形，如下所示，效果如图7所示。

图 7

3）<circle>和<ellipse>

利用圆形，可非常便捷的画出圆环，效果如图8所示。将<circle>元素的stroke-dasharray声明为圆的周长（2πR），例如半径为50，周长就是314。如果为stroke-dashoffset属性定义一个值，就能得到圆环缺失一段的效果，从而就能模拟出圆环型的进度条了。

图 8

椭圆和圆形类似，只是需要声明两个方向的半径，如图9所示。

图 9

4）<polygon>

<polygon>可画出任意形状的封闭图形，例如平行四边形、梯形等。在points属性中，可声明各个点的坐标，每组坐标用逗号隔开，下面绘制了一个五角星，如图10所示。

图 10

5）<polyline>

折线不需要闭合，与<polygon>元素类似，也是由points属性绘制，如下所示，得到的折线如图11所示。

图 11

6）<path>

上述基本形状都可以由<path>元素来绘制，并且通过<path>元素还可绘制出不规则的图形，例如心形，如下所示。

其中d属性可声明一系列路径，包含多个指令，如表4所列。

表 4

指令	效果
M、m	移动到指定的坐标
L、l	绘制一条直线
H、h	绘制一条水平线
V、v	绘制一条垂直线
Z、z	关闭路径
Q、q	绘制一条二次贝塞尔曲线
T、t	绘制一条平滑的二次贝塞尔曲线
C、c	绘制一条三次贝塞尔曲线
S、s	绘制一条平滑的三次贝塞尔曲线
A、a	绘制弧形曲线

三、文档结构

1）内部样式

SVG允许在其内部嵌入<style>元素，如下所示，其中CDATA区段中的文本会被解析器忽略，但不影响渲染。

2）<g>

<g>元素相当于一个容器，能将其所有的子元素组合在一起。应用于<g>元素中的属性会被其子元素所继承，如下所示，两个圆的笔画颜色都是绿色，而宽度都是10，如图12所示。

图 12

3）<use>

<use>元素可引用其它图形，以及<g>元素，类似于复制黏贴的功能。在下面的示例中，通过<use>元素的xlink:href属性引用了id为ring的<g>元素，并且将<use>元素上声明的属性传给了<circle>元素。

注意，当给<use>元素定义坐标后，<circle>元素会与其相加计算出最终的坐标，如图13所示。

图 13

4）<defs>

可将需要复用的图形抽象到<defs>元素中，在其内部定义的图形不会直接呈现到页面中。在上面那个示例的基础上，将<g>元素整个放置到<defs>中，效果如图14所示，没有渲染<g>元素中的圆。

图 14

5）<symbol>

<symbol>提供了另一种组合图形的方式，但与<g>元素不同，它的图形不会呈现，并且它可以声明viewBox和preserveAspectRatio两个属性，如下所示。

6）<image>

<use>元素可以引用SVG文件的某个部分，而<image>元素可以引用整个SVG文件或栅格图像（如下所示），并且能控制引用文件的尺寸和preserveAspectRatio属性，效果如图15所示。

图 15

四、变形、图案和渐变

1）变形

transform属性定义了一系列图形元素变形的规则，包括位移（translate）、缩放（scale）、旋转（rotate）和倾斜（skew）。注意，与CSS3中的transform属性不同，SVG中的transform属性作用的对象是坐标系统，而不是元素本身。

translate()函数会接收两个参数，沿x轴和y轴位移坐标系统，如图16所示。

图 16

scale()函数也会接收两个参数（这点与CSS3中的scale()不同），沿x轴和y轴缩放坐标系统，如图17所示。

图 17

rotate()函数可接收三个参数，第一个是旋转角度，另外两个是原点坐标，也就是坐标系统按照该原点旋转，如图18所示，第三个矩形指定了原点。

图 18

倾斜分为两个函数：skewX()和skewY()，分别会沿着x轴和y轴倾斜，如图19所示。

图 19

2）图案

要创建一个图案，就得使用<pattern>元素包裹图形元素，再利用patternUnits属性确定平铺图案的方式。它有两个关键字可选，默认的objectBoundingBox会让<pattern>元素的尺寸以百分数或0~1之间的小数表示，参照对象分别是引用<pattern>的图形元素的宽和高。

以下面的图案为例，它的宽和高都是10%，参照的圆形的宽高都是200，计算出的实际值就都是20，效果如图20所示。

图 20

另一个userSpaceOnUse会让<pattern>元素的尺寸以绝对值表示，如下所示，因为<pattern>元素的宽高都为25，所以图案会有空白间隙，得到的效果如图21所示。

图 21

<pattern>元素还包含另一个patternContentUnits属性，用于处理图案内部的排列方式，它的两个关键字也是objectBoundingBox和userSpaceOnUse，后者是该属性的默认值。

objectBoundingBox会让<pattern>中的图形元素以小数定义，如下所示。三个属性值都是0.1（不能用百分数），参照的仍然是引用<pattern>的图形元素，计算得到的实际值都是20，效果如图22所示，每个图案只显示四分之一个圆。

图 22

3）渐变

<linearGradient>元素用于绘制线性渐变，其子元素<stop>可指定某处的色标（即渐变点），如下所示，在起点、中点和止点处声明了三种颜色，其中stop-opacity用于声明不透明度（取值范围0~1），1表示完全不透明，得到的效果如图23所示。

图 23

如果要改变线性渐变的方向，可通过修改起点和终点的坐标实现，例如沿垂直线渐变，代码如下，得到的效果如图24所示。

图 24

<linearGradient>元素还有一个spreadMethod属性，可指定在渐变范围之外的填充方式，它有三个值可选，如下所列。

（1）pad：默认值，用起点和终点的颜色填充。

（2）reflect：按终点到起点，起点到终点的方式重复填充。

（3）repeat：按起点到终点的方式重复填充。

下面用一个示例来演示spreadMethod属性，如图25所示，从左往右，spreadMethod属性的值依次是pad、reflect和repeat。

图 25

另外一种径向渐变由<radialGradient>元素控制，具体可参考官方文档。

五、文本

1）<text>

<text>元素用于处理SVG文件中的文本，在该元素中可修改字体样式，包括字体名称、大小、颜色、外观等。在下面的示例中，声明了四个<text>元素，并为它们添加了各自的样式，效果如图26所示。

图 26

2）对齐

在<text>元素中对齐文本得用text-anchor属性，它的对齐方式为起点（start）、居中（middle）和终点（end）。在下面的示例中，为了便于观察这三个关键字的行为，画了一条参考线，如图27所示。

图 27

SVG中的文本对齐与CSS中的略有不同，当起点对齐时，第一个字符会贴着参考线；当居中对齐时，文本的中间位置会被参考线贯穿；当终点对齐时，文本的最后一个字符会贴着参考线。

3）<tspan>

在<text>元素中，通过其子元素<tspan>可调整文本属性，从而实现一段文本呈现不同的效果，如下所示，这段文本为斜体，而<tspan>元素中的文本被加粗并且赋予了红色（如图28所示）。

图 28

4）长度
textLength属性用于定义文本的长度，lengthAdjust属性用于设置字符间距和字形，如下所示，默认值spacing只会控制字符间距，而spacingAndGlyphs还能控制字形，如图29所示。

图 29

5）文本路径

将文本放置在<textPath>元素中，就可让文本按任意的路径排列，而不是以往的水平或垂直排列。在下面的示例中，文本按一条螺旋曲线排列，如图30所示。

图 30

六、动画

1）<animate>

<animate>是一个动画元素，它可以包含在图形元素中，多个<animate>元素可以实现多重动画。例如将矩形先沿着水平方向，再沿着垂直方向位移，最后在位移结束后切换背景色的动画，代码如下所示，效果如图31。

图 31

<animate>元素包含多个动画属性，此处只使用了其中的几个，具体说明如下，其中fill="freeze"是指动画结束后保持最后的动作。

（1）attributeName：执行动画的属性。

（2）attributeType：属性类型，可选值包括XML和CSS。

（3）from：属性的起始值。

（4）to：属性的结束值。

（5）dur：动画持续时间。

（6）repeatCount：动画执行次数，可以是有限次的整数，也可以是无限次的indefinite。

（7）begin：动画开始时机，可以是秒数，也可以是某个动作，例如上面第一个动画结束后执行颜色的切换。

<set>元素是对<animate>元素的补充，可为那些不能过渡的属性提供动画，例如在某个时刻显示文本，如下所示，点击矩形可显示“change color”。

2）<animateTransform>

对于transform属性的动画，得用<animateTransform>元素完成。下面的示例演示了旋转矩形（如图32所示），其中type属性用于指定变形的动作，可选的值有translate、scale、rotate、skewX和skewY。

图 32

3）<animateMotion>

<animateMotion>元素可让图形沿着任意路径运动，无论是直线还是曲线，都能实现。在下面的示例中，橙色矩形会沿着S型曲线来回运动，如图33所示。

图 33

如果要让矩形始终沿着平行于曲线的方向运动，那么可以将rotate属性设为auto，如图34所示。

图 34

【参考资料】
SVG元素参考

[技術分享] 理解 SVG 中的 Viewport 和 ViewBox－拖曳與縮放功能實做（上）

理解SVG viewport,viewBox,preserveAspectRatio缩放

SVG图像的viewport和viewBox用于设置图像可见区域的大小

SVG：理解stroke-dasharray和stroke-dashoffset属性

SVG 研究之路 (16) - Stroke-miterlimit

如何使用SVG图案

SVG 研究之路 (26) - 有趣的 Patterns

正文

一、坐标系统

二、形状

三、文档结构

四、变形、图案和渐变

五、文本

六、动画

相关阅读

用html5商品展示页代码，html怎么做商品页面

html5按钮外边距离怎么调，html按钮位置调整

html页面转pdf，html页面转成pdf

html5按钮连接数据库，html点击按钮调用数据库

html5雷达动态扫描图，html画雷达图

html5主页设置中文，html怎么设置中文

html5有些什么特效，html效果特效

仿京东html模板，html仿京东页面

目录[+]