在QML中修改单轮廓SVG图像的填充颜色

针对你需要动态修改无填充单轮廓SVG光标填充颜色且无法使用QtGraphicalEffects的问题，提供以下三种可行方案：

方案一：调整SVG结构，分离填充与描边 #

修改原SVG，将填充路径和描边路径分开，之后在QML中动态绑定填充颜色。

修改后的SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <!-- 填充路径，初始透明，后续在QML中修改颜色 -->
  <path id="fill-path" fill="transparent" d="M300.291,48.248L556.347,560.4s-127.234-47.825-255.133-47.825c-128.157,0-256.979,47.825-256.979,47.825Z"/>
  <!-- 原轮廓路径 -->
  <path id="stroke-path" fill="none" stroke="#414141" stroke-width="44px" fill-rule="evenodd" d="M300.291,48.248L556.347,560.4s-127.234-47.825-255.133-47.825c-128.157,0-256.979,47.825-256.979,47.825Z"/>
</svg>

QML实现代码 #

import QtQuick
import QtQuick.Svg

Item {
    width: 60
    height: 60

    // 绑定用户选择的颜色
    property color fillColor: "#ff0000"

    SvgImage {
        anchors.fill: parent
        source: "cursor.svg"

        onStatusChanged: {
            if (status === SvgImage.Ready) {
                getElementById("fill-path").setAttribute("fill", fillColor)
            }
        }

        onFillColorChanged: {
            const fillElement = getElementById("fill-path")
            if (fillElement) fillElement.setAttribute("fill", fillColor)
        }
    }
}

方案二：用QML Canvas直接绘制光标 #

抛弃SVG，用Canvas绘制路径，直接控制填充和描边颜色，无需外部资源。

import QtQuick

Item {
    width: 60
    height: 60

    property color fillColor: "#ff0000"
    property color strokeColor: "#414141"
    property real strokeWidth: 4.4  // 按SVG尺寸缩放后的宽度

    Canvas {
        anchors.fill: parent

        onPaint: {
            const ctx = getContext("2d")
            ctx.clearRect(0, 0, width, height)

            // 创建适配当前尺寸的路径（原SVG坐标缩放10倍）
            const path = new Path2D()
            path.moveTo(30.03, 4.82)
            path.lineTo(55.63, 56.04)
            path.bezierCurveTo(42.91, 51.26, 4.52, 56.04, 4.52, 56.04)
            path.closePath()

            // 填充
            ctx.fillStyle = fillColor
            ctx.fill(path)

            // 描边
            ctx.strokeStyle = strokeColor
            ctx.lineWidth = strokeWidth
            ctx.stroke(path)
        }

        onFillColorChanged: requestPaint()
        onStrokeColorChanged: requestPaint()
        onStrokeWidthChanged: requestPaint()
    }
}

方案三：用Clip实现遮罩叠加 #

保留原SVG，通过Clip组件让彩色矩形仅显示SVG内部区域，再叠加原轮廓SVG。

QML实现代码 #

import QtQuick
import QtQuick.Svg

Item {
    width: 60
    height: 60

    property color fillColor: "#ff0000"

    // 彩色填充层：用SVG作为遮罩
    Rectangle {
        anchors.fill: parent
        color: fillColor
        clip: true

        SvgImage {
            anchors.fill: parent
            source: "cursor.svg"

            onStatusChanged: {
                if (status === SvgImage.Ready) {
                    const element = getElementById("Pointer_1")
                    element.setAttribute("fill", "white") // 白色作为遮罩可见区域
                    element.setAttribute("stroke", "none")
                }
            }
        }
    }

    // 叠加原轮廓SVG
    SvgImage {
        anchors.fill: parent
        source: "cursor.svg"
    }
}

方案对比 #

• 方案一：保留SVG结构，适合需复用SVG的场景，需调整SVG代码。
• 方案二：完全自定义绘制，最灵活，无需外部文件，适配性强。
• 方案三：无需大幅修改原SVG，通过Clip快速实现遮罩效果。

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