SVG 使用详解 - 技术栈

基本使用

SVG 元素的渲染顺序

在 SVG 中，元素的渲染顺序非常重要，因为 SVG 遵循"后来居上"（Later On Top，LOT）的原则。这意味着在代码中后出现的元素会覆盖先前出现的元素。如果你有多个重叠的元素，后面的元素会显示在前面元素的上层

坐标定位

SVG 中的坐标系统使用一个二维平面，其中每个元素的位置可以通过 x 和 y 属性来指定。这些属性定义了元素的左上角点在 SVG 画布上的起始位置。例如，下面的 SVG 代码定义了一个起始位置为 0 0 的矩形：

HTML 复制代码

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100" />
</svg>

SVG 样式

在未给 SVG 设置宽高样式时，SVG 默认宽高为 300x150。
样式优先级问题。 style 中样式 > css 样式 > 属性样式。
在SVG中，许多属性不仅可以直接在SVG元素上设置，还可以通过CSS来控制。例如: fill、stroke、stroke-width、width、height等等，同样他们的优先级遵循第二条规则。

SVG 根标签

常见属性如下：

viewBox
xmlns 命名空间

viewBox

语法：viewBox="x y width height"

x, y：视口的左上角起点（通常为 0 0）。

width, height：视口的宽高（逻辑单位，非像素）。

设置 viewBox

iconFont 中使用 viewBox ，实际代码如下：

viewBox="0 0 1024 1024"：定义了 SVG 的内部坐标系范围，表示 SVG 内容的逻辑尺寸是 1024x1024。这个坐标系是虚拟的，与实际的物理尺寸无关。
可以通过修改 svg 宽高动态调节icon 大小。绘制的逻辑坐标会最终会按比例缩放到物理尺寸上。

上面的 SVG 中的 path 坐标是基于 viewBox 定义的逻辑坐标系（这里是 1024x1024），而最终的显示尺寸是通过 width 和 height 将逻辑坐标系的内容按比例缩放到物理尺寸上。

不设置 viewBox

如果没有设置 viewBox，SVG 的绘制区域（即用户坐标系）会直接映射到 svg 元素的 width 和 height，SVG 的坐标系是 1 单位 = 1 像素。与设置 viewBox 的对比：如果设置了 viewBox，SVG 的绘制区域会根据 viewBox 的定义进行缩放和适配。

xmlns 命名空间

xmlns全称是"XML Namespaces"，指"XML命名空间"。

不同元素的 XML 类型的渲染规则是不同的：这些XML类型的渲染规则是有差异的，例如HTML中裸露的元素是不会表现为圆，而是一个普通的自定义元素。RSS中的XML浏览器会自动进行文章排版渲染等。

所以我们可以看到，指定命名空间可以让浏览器精准解析，如果不指定 svg 的xmlns(命名空间)，浏览器无法正确解析我们的元素。

容器标签

g 标签

标签将一个圆形和一个矩形组合在一起，并统一应用了填充颜色、边框颜色和边框宽度。

HTML 复制代码

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <g fill="red" stroke="black" stroke-width="2">
        <circle cx="50" cy="50" r="30" />
        <rect x="100" y="50" width="50" height="50" />
    </g>
</svg>

主要用途：

分组管理：将多个图形元素组合在一起，方便代码分组。
统一应用样式和变换：对组内的所有元素统一应用样式（如颜色、边框）或变换（如平移、旋转、缩放）。
事件监听：为整个组添加事件监听器，而不是单独为每个元素添加。

defs 标签

是一个定义区域，用于定义可复用的图形元素，这些元素不会直接显示 ，但可以通过引用（如、fill="url(#id)" 等）在 SVG 中使用。主要用途：

复用图形元素将重复使用的图形（如箭头、图标、路径等）定义在 <defs> 中，通过 <use> 标签在画布中多次引用。
定义资源存放渐变（<linearGradient>、<radialGradient>）、重复（<pattern>）、滤镜（<filter>）、蒙版（<mask>）、标记（<marker>）等复杂资源，供其他元素使用。
代码组织将复杂的图形逻辑集中管理，提高代码可读性和维护性。

path 路径

标签是SVG中非常强大且灵活的元素，用于定义任意形状的路径。

d 属性定义路径

M x y：绝对坐标移动到点 (x, y)，不绘制任何内容。
L x y：从当前位置绘制一条直线到绝对坐标点 (x, y)。
H x：从当前位置绘制一条水平直线到绝对 x 坐标。
V y：从当前位置绘制一条垂直直线到绝对 y 坐标。
C x1 y1 x2 y2 x y：绘制一条三次贝塞尔曲线，控制点为 (x1, y1) 和 (x2, y2)，终点为 (x, y)。
Q x1 y1 x y：绘制一条二次贝塞尔曲线，控制点为 (x1, y1)，终点为 (x, y)。
Z：闭合路径，将当前点连接到路径的起始点。

下面示例是分别使用相对路径和绝对路径实现相同的效果。

其他图形属性

stroke="blue"：边框颜色
stroke-width="3"：边框宽度
stroke-dasharray="5, 5"：虚线样式
stroke-dashoffset="2"：虚线偏移量
fill="red"：填充颜色
fill-opacity="0.5"：填充透明度
stroke-opacity="0.8"：边框透明度
opacity="0.7"：整体透明度
transform="translate(10, 20)"：图形变换（平移）
class="shape"：CSS类名
id="uniqueId"：元素唯一标识符
style="stroke: green; fill: yellow;"：内联样式
pointer-events="none"：鼠标事件响应
clip-path="url(#clipPathId)"：裁剪路径
mask="url(#maskId)"：遮罩效果

绘制曲线

绘制三次贝塞尔曲线，请移动 下方示例中红色控制点更改三次贝塞尔曲线的形状！

通过组合多个三次贝塞尔曲线来实现更复杂的曲线形状。

html 复制代码

<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg">
    <!-- 复杂的贝塞尔曲线 -->
    <path d="
      M 50 400
      C 100 100, 200 100, 300 400
      C 400 700, 500 700, 600 400
      C 700 100, 800 100, 850 400
    " stroke="blue" stroke-width="3" fill="none"></path>
</svg>