HTML5 新元素之 svg

SVG（Scalable Vector Graphics）指可伸缩矢量图形，通常在 html 中使用 xml 格式来定义用于网络的基于矢量的图形。使用 svg 定义的矢量图形在放大或改变尺寸的情况下其图形的质量不会受到损伤。

SVG 图像与其他图像格式（JPEG 或 GIF）相比的优势在于：SVG 图像可通过文本编辑器来创建和修改；SVG 图像可被搜索、索引、脚本化或压缩；SVG 图像是可伸缩的；SVG 图像可在任何的分辨率下被高质量地打印；SVG 图像质量不受放大或缩小的改变。

svg 与 canvas 的区别：

svg	canvas
不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用	依赖分辨率 不支持事件处理器 文本渲染能力较弱 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，比如频繁绘制某些对象图像

svg 与 canvas 一样，都是一种用来绘制 2D 图形的语言，不同的是 svg 是使用 xml 格式的文件来描述图形的，而 canvas 是通过 JavaScript 来描述的。在 svg 中，每个被绘制的图形均被视为对象。如果 svg 对象的属性发生变化，那么浏览器能够自动重现图形。canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

svg 矩形

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

rect 元素的 width 和 height 属性可定义矩形的高度和宽度

x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）

y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）

rx 和 ry 属性可使矩形产生圆角

style 属性用来定义 CSS 属性

CSS 的 fill 属性定义矩形的填充颜色

CSS 的 stroke-width 属性定义矩形边框的宽度

CSS 的 stroke 属性定义矩形边框的颜色

CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）

CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）

CSS 的 opacity 属性定义元素透明度（合法的范围是：0 - 1）

如，定义一个边框为绿色，边框宽度为 5px，大小为 300 * 100px 且使用红色填充的 svg 图像。

    <h3>svg 矩形</h3>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100" style="fill:rgb(255,0,0); stroke-width:5; stroke:rgb(0, 255, 0)" />
    </svg>
    <br />

除此之外，还可以使用 svg 来创建圆角的矩形，如：

    <h3>svg 圆角矩形</h3>
    <!-- 
        rect 元素的 width 和 height 属性可定义矩形的高度和宽度
        x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
        y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
        style 属性用来定义 CSS 属性
        CSS 的 fill 属性定义矩形的填充颜色
        CSS 的 stroke-width 属性定义矩形边框的宽度
        CSS 的 stroke 属性定义矩形边框的颜色 
        CSS 的 opacity 属性定义元素透明度（合法的范围是：0 - 1）
    -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="20" y="20" rx="20" ry="20" width="200" height="100"
            style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    </svg>
    <hr />

svg 圆形

svg 的 <circle> 标签可用来创建一个圆。

circle 元素的 cx 属性定义圆形图像原点坐标的 x 轴坐标

cy 属性定义圆形图像原点坐标的 y 轴坐标

r 属性定于圆形图像的半径大小, 单位为 px

stroke 属性用来定义圆形边框线条颜色

stroke-width 属性用来定义圆形边框的宽度

fill 属性用来定义圆形的填充颜色

    <h3>svg 圆形</h3>
    <!-- 
        circle 元素的 cx 属性定义圆形图像原点坐标的 x 轴坐标
        cy 属性定义圆形图像原点坐标的 y 轴坐标
        r 属性定于圆形图像的半径大小, 单位为 px
        stroke 属性用来定义圆形边框线条颜色
        stroke-width 属性用来定义圆形边框的宽度
        fill 属性用来定义圆形的填充颜色
    -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="80" cy="80" r="50" stroke="black" stroke-width="2" fill="red" />
    </svg>
    <hr />

其中，cx 和 cy 属性如果不设置的话会默认原点坐标为 (0, 0)。也就是说虽然是使用的 <circle> 元素来定义圆形，但实际上该圆形展示为一个只有右下部分的四分之一圆(椭圆)。

svg 椭圆

<ellipse> 元素是用来创建一个椭圆。椭圆与圆很相似，不同之处在于椭圆有不同的 x 半径和 y 半径，而圆的 x 半径和 y 半径是相同的。

ellipse 元素的 cx 属性定义椭圆中心的 x 轴坐标

cy 属性定义椭圆中心的 y 轴坐标

rx 属性定义椭圆的水平半径, 即 x 轴上的半径

ry 属性定义椭圆的垂直半径, 即 y 轴上的半径

style 属性用来定义 css 相关样式

css 的 fill 属性定义椭圆的填充颜色

css 的 stroke 属性定义椭圆边框的颜色

css 的 stroke-width 属性定义椭圆边框的线条宽度

    <h3>svg 椭圆</h3>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="110" cy="60" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>

