SVG（可缩放矢量图形）凭借其矢量特性、无限缩放能力和小巧的文件体积，已成为网页设计与前端开发中不可或缺的一部分。而路径（<path>）元素是SVG中最强大、最灵活的元素，它通过一系列命令和坐标点，能够定义任意复杂的二维图形，从简单的直线到优美的贝塞尔曲线。本文将深入探讨SVG路径的基本语法、核心命令，并重点展示其在CSS中的多种创新应用，助你掌握这一强大的视觉表现工具。

一、SVG路径基本语法

SVG路径（<path>）是SVG中最强大的图形元素，能够通过一系列命令和坐标点描绘出任意复杂的二维形状。它的语法由多个指令构成，每个指令包含一个字母（即命令代码）和对应的坐标参数。本质上，路径采用了一种类似“绘图语言”的方式，用字母表示操作命令，数字表示位置坐标，这些指令共同组成了元素的d（data）属性，精准定义图形的轮廓。

  • 命令：单个字母，如 M、 L、C、Z，指明了绘图的动作。

  • 参数：命令后面的数字，通常为x和y坐标。

  • 大小写敏感：命令字母 严格区分大小写。

    • 大写字母（如 M、L）表示使用 绝对坐标，即基于画布原点的精确位置。

    • 小写字母（如 m、l）表示使用 相对坐标，即相对于上一个点位的偏移量。

路径命令可以分为五大类，共20条命令。

命令

功能

语法

M/m

移动起点

M x y 或 m dx dy

L/l

画直线

L x y 或 l dx dy

H/h

画水平线

H x 或 h dx

V/v

画垂直线

V y 或 v dy

C/c

三次Bezier

C x1 y1 x2 y2 x y 或 c dx1 dy1 dx2 dy2 dx dy

S/s

平滑Bezier

S x2 y2 x y 或 s dx2 dy2 dx dy

Q/q

二次Bezier

Q x1 y1 x y 或 q dx1 dy1 dx dy

T/t

平滑Bezier

T x y 或 t dx dy

A/a

椭圆弧线

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Z/z

闭合路径

Z 或 z

二、常用路径命令详解

1. 移动命令 (M/m)

这是每个路径的起点。可以理解为将画笔提起来，放到画纸的另一个位置开始绘制 M 命令后面通常跟着其他绘制命令。

  • M x y — 移动到指定坐标。

  • m dx dy — 相对当前位置移动。

2. 直线命令 (L/l, H/h, V/v)

直线命令是最基本的绘制命令。通过组合它们可以快速绘制多边形。

  • L x y — 从当前点画线到指定坐标。

  • H x — 画水平线到指定x坐标。

  • V y — 画垂直线到指定y坐标。

3. 贝塞尔曲线命令 (C, S, Q, T)

  • 三次贝塞尔曲线(C)：提供两个控制点，分别控制曲线在起点和终点的方向与弧度，灵活性最高。

  • 示例：C x1 y1 x2 y2 x y

    • x1,y1: 起点控制点。

    • x2,y2: 终点控制点。

    • x,y: 终点坐标。

  • 二次贝塞尔曲线(Q)：只有一个控制点，曲线总是位于起点、控制点和终点所构成的三角形内。

  • 示例：Q x1 y1 x y

    • x1,y1: 控制点。

    • x,y: 终点坐标。

  • 平滑曲线(S、T)：当需要绘制一系列平滑连接的曲线时，使用 S（跟随 C 或 S）和 T（跟随 Q 或 T）可以自动计算控制点，保持曲线斜率连续，极大地简化代码。

4. 椭圆弧命令 (A/a)

这是路径命令中最复杂但也最强大的一个。它用于绘制椭圆的一部分，通过调整标志位可以实现不同的弧形效果。

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

  • rx, ry: 椭圆在x和y方向上的半径。

  • x-axis-rotation: 椭圆x轴相对于当前坐标系的旋转角度。

  • arge-arc-flag: 是否使用大弧 (0 小弧 或 1大弧)。

  • sweep-flag: 弧线方向 (0逆时针, 1顺时针)。

  • x, y: 终点坐标。

5. 闭合路径 (Z/z)

  • Z 命令会自动将当前点与路径的起点连接起来，并封闭图形。这对于填充颜色至关重要。

三、SVG路径在CSS中的应用

将SVG路径通过CSS引入，可以让我们享受到矢量图的全部优点，同时又能利用CSS进行灵活的控制。

1. 作为背景图像与数据URI优化

最常见的用法是将SVG路径代码转换为 数据URI（Data URI），直接嵌入CSS，从而避免额外的HTTP请求。

.element {
    /* 对SVG内容进行URL编码，以确保特殊字符（如#，<等）能被正确解析 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10,30 Q50,5 90,30 T90,70 Q50,95 10,70 T10,30' fill='%23f00'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}

  • 最佳实践：对于动态生成的SVG，可以使用JavaScript函数（svgToDataURI）将字符串编码为Data URI，以保证其正确显示。

2. 在伪元素中创建图标

利用伪元素 ::before 和 ::after，可以在不增加HTML结构的情况下插入矢量图标，非常适合装饰性元素。

.nav-link::before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    /* 使用mask-image实现变色效果 */
    background-color: currentColor; /* 图标颜色继承父元素的color */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3C path d='M12,2 L2,7 L12,12 L22,7 L12,2 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    margin-right: 0.5em;
}

  • 注：通过 background-color + mask-image 的方式，可以灵活地改变图标的颜色，这是纯 background-image 难以做到的。

3. 作为CSS变量 (Custom Properties)

将SVG数据URI赋值给CSS变量，可以实现主题的统一管理和更换，特别适合多主题网站或组件库。

:root {
    --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7,10 L12,15 L17,10' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    --icon-close: url("data:image/svg+xml,%3Csvg ... %3E");
}

.select-box {
    background-image: var(--icon-arrow-down);
    background-position: right center;
    background-repeat: no-repeat;
}
4. 在CSS动画中实现动态效果

结合CSS的 stroke-dasharray 和 stroke-dashoffset 属性，可以创造出如同手绘一样的线条绘制动画（line drawing animation），这是Web动画中非常受欢迎的一种效果。

@keyframes draw {
    from {
        stroke-dashoffset: 1000; /* 数值通常等于或大于路径的总长度 */
    }
    to {
        stroke-dashoffset: 0;
    }
}

.path-to-animate {
    stroke: #3498db;
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 1000; /* 定义虚线的模式，这里设置为路径总长 */
    stroke-dashoffset: 1000; /* 将虚线起点偏移，使线条不可见 */
    animation: draw 3s ease-in-out forwards;
}
5. 高级动态效果：在CSS中动画化d属性

最新的CSS发展已经允许我们直接动画化或过渡 d 属性的变化，这意味着可以实现流畅的形状变形（morphing）动画，而无需借助JavaScript。

@keyframes morph {
    0% { d: path("M10,80 Q77.5,10 145,80 T280,80"); } /* 一个波浪形 */
    100% { d: path("M10,80 Q77.5,150 145,80 T280,80"); } /* 另一个波浪形 */
}

.morphing-shape {
    fill: none;
    stroke: #e74c3c;
    stroke-width: 4;
    animation: morph 2s infinite alternate ease-in-out;
}

四、最佳实践

性能优化

  1. 路径简化 (Path Simplification)：使用工具减少路径上的节点数量，在不影响视觉质量的前提下，可以显著减小文件体积。

  2. 数据URI vs 外部文件：对于重复使用的小图标，数据URI可以减少HTTP请求；但对于复杂、大型或需要缓存复用的图形，外部SVG文件是更好的选择。

  3. 颜色与继承：在CSS中使用mask-image 或 currentColor，让SVG图标能跟随父元素的文本颜色变化，提升灵活性。

  4. 合并路径：对于简单的单色图标，可以使用工具（如@svgfmt/core）将多个路径合并为一个，进一步减小体积。

编码与兼容性

  • URL编码：在CSS中嵌入SVG代码时，务必进行 URL编码，否则可能会因为特殊字符（#, &, <）导致代码失效。你可以使用在线工具或构建工具自动完成这一步骤。

  • 动画兼容性：使用 d 属性动画或 stroke-dash* 动画时，请在主流浏览器中进行充分测试。

总结

通过深入理解SVG路径语法，并结合CSS的强大功能，你可以在网页上创造出既轻量又极具表现力的图形与动画效果。这不仅能减少对外部图片的依赖，提升页面加载速度，更能为你的设计作品带来独特的精致感和交互体验。

彩蛋

文中配有完整示例，点击《SVG线条绘制动画 | 手绘效果完整示例》即可查看。

文中配有完整示例，点击《SVG路径形状动画示例》即可查看。