使用JavaScript修改Canvas中SVG图像的元素颜色是否可行？

不行，直接修改通过new Image()加载的SVG图像对象，没办法更改SVG内部元素的颜色。原因是Image对象加载SVG后，会将其渲染成位图资源，而非可操作的DOM结构，你无法直接访问或修改SVG内部的元素节点。

要实现修改SVG内部元素颜色后再绘制到Canvas，有两种常用方案：

方案1：修改SVG文本内容，转为Data URL后加载 #

先获取SVG的原始文本内容，修改其中的颜色属性，再将修改后的内容转为Data URL赋值给Image对象：

fetch('image.svg')
  .then(res => res.text())
  .then(rawSvg => {
    // 方法1：字符串替换（适合简单场景）
    // 替换id为"target-element"的元素的fill颜色
    let modifiedSvg = rawSvg.replace(/id="target-element"/, 'id="target-element" fill="orange"');

    // 方法2：解析为DOM操作（更灵活）
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(rawSvg, 'image/svg+xml');
    const colorElement = svgDoc.querySelector('.color-change');
    if (colorElement) {
      colorElement.style.fill = 'purple';
    }
    modifiedSvg = new XMLSerializer().serializeToString(svgDoc);

    // 转为Data URL并加载
    const image = new Image();
    image.src = `data:image/svg+xml;utf8,${encodeURIComponent(modifiedSvg)}`;
    image.onload = () => {
      const canvas = document.getElementById('my-canvas');
      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0);
    };
  });

方案2：嵌入SVG到DOM，修改后直接绘制到Canvas #

通过<object>元素加载SVG，待加载完成后访问其内部DOM修改样式，再用Canvas的drawImage直接绘制这个<object>元素：

const svgObject = document.createElement('object');
svgObject.data = 'image.svg';
svgObject.style.display = 'none';
document.body.appendChild(svgObject);

svgObject.onload = () => {
  // 获取SVG内部的DOM文档
  const svgDoc = svgObject.contentDocument;
  // 修改目标元素颜色
  const icon = svgDoc.querySelector('#icon-path');
  icon.setAttribute('fill', '#2ecc71');

  // 绘制到Canvas
  const canvas = document.getElementById('my-canvas');
  const ctx = canvas.getContext('2d');
  ctx.drawImage(svgObject, 0, 0, canvas.width, canvas.height);

  // 清理DOM元素
  document.body.removeChild(svgObject);
};

两种方案的核心都是先修改SVG的源内容，再将其转为可绘制的资源，直接操作已加载的Image对象无法实现内部元素的样式修改。

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