JavaScript Path2D 怎样从 SVG 路径字符串构造可复用路径

如果页面已经拿到 SVG 的 d 属性，却又要在 Canvas 中重复填充、描边或做命中判断，最直接的做法是把这段路径数据交给 new Path2D(d)。它会得到一个可以反复交给 Canvas 2D API 的路径对象；不要把整段 标签、选择器或样式字符串当成构造参数。

官方地址：https://developer.mozilla.org/en-US/docs/Web/API/Path2D

先确认输入是 SVG 的 d 路径数据

SVG 中的 元素通常把几何形状写在 d 属性里，例如 M20 20 L120 20 L70 100 Z。这段字符串描述移动、直线和闭合，不包含元素标签、颜色或点击事件。Path2D 的字符串构造器接收的正是这种 SVG path data。

如果数据来自 DOM，可以只取属性值；如果来自接口，则先确认字段本身就是路径数据。颜色、线宽和变换不应拼接进这段字符串，它们由绘制上下文或绘制参数负责。

const svgPath = document.querySelector("path");
const d = svgPath?.getAttribute("d");

if (!d) {
  // 缺少 d 时不构造空的业务路径，先让调用方处理输入问题。
  throw new Error("SVG path 缺少 d 属性");
}

// d 是 SVG path data；不要传入完整的  标签。
const reusablePath = new Path2D(d);

用 new Path2D 构造可复用路径对象

构造完成后，reusablePath 只描述几何形状，还没有决定填充色或描边宽度。这样设计的好处是把“路径数据”与“绘制表现”分开：同一个对象可以在不同绘制状态下反复使用，后续也能集中修改颜色或坐标变换。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const d = "M20 20 L140 20 L80 120 Z";

// 构造一次路径对象，后续绘制时重复引用它。
const triangle = new Path2D(d);

// 绘制状态属于上下文，不会写回 triangle 的几何数据。
ctx.fillStyle = "#2563eb";
ctx.fill(triangle);

ctx.strokeStyle = "#0f172a";
ctx.lineWidth = 3;
ctx.stroke(triangle);

这里的 fillStyle、strokeStyle 和 lineWidth 是上下文状态，triangle 仍然只是路径。若把同一个对象画到不同 Canvas 上，要分别使用各自的上下文；不要把上下文状态误认为路径的一部分。

把同一个 Path2D 交给绘制和命中判断

路径复用的价值不只是少写几次字符串解析。绘制时可以使用 fill(path) 或 stroke(path)，交互场景还可以把同一个对象交给 isPointInPath(path, x, y)，让视觉形状和命中判断引用同一份几何定义。

function isInside(ctx, path, point) {
  // 命中测试与绘制引用同一条几何路径，避免两套坐标定义漂移。
  return ctx.isPointInPath(path, point.x, point.y);
}

const point = { x: 80, y: 60 };
console.log(isInside(ctx, triangle, point));

如果需要在原路径上增加一段几何，可以先创建副本，再调用副本的方法。复制的是路径几何，不会复制某个 Canvas 上下文的颜色、线宽或变换状态。

const extended = new Path2D(triangle);

// 在副本上追加矩形，保留 triangle 本身不变。
extended.rect(160, 20, 60, 60);

ctx.strokeStyle = "#dc2626";
ctx.stroke(extended);

坐标变换和常见误区怎么分层

当同一个 SVG 路径要画到不同位置时，优先使用 ctx.save()、ctx.translate() 和 ctx.restore() 管理绘制状态。这样路径对象仍代表原始几何，位置变化由当前上下文表达；如果要真正生成另一份几何，再考虑用 new Path2D(existingPath) 复制后继续扩展。

还要注意坐标系：SVG 的视口、Canvas 的像素尺寸和 CSS 展示尺寸可能不同。Path2D 只负责接收路径几何，不会替你处理 SVG 的 viewBox、Canvas 高 DPI 缩放或响应式布局；这些应在进入绘制层前单独确定。

相关问题

可以把 SVG 的完整 path 元素传给 Path2D 吗？

不行。应先取得 d 属性的路径数据字符串，再传给 new Path2D(d)。

Path2D 会保存 fillStyle 和 strokeStyle 吗？

不会。它保存路径几何；颜色、线宽和变换由 Canvas 2D 上下文的绘制状态决定。

同一个 Path2D 可以用于点击判断吗？

可以。绘制和命中判断引用同一对象时，形状定义更容易保持一致，但仍要保证传入的点使用同一坐标系。