HTML5中的SVG是什么？

什么是 SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 圆形

要使用 SVG 绘制图形，你首先需要创建一个 <svg> 标签。

<svg width="1000" height="1000"></svg>

要创建一个圆形，需要添加一个 <circle> 标签。
下面是 SVG 代码：

<svg width="1000" height="1000"><circle cx="100" cy="50" r="40" fill="blue" />
</svg>

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为 (0, 0)。
r属性定义圆的半径。
运行显示结果如下图：

SVG 其他形状元素

我们来看看 SVG 一些预定义的其他形状元素：

SVG 矩形 - <rect>

<rect> 标签可用来创建矩形，以及矩形的变种。

<svg width="1000" height="1000"><rect width="400" height="200" x="20" y="20" fill="red" />
</svg>

运行显示结果如下图：

SVG 直线 - <line>

<line> 标签是用来创建一个直线。

<svg width="500" height="510"><line x1="20" y1="20" x2="300" y2="200" style="stroke:#000000; stroke-linecap:round; stroke-width:20"  />
</svg>

运行显示结果如下图：

SVG 曲线 - <polyline>

<polyline> 标签是用于创建任何只有直线的形状。<svg width="2000" height="500"><polyline style="stroke-linejoin:miter; stroke:black; stroke-width:12; fill: none;"points="100 100, 150 150, 200 100" />
</svg>

运行显示结果如下图：

SVG 椭圆、多边形
SVG 椭圆 - <ellipse>

<ellipse> 标签是用来创建一个椭圆。

椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的。

<svg width="500" height="250"><ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" />
</svg>

运行显示结果如下图：

SVG 多边形 - <polygon>

<polygon> 标签用来创建含有不少于三个边的图形。

<svg width="1000" height="1000">
<polygon points="100 100, 200 200, 300 0" style="fill: red; stroke:black;" />
</svg>

运行显示结果如下图：

SVG 动画

SVG 动画可以使用 <animate> 元素创建。

实例
创建一个矩形，将在3秒内更改其位置，然后重复动画两次：

<svg width="1000" height="250">
<rect width="150" height="150" fill="orange"><animate attributeName="x" from="0" to="300"dur="3s" fill="freeze" repeatCount="2"/>
</rect>
</svg>

attributeName：指定哪个属性需要产生动画效果

from：指定属性的起始值

to：指定属性的结束值

dur：指定动画运行的时间（持续时间）

fill=“freeze|remove”：指定动画播放完毕后是停留在播放的终点还是回到起始位置

repeatCount：指定动画的重复播放次数

在上面的例子中，矩形在3秒内将其x属性从0更改为300。

要无限重复动画，请使用值 “indefinite” 作为 repeatCount 属性。

SVG 路径

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

实例

<svg width="500" height="500"><path d="M150 0 L75 200 L225 200 Z" />
</svg>

上面的例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。