还有一种特殊情况，在矩形、圆形等图形中都会出现。是因为 <svg> 标签的某些默认属性造成的。之前我们说过，svg 是和 canvas 标签类似的一个标签，那既然 canvas 可以设置画布的大小，svg 肯定也可以设置大小啊。所以，当未指定 svg 的大小的话，默认创建的是一个 300 * 150 的图像。如下图所示，我们使用的是默认的 300 * 150 的大小，但是我们指定的椭圆的水平半径为 200px，这样的话，整个椭圆就无法在 300 * 150 的区域内完整展示了，所以会出现下图所示的情况。一般这种情况可以通过在创建 svg 图像的时候设置 svg 的大小来解决，即设置 svg 的 width 和 height 属性。

如，创建三个自下而上垒叠的椭圆：

    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="240" cy="150" rx="200" ry="40" style="fill:purple" />
        <ellipse cx="240" cy="100" rx="200" ry="40" style="fill:lime" />
        <ellipse cx="240" cy="50" rx="200" ry="40" style="fill:yellow" />
    </svg>

又如，通过两个颜色不相同的椭圆来构建一个椭圆环：

    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="240" cy="150" rx="200" ry="100" style="fill:purple" />
        <ellipse cx="240" cy="150" rx="160" ry="68" style="fill:white" />
    </svg>

svg 直线

<line> 元素用来创建一条直线。

line 元素的 x1 属性定义直线的起点坐标的 x 坐标

y1 属性定义直线的起点坐标的 y 坐标

x2 属性定义直线的结束坐标的 x 坐标

y2 属性定义直线的结束坐标的 y 坐标

    <h3>svg 直线</h3>
    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
    <hr />
    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line x1="10" y1="10" x2="210" y2="10" style="stroke:green;stroke-width:2" />
        <line x1="210" y1="10" x2="210" y2="210" style="stroke:green;stroke-width:2" />
        <line x1="210" y1="210" x2="10" y2="210" style="stroke:green;stroke-width:2" />
        <line x1="10" y1="210" x2="10" y2="10" style="stroke:green;stroke-width:2" />
    </svg>

同时我们也可以看到，可以使用多个 <line> 元素去达到 <rect> 的效果，即可以使用多条直线来构建一个矩形或多边形。但通常来说，构建多边形有其专有的元素，即 <polygon>，用于构建由三条或三条以上边组成的多边形。

svg 多边形

<polygon> 元素用于创建由三条或三条以上边组成的多边形，且构成的多边形是封闭的。

polygon 元素的 points 属性定义多边形每个角的 x 和 y 坐标，定义格式为：points="x1,y1 x2,y2 x3,y3 ......"。

style 属性定义了 css 的样式列表

css 的 fill 属性定义了多边形的填充颜色

css 的 stroke 属性定义了多边形边框的颜色

css 的 stroke-width 属性定义了多边形边框的宽度

css 的 fill-rule 属性定义多边形的填充规则（该属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部”，内部区域会被填充。支持 nonzero 和 evenodd 两种取值，具体的判断逻辑可参考：SVG 多边形 | 菜鸟教程 fill-rule 的默认取值为 nonzero）

    <h3>svg 多边形</h3>
    <svg width="500" height="110" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="60,10 10,90 110,90" style="fill: green; stroke:purple; stroke-width:2" />
    </svg>
    <hr />

    <h3>使用 nonzero 填充规则</h3>
    <svg width="500" height="210" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: lime; stroke:purple; stroke-width:5" ;
            fill-rule="nonzero" />
    </svg>
    <hr />

    <h3>使用 evenodd 填充规则</h3>
    <svg width="500" height="210" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: lime; stroke:purple; stroke-width:5" ;
            fill-rule="evenodd" />
    </svg>
    <hr />

除此之外，svg 还可通过 <polyline> 元素来创建任何只含有直线的形状，通过 <path> 元素来定义路径，通过 <text> 元素来定义文本，以及通过 <defs> 元素去设置 svg 图像的阴影、滤镜、模糊、渐变等效果。具体操作方式详见：SVG 教程 | 菜鸟教程

本文涉及到的所有代码如下：

// 矩形
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SVG 示例</title>
</head>

