如何在React中结合D3动态修改SVG图标path元素的颜色

你之前用<image>标签加载SVG的方式无法直接修改内部元素样式——因为<image>会把SVG当作独立资源处理，无法访问其DOM结构。需要改为直接嵌入SVG元素到D3容器中，再修改路径的填充色，以下是两种可行方案：

方法一：解析SVG字符串并修改样式 #

适合SVG代码较复杂的场景，无需手动重构元素：

const renderIcon = (iconColor) => {
  // 将SVG字符串解析为DOM文档
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(MyIcon, "image/svg+xml");
  
  // 找到目标path元素，设置填充色
  const pathElement = svgDoc.querySelector("path.svg-fill");
  if (pathElement) {
    pathElement.setAttribute("fill", iconColor);
  }
  
  // 可选：修改背景圆形的颜色（如果需要）
  // const circleElement = svgDoc.querySelector("circle");
  // if (circleElement) {
  //   circleElement.setAttribute("fill", "#eee");
  // }
  
  // 将修改后的SVG元素添加到D3的svg容器中
  svg.append(() => svgDoc.documentElement);
};

方法二：用D3手动构建SVG元素 #

更直观，适合对SVG结构完全可控的场景：

const renderIcon = (iconColor) => {
  // 创建SVG容器，继承原图标viewBox等属性
  const iconSvg = svg.append("svg")
    .attr("xmlns", "http://www.w3.org/2000/svg")
    .attr("viewBox", "0 0 24 24");
  
  // 添加背景圆形
  iconSvg.append("circle")
    .attr("cx", "12")
    .attr("cy", "12")
    .attr("r", "12");
  
  // 添加路径并设置动态颜色
  iconSvg.append("path")
    .attr("class", "svg-fill")
    .attr("d", "M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm1,3.3,1.35-1a8,8,0,0,1,4.38,3.34L18.34,9,17,9.49,13,6.7Zm-3.35-1L11,5.3V6.7L7,9.49,5.66,9,5.27,7.69A8.1,8.1,0,0,1,9.65,4.35ZM7.08,17.11l-1.14.1A7.94,7.94,0,0,1,4,12c0-.12,0-.23,0-.35l1-.73,1.38.48,1.46,4.34Zm7.42,2.48a7.83,7.83,0,0,1-5,0L8.81,18.1,9.45,17h5.11l.64,1.11ZM14.27,15H9.73L8.38,11,12,8.44,15.63,11Zm3.79,2.21-1.14-.1-.79-1.37,1.46-4.34L19,10.93l1,.73c0,.11,0,.22,0,.34A7.94,7.94,0,0,1,18.06,17.21Z")
    .attr("fill", iconColor);
};

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