HTML 笔记（八）：SVG

HTML 笔记（八）：SVG

介绍

和 Canvas 相同，SVG 也是用与绘图的标签，区别在于 canvas 用于绘制位图、而 svg 用于绘制矢量图，示例如下：

位图（jpg、png、gif）是由一块块小方格组成，一个方格表示一个像素，优点是色彩丰富，缺点是放大失真、体积较大，矢量图用 XML 格式定义，通过各种「路径」和「填充颜色」来描述渲染的图片，优点是放大后不会失真、体积较小，缺点是不易制作色彩丰富的图片

<svg>
    <circle cx="50" cy="50" r="50" />
</svg>

svg 与 canvas 的不同之处在于，svg 可以通过 css 样式或行内样式自定义元素宽高

导入方式

svg 代码除了可以内嵌至 HTML 中之外，也可以保存在以 .svg 扩展名结尾的文件中，示例如下：

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
    <circle cx="150" cy="150" r="50" />
</svg>

SVG 使用 XML 格式定义图形，xmlns 属性定义 SVG 命名空间

以 .svg 扩展名结尾的文件本质上是一个图片，所以可以：

1. 浏览器预览
2. img 标签引用 svg 图片
3. css 图片属性

示例如下：

<style>
    * {
     
     
        margin: 0;
        padding: 0;
    }

    div {
     
     
        height: 400px;
        background: url(./svg-sample.svg) no-repeat;
    }
</style>
<img src="./svg-sample.svg" alt="">
<div></div>

绘制图形

SVG 通过在根标签中定义各种图形标签来绘制图形，此外，必须说明的是，fill 属性表示图形填充的颜色、stroke 表示图形边框的颜色，以下是常用图形的示例：

矩形

<svg>
    <rect x="50" y="50" width="200" height="100" fill="none" stroke="black" />
</svg>

SVG 中的 rect 标签可以通过指定属性 rx/ry 设置矩形的圆角半径，示例如下：

<svg>
    <rect x="50" y="50" width="200" height="100" fill="none" stroke="black" rx="20" ry="20"/>
</svg>

rx/ry 的原理与 CSS 中 border-radius 属性的原理相同

圆

<svg>
    <circle cx="250" cy="250" r="50" fill="none" stroke="black" />
</svg>

椭圆

<svg>
    <ellipse cx="150" cy="100" rx="100" ry="50" fill="none" stroke="black" />
</svg>

直线

<svg>
    <line x1="170" y1="150" x2="400" y2="150" stroke="black" />
</svg>

在 line 标签中 stroke 属性是必要的

折线

在 points 属性中两个相邻值为一组表示若干个被相连的坐标

非闭合

<svg>
    <polyline points="100 100 300 100 300 200" fill="none" stroke="black" />
</svg>

闭合

<svg>
    <polygon points="100 100 300 100 300 200" fill="none" stroke="black" />
</svg>

常用属性

在 SVG 中有一些常用的属性，大部分可以被用于任何图形标签中，也可以被用到 CSS 样式表中，内容如下：

示例如下：

rect {
   
   
    fill: blue;
    fill-opacity: 0.5;
    stroke: red;
    stroke-width: 20;
    stroke-opacity: 0.2;
}

<svg width="500" height="400">
    <rect x="50" y="50" width="300" height="100" />
</svg>

由于上述表格中的所有属性与 Canvas 中的含义相同，所以不再演示所有属性

绘制路径

在 SVG 中，可以通过 path 标签以及相应的指令绘制各种复杂的路径

线条

SVG 路径中线条的指令与 canvas 中常用的各种函数相似，内容如下：

示例如下：

<svg width="500" height="400">
    <path d="M 100 100 L 300 100 L 300 300" fill="none" stroke="red" stroke-width="20" />
</svg>

如果一个坐标的 x 坐标或横坐标与上一个坐标的相应值相同，那么可以使用 H 或 V 指令简写，示例如下：

<svg width="500" height="400">
    <path d="M 100 100 H 300 V 300" fill="none" stroke="red" stroke-width="20" />
</svg>

类似于 canvas 中的闭合问题，可以通过闭合路径解决，示例如下；

<svg width="500" height="400">
    <path d="M 100 100 H 300 V 300 Z" fill="none" stroke="red" stroke-width="20" stroke-linejoin="round" />
</svg>

必须注意的是，指令的大小写区别：大写指令表示绝对位置、小写指令表示相对于上一个点的相对位置，示例如下：

<svg width="500" height="400">
    <path d="M 100 100 l 300 100" fill="none" stroke="red" />
</svg>

圆弧

SVG 中绘制圆弧可以使用 A 指令，从当前位置绘制弧线到特定位置，原型如下：

A (rx, ry, xr, laf, sf, x, y)

各个参数的含义如下：