QML SVG - Change color



  • Hi,

    i tried to use ColorOverlay for change a color in a SVG, but ColorOverlay isn't working correct.
    Example:

    color: Qt.rgba(0.01,0.01,0.01,1);
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        Image {
            anchors.centerIn: parent
            id: test
            source: "drawing.svg"
            transform: Rotation {id:rotation; angle: -45}
    
    
    
        }
        ColorOverlay{
            anchors.fill: test
            source:test
            color:"black"
            transform:rotation
        }
    

    And result is:
    svgChangeColor.png

    This isn't optimal result which i want :(

    I tried change the color by using QRegExp in SVG File.

        new QFile("c:/drawing.svg");
        QRegExp rx("fill:\#[0-9a-f]{6}");
        test->open(QIODevice::ReadWrite);
        QByteArray byteText = test->readAll();
        QString text(byteText);
    
        text.replace(rx,"fill:"+color.name().toUtf8());
        test->seek(0);
        test->write(text.toUtf8());
        test->close();
    

    Change the color works correct. But i don't know, how can i update the image in QML.

    It is better a option, how do i change the color?
    Sorry for my English, I'm just learning. I hope, you understand me. :)
    Thank you for help


  • Moderators

    Does it work if you remove "transform" statements?

    Can you generate a PNG from your SVG and use that instead?



  • If Your SVG-s are monochrome and if You have them more it is very usable and flexible to pack them into custom font and use then as a text.



  • one issue there. Original image must be invisible



  • @sierdzio
    It doesn't matter, if i use transform, PNG images or not.
    @vladstelmahovsky
    Thank you, it works perfect. :) I should have known. :)

    Solution:
        Image {
            anchors.centerIn: parent
            id: test
            source: "drawing.svg"
            transform: Rotation {id:rotation; angle: -45}
            antialiasing: true
            visible: false
    
        }
        ColorOverlay{
            anchors.fill: test
            source:test
            color:"black"
            transform:rotation
            antialiasing: true
        }
    


  • @Prochy no problems
    I have similar code in my "educational" project here: https://github.com/vladest/tempsQML


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.