如何在QML中修改SVG图片的颜色？

针对你用Image控件无法修改SVG颜色的问题，这里有几种实用的解决方案：

方案1：使用ColorOverlay滤镜（无需修改SVG） #

通过Qt的图形滤镜ColorOverlay，直接在QML层为SVG叠加主题色，适合无法修改SVG源码的场景。

首先导入图形滤镜模块，然后给Image添加颜色叠加效果：

import QtQuick 2.15
import QtGraphicalEffects 1.15

Image {
    id: icon
    anchors {
        top: parent.top
        bottom: parent.bottom
        right: parent.right
    }
    width: height
    source: "../Image/BxChevronDown.svg"

    ColorOverlay {
        anchors.fill: icon
        source: icon
        color: theme.iconColor // 替换为你的主题颜色变量或具体色值
    }
}

注意：该方法会把SVG中所有颜色替换为设置的color值，仅适合单色SVG图标。

方案2：修改SVG源码，利用currentColor继承主题色 #

如果能编辑SVG文件，这是性能最优的方案。打开你的SVG，将所有需要适配主题的fill属性值改为currentColor，比如：

<!-- 修改前 -->
<path fill="#000000" d="..."/>
<!-- 修改后 -->
<path fill="currentColor" d="..."/>

之后在QML的Image控件中直接设置color属性即可，SVG会自动继承该颜色：

Image {
    id: icon
    anchors {
        top: parent.top
        bottom: parent.bottom
        right: parent.right
    }
    width: height
    source: "../Image/BxChevronDown.svg"
    color: theme.iconColor // 主题颜色
}

方案3：使用Qt Quick Controls 2的Icon控件 #

如果你的项目基于Qt Quick Controls 2，直接用专门的Icon控件更简洁，它自带color属性支持SVG颜色替换：

import QtQuick.Controls 2.15

Icon {
    id: icon
    anchors {
        top: parent.top
        bottom: parent.bottom
        right: parent.right
    }
    width: height
    source: "../Image/BxChevronDown.svg"
    color: theme.iconColor // 直接设置主题色
}

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