Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML SVG - Change color
Forum Updated to NodeBB v4.3 + New Features

QML SVG - Change color

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 4 Posters 25.3k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    Prochy
    wrote on last edited by Prochy
    #1

    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

    1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

      Does it work if you remove "transform" statements?

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

      (Z(:^

      1 Reply Last reply
      0
      • SeeLookS Offline
        SeeLookS Offline
        SeeLook
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        0
        • V Offline
          V Offline
          vladstelmahovsky
          wrote on last edited by
          #4

          one issue there. Original image must be invisible

          1 Reply Last reply
          2
          • P Offline
            P Offline
            Prochy
            wrote on last edited by Prochy
            #5

            @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
                }
            
            V 1 Reply Last reply
            2
            • P Prochy

              @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
                  }
              
              V Offline
              V Offline
              vladstelmahovsky
              wrote on last edited by
              #6

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

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved