在 SVG 图形中，path 元素通过 d 属性定义形状轮廓，但不少刚接触前端的朋友会误以为 d 里写的是某个图片文件的地址。事实上，d 属性的值是一串纯粹的矢量绘图指令，由命令字母与坐标数字组成，浏览器依据这些指令在当前坐标系上实时运算并绘制出线条与曲面，与远程资源加载没有任何关系。
d 属性的真实构成
d 属性的值被称为“路径数据”，它由若干命令段拼接而成。每一个命令以一个英文字母开头，后面跟随若干参数。字母分大小写，大写代表绝对坐标，小写代表相对坐标。比如 M 10 10 表示将画笔移动到绝对坐标 (10,10)，而 m 10 10 则是从当前位置向右下各移动 10 个单位。
常见基础命令包括 M（moveto）、L（lineto）、H（horizontal lineto）、V（vertical lineto）、C（curveto）、Q（quadratic Belzier curve）、A（elliptical arc）以及 Z（closepath）。这些指令组合后，可以表达从简单折线到复杂徽标的任意二维轮廓。正因为它是指令而非地址，所以修改其中数字就能实时改变图形，不需要重新请求网络资源。
一段最小示例
下面代码画出一个边长 100 的红色三角形，d 中的 M 设定起点，L 连续画两条边，Z 自动闭合回起点：
<svg width="120" height="120" viewBox="0 0 120 120"> <path d="M 10 10 L 110 10 L 60 110 Z" fill="red" /> </svg>
如果错误地把 d 写成 d="logo.png"，浏览器并不会去加载图片，而是因无法解析命令而什么都不显示。这也说明 d 与 img 标签的 src 有着本质区别。
为什么容易被误认为 URL
这种误解通常来自两方面。其一是看到某些框架里用字符串拼接生成 d，字符串外观类似文件路径；其二是把 SVG 文件本身和内部 path 的 d 搞混——SVG 文件可作为 URL 被 img 引用，但文件里的 d 只是内部指令。
另外，部分图标库会导出类似 <symbol> 加 <use> 的写法，或者把整段 SVG 以 Data URI 形式塞进 CSS 的 background，这时确实出现了 URL 形态。但那是对“整个 SVG 文档”的编码，和 path 的 d 属性仍然无关。理清层级，就不会再把绘图指令当成地址。
对比 table 说明差异
| 场景 | 是否 URL | 作用 |
|---|---|---|
| img 的 src | 是 | 指向图片文件或 Data URI |
| path 的 d | 否 | 描述矢量绘制命令 |
| use 的 href | 是 | 引用文档内或外部符号 |
用脚本动态生成 d 指令
由于 d 就是文本，我们可以用 JavaScript 计算坐标并拼出路径，实现随数据变化的图表。下面例子用循环画出折线图，完全不依赖任何图片地址：
function buildLinePath(points) {
// points 为 [{x:0,y:50},{x:20,y:30}...]
let d = 'M ' + points[0].x + ' ' + points[0].y;
for (let i = 1; i < points.length; i++) {
d += ' L ' + points[i].x + ' ' + points[i].y;
}
return d;
}
const data = [{x:0,y:80},{x:30,y:40},{x:60,y:60},{x:90,y:20}];
const pathD = buildLinePath(data);
console.log(pathD); // M 0 80 L 30 40 L 60 60 L 90 20
将 pathD 赋值给 path 元素的 d 属性，页面就会渲染出新折线。这种能力是位图 URL 做不到的，也进一步证明 d 是指令集。
掌握 d 属性的指令本质后，你能在不引入图片文件的情况下完成图标系统、动态图形与过渡动画，同时避免把矢量命令错配到需要 URL 的属性上。写 SVG 时，记住路径数据是“怎么画”而不是“画什么文件”。
SVGd_attributevector_path修改时间：2026-08-03 03:24:24