如何通过SVG路径ID获取path的d属性或仅用ID填充路径？

当然可以！这两种需求都能通过JavaScript轻松实现，下面分场景给你详细说明：

只要你的SVG已经加载到页面的DOM中，就可以直接通过ID定位到对应的<path>元素，然后获取它的d属性值。

举个实际的例子：
假设你的页面里有这样的SVG结构：

<svg id="mySvg" viewBox="0 0 100 100">
  <path id="heartPath" d="M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 Z" />
</svg>

同时你的JSON文件里存储了目标ID：{"targetPathId": "heartPath"}

那你可以用这段代码获取d属性：

// 先从JSON中读取路径ID（假设你已经把JSON内容解析到了pathData变量里）
const targetId = pathData.targetPathId;

// 通过ID获取path元素
const pathElement = document.getElementById(targetId);

// 这里最好加个判断，避免ID不存在时报错
if (pathElement) {
  const dValue = pathElement.getAttribute('d');
  console.log('路径的d属性值：', dValue);
  // 拿到d值后你就可以按需使用了
} else {
  console.error(`找不到ID为${targetId}的path元素，请检查ID是否正确或SVG是否已加载`);
}

如果你的SVG是通过<object>或<iframe>加载的外部文件，那需要先获取到SVG的内部DOM再执行上述操作，比如监听外部SVG的load事件后再获取元素。

这里的核心其实还是先通过ID拿到目标路径的d属性，再把它赋值给需要填充的<path>元素——不管是页面上已有的空path，还是你动态创建的新path。

场景1：填充页面上已有的空path #

假设页面里有个等待填充的path：

<svg>
  <path id="emptyPath" fill="blue" />
</svg>

那你可以这样做：

const sourceId = pathData.targetPathId;
const sourcePath = document.getElementById(sourceId);
const targetPath = document.getElementById('emptyPath');

if (sourcePath && targetPath) {
  targetPath.setAttribute('d', sourcePath.getAttribute('d'));
}

场景2：动态创建并填充新的path #

如果需要在SVG里新增一个路径，记得创建SVG元素时要使用SVG的命名空间（http://www.w3.org/2000/svg），不然浏览器无法识别：

const sourceId = pathData.targetPathId;
const sourcePath = document.getElementById(sourceId);
const svgContainer = document.getElementById('mySvg');

if (sourcePath && svgContainer) {
  // 创建新的path元素
  const newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  // 赋值d属性
  newPath.setAttribute('d', sourcePath.getAttribute('d'));
  // 可以添加其他样式属性
  newPath.setAttribute('fill', '#ff6b6b');
  newPath.setAttribute('stroke', '#333');
  // 把新path添加到SVG容器里
  svgContainer.appendChild(newPath);
}

内容的提问来源于stack exchange，提问作者Dis_Pro