如何在Qt中修改SVG文件的颜色？

方法1：直接编辑SVG源码（最稳妥） #

如果你的图片是SVG格式，直接打开源码定位对应颜色的元素：

• 找到所有fill="#ff0000"（红色）的元素，替换成目标颜色，比如fill="#ff6600"
• 找到所有fill="#00ff00"（绿色）的元素，替换成目标颜色，比如fill="#009966"

示例：

<!-- 原红色元素 -->
<path d="M10 10..." fill="#ff0000" />
<!-- 修改后 -->
<path d="M10 10..." fill="#ff6600" />

方法2：用JavaScript正确实现颜色替换函数 #

你之前用的ChangeSVGColor()和SetAttrRecur()没生效，大概率是函数逻辑覆盖场景不全。试试这个简化版实现：

function replaceSVGColor(svgElement, oldColor, newColor) {
  // 处理直接设置fill属性的元素
  const fillElements = svgElement.querySelectorAll('[fill]');
  fillElements.forEach(el => {
    if (el.getAttribute('fill').toLowerCase() === oldColor.toLowerCase()) {
      el.setAttribute('fill', newColor);
    }
  });
  // 处理用style属性设置fill的元素
  const styleFillElements = svgElement.querySelectorAll('[style*="fill:"]');
  styleFillElements.forEach(el => {
    const currentStyle = el.getAttribute('style');
    el.setAttribute('style', currentStyle.replace(new RegExp(oldColor, 'gi'), newColor));
  });
}

// 使用示例
const targetSVG = document.getElementById('your-svg-id');
replaceSVGColor(targetSVG, '#ff0000', '#ff6600'); // 替换红色
replaceSVGColor(targetSVG, '#00ff00', '#009966'); // 替换绿色

注意：必须确保SVG是内联在HTML中，或已加载到DOM结构里；如果是外部SVG文件，需要先通过AJAX加载转为内联SVG再操作。

方法3：用CSS样式覆盖 #

如果是内联SVG，可直接用CSS选择器指定颜色：

/* 替换所有红色填充元素 */
svg [fill="#ff0000"] {
  fill: #ff6600 !important;
}
/* 替换所有绿色填充元素 */
svg [fill="#00ff00"] {
  fill: #009966 !important;
}

若SVG元素自带类名，可更精准地指定：

svg .red-shape {
  fill: #ff6600;
}
svg .green-shape {
  fill: #009966;
}

常见问题排查 #

• 确认颜色格式匹配：部分SVG用rgb(255,0,0)或red而非十六进制，需统一匹配格式
• 区分填充和描边：如果是线条颜色，要替换stroke属性而非fill
• 渐变颜色特殊处理：若颜色是通过渐变（gradient）实现的，需修改渐变定义中的颜色值，而非元素的fill属性

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