<body>

    <!-- 
        rect 元素的 width 和 height 属性可定义矩形的高度和宽度
        style 属性用来定义 CSS 属性
        CSS 的 fill 属性定义矩形的填充颜色
        CSS 的 stroke-width 属性定义矩形边框的宽度
        CSS 的 stroke 属性定义矩形边框的颜色 
    -->
    <h3>svg 矩形</h3>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect width="300" height="100" style="fill:rgb(255,0,0); stroke-width:5; stroke:rgb(0, 255, 0)" />
    </svg>
    <br />

    <!-- 
        rect 元素的 x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
        y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
        style 属性用来定义 CSS 属性
        CSS 的 fill 属性定义矩形的填充颜色
        CSS 的 stroke-width 属性定义矩形边框的宽度
        CSS 的 stroke 属性定义矩形边框的颜色 
        CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
        CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
     -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="20" y="20" width="200" height="100"
            style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
    </svg>
    <hr />

    <h3>svg 圆角矩形</h3>
    <!-- 
        rect 元素的 width 和 height 属性可定义矩形的高度和宽度
        x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
        y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
        style 属性用来定义 CSS 属性
        CSS 的 fill 属性定义矩形的填充颜色
        CSS 的 stroke-width 属性定义矩形边框的宽度
        CSS 的 stroke 属性定义矩形边框的颜色 
        CSS 的 opacity 属性定义元素透明度（合法的范围是：0 - 1）
    -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="20" y="20" rx="20" ry="20" width="200" height="100"
            style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    </svg>
    <hr />

</body>

</html>


// 圆形
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SVG 圆形示例</title>
</head>

<body>

    <h3>svg 圆形</h3>
    <!-- 
        circle 元素的 cx 属性定义圆形图像原点坐标的 x 轴坐标
        cy 属性定义圆形图像原点坐标的 y 轴坐标
        r 属性定于圆形图像的半径大小, 单位为 px
        stroke 属性用来定义圆形边框线条颜色
        stroke-width 属性用来定义圆形边框的宽度
        fill 属性用来定义圆形的填充颜色
    -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="80" cy="80" r="50" stroke="black" stroke-width="2" fill="red" />
    </svg>
    <hr />

    <h3>svg 默认原点圆形</h3>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle r="50" stroke="black" stroke-width="2" fill="red" />
    </svg>


</body>

</html>


// 椭圆
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SVG 椭圆示例</title>
</head>

<body>

    <!-- 
        ellipse 元素的 cx 属性定义椭圆中心的 x 轴坐标
        cy 属性定义椭圆中心的 y 轴坐标
        rx 属性定义椭圆的水平半径, 即 x 轴上的半径
        ry 属性定义椭圆的垂直半径, 即 y 轴上的半径
        style 属性用来定义 css 相关样式
        css 的 fill 属性定义椭圆的填充颜色
        css 的 stroke 属性定义椭圆边框的颜色
        css 的 stroke-width 属性定义椭圆边框的线条宽度
     -->
    <h3>svg 椭圆</h3>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="110" cy="60" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
    </svg>
    <hr />

    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="240" cy="150" rx="200" ry="40" style="fill:purple" />
        <ellipse cx="240" cy="100" rx="200" ry="40" style="fill:lime" />
        <ellipse cx="240" cy="50" rx="200" ry="40" style="fill:yellow" />
    </svg>
    <hr />

    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <ellipse cx="240" cy="150" rx="200" ry="100" style="fill:purple" />
        <ellipse cx="240" cy="150" rx="160" ry="68" style="fill:white" />
    </svg>

</body>

</html>


// 直线
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SVG 直线示例</title>
</head>

<body>

    <!-- 
        line 元素的 x1 属性定义直线的起点坐标的 x 坐标
        y1 属性定义直线的起点坐标的 y 坐标
        x2 属性定义直线的结束坐标的 x 坐标
        y2 属性定义直线的结束坐标的 y 坐标
     -->
    <h3>svg 直线</h3>
    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    </svg>
    <hr />
    <svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <line x1="10" y1="10" x2="210" y2="10" style="stroke:green;stroke-width:2" />
        <line x1="210" y1="10" x2="210" y2="210" style="stroke:green;stroke-width:2" />
        <line x1="210" y1="210" x2="10" y2="210" style="stroke:green;stroke-width:2" />
        <line x1="10" y1="210" x2="10" y2="10" style="stroke:green;stroke-width:2" />
    </svg>

</body>

</html>


// 多边形
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SVG 多边形示例</title>
</head>

<body>

    <h3>svg 多边形</h3>
    <svg width="500" height="110" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="60,10 10,90 110,90" style="fill: green; stroke:purple; stroke-width:2" />
    </svg>
    <hr />

    <h3>使用 nonzero 填充规则</h3>
    <svg width="500" height="210" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: lime; stroke:purple; stroke-width:5" ;
            fill-rule="nonzero" />
    </svg>
    <hr />

    <h3>使用 evenodd 填充规则</h3>
    <svg width="500" height="210" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: lime; stroke:purple; stroke-width:5" ;
            fill-rule="evenodd" />
    </svg>
    <hr />

</body>

</html>

本文参考自：SVG 教程 | 菜鸟教程

HTML5 SVG | 菜鸟教程