咖啡机（K.F.J）
咖啡机（K.F.J）

HTML躬行记（1）——SVG

　　是矢量图的根元素，通过xmlns属性声明命名空间，从而告诉用户代理标记名称属于哪个XML方言。在下面的示例中，为元素声明了宽度和高度（默认以像素为单位），其子元素可作为提示，在中可声明一段描述性纯文本，这两个元素都不会在页面中呈现。而是一个矩形，将被绘制到页面中。

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100">
  <title>SVG exampletitle>
  <desc>SVG contains a rectangledesc>
  <rect width="50" height="50" fill="#F60" />
svg>

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

<img src="demo.svg" />

一、坐标系统

1）视口

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

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

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100">
  <rect width="50" height="50" fill="#F60" />
svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
  <rect width="50" height="50" fill="#F60" />
svg>

HTML躬行记（1）——SVG_第1张图片

图 1

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="20 20 300 200">
  <rect width="50" height="50" fill="#F60" />
svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="-20 -20 300 200">
  <rect width="50" height="50" fill="#F60" />
svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="20 20 300 200">
  <rect width="50" height="50" fill="#F60" x="20" y="20" />
svg>

HTML躬行记（1）——SVG_第2张图片

图 2

2）preserveAspectRatio属性

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

preserveAspectRatio: <align> [<meetOrSlice>]

　　其中的属性值由两个轴（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的底部对齐

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMinYMin">
  <rect width="50" height="50" fill="#F60" />
svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMidYMid">
  <rect width="50" height="50" fill="#F60" />
svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMinYMax">
  <rect width="50" height="50" fill="#F60" />
svg>

HTML躬行记（1）——SVG_第3张图片

图 3

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

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

表 2

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

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMinYMin meet">
  <rect width="150" height="150" fill="#F60" />
svg>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 100" preserveAspectRatio="xMinYMin slice">
  <rect width="150" height="150" fill="#F60" />
svg>

HTML躬行记（1）——SVG_第4张图片

图 4

二、形状

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

1）

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
  <line x1="20" y1="100"  x2="100" y2="20" stroke="black" stroke-width="2"/>
svg>

HTML躬行记（1）——SVG_第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 笔画宽度

HTML躬行记（1）——SVG_第6张图片

图 6

2）

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
  <rect x="10" y="10" width="100" height="100" rx="15" ry="15" fill="#F60"/>
svg>

HTML躬行记（1）——SVG_第7张图片

图 7

3）和

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
  <circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" 
    stroke-dasharray="314" stroke-dashoffset="40" fill="transparent" />
svg>

HTML躬行记（1）——SVG_第8张图片

图 8

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
  <ellipse cx="100" cy="100" rx="100" ry="50" />
svg>

HTML躬行记（1）——SVG_第9张图片

图 9

4）

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
  <polygon points="100,0 160,180 10,60 190,60 40,180" fill="#F60"/>
svg>

HTML躬行记（1）——SVG_第10张图片

图 10

5）

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
  <polyline points="20,100 40,60 70,80 100,20" fill="none" stroke="black" />
svg>

HTML躬行记（1）——SVG_第11张图片

图 11

6）

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

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 300 200">
  <path d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z" />
svg>

　　其中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允许在其内部嵌入