Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to use animate SVG and Overlap
Forum Updated to NodeBB v4.3 + New Features

How to use animate SVG and Overlap

Scheduled Pinned Locked Moved Solved General and Desktop
10 Posts 3 Posters 5.5k Views 1 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.
  • R Offline
    R Offline
    RiceBall
    wrote on last edited by RiceBall
    #1

    Hello,Everyone
    I want to use two animate SVGs .
    How could I let it animation and overlap it??

    untitled2.pro

    QT       += core gui
    QT += svg
    
    
    greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
    
    TARGET = untitled2
    TEMPLATE = app
    
    
    DEFINES += QT_DEPRECATED_WARNINGS
    
    CONFIG += c++11
    
    SOURCES += \
            main.cpp \
            mainwindow.cpp
    
    HEADERS += \
            mainwindow.h
    
    FORMS += \
            mainwindow.ui
    
    # Default rules for deployment.
    qnx: target.path = /tmp/$${TARGET}/bin
    else: unix:!android: target.path = /opt/$${TARGET}/bin
    !isEmpty(target.path): INSTALLS += target
    

    mainwindow.cpp

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include <QLabel>
    #include <QMovie>
    
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
    
        QLabel label;
    
        QMovie *movie =new QMovie("../iHMI_2/splash2.svg");
    
        ui->label->setMovie(movie);
    
        movie->start();
    
    
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    
    

    sample file
    https://drive.google.com/open?id=1GBJcaiA8Y1LJm1IbFFg-ZesDMRhyGwrj

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

      Qt supports only static part of SVG-tiny specification. It does not support animations.

      (Z(:^

      1 Reply Last reply
      0
      • D Offline
        D Offline
        Devopia53
        wrote on last edited by Devopia53
        #3

        If you want to overlap two animated SVG images, use QSvgWidget.

        alt text

        R 1 Reply Last reply
        0
        • D Devopia53

          If you want to overlap two animated SVG images, use QSvgWidget.

          alt text

          R Offline
          R Offline
          RiceBall
          wrote on last edited by
          #4

          @Devopia53
          Can you give me your sample let me refer it ??
          Thank you

          D 1 Reply Last reply
          0
          • R RiceBall

            @Devopia53
            Can you give me your sample let me refer it ??
            Thank you

            D Offline
            D Offline
            Devopia53
            wrote on last edited by
            #5

            @RiceBall

            There is nothing special. like this:

            #include <QSvgWidget>
            [...]
            auto    sw1 = new QSvgWidget(QString(":/splash1.svg"), this);
            layout()->addWidget(sw1);
            auto    sw2 = new QSvgWidget(QString(":/splash2.svg"), this);
            sw2->setGeometry(50, 50, rect().width(), rect().height());
            
            R 1 Reply Last reply
            3
            • R Offline
              R Offline
              RiceBall
              wrote on last edited by
              #6

              @Devopia53
              Thank you for your help.

              untitle4.pro

              QT       += core gui
              QT += svg
              
              greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
              TARGET = untitled4
              TEMPLATE = app
              DEFINES += QT_DEPRECATED_WARNINGS
              CONFIG += c++11
              SOURCES += \
                      main.cpp \
                      mainwindow.cpp
              HEADERS += \
                      mainwindow.h
              FORMS += \
                      mainwindow.ui
              # Default rules for deployment.
              qnx: target.path = /tmp/$${TARGET}/bin
              else: unix:!android: target.path = /opt/$${TARGET}/bin
              !isEmpty(target.path): INSTALLS += target
              

              mainwindow.h

              #ifndef MAINWINDOW_H
              #define MAINWINDOW_H
              
              #include <QMainWindow>
              #include <QtSvg/QSvgWidget>
              
              namespace Ui {
              class MainWindow;
              }
              
              class MainWindow : public QMainWindow
              {
                  Q_OBJECT
              
              public:
                  explicit MainWindow(QWidget *parent = nullptr);
                  ~MainWindow();
              
              private:
                  Ui::MainWindow *ui;
              };
              
              #endif // MAINWINDOW_H
              
              

              mainwindow.cpp

              #include "mainwindow.h"
              #include "ui_mainwindow.h"
              #include <QtSvg/QSvgWidget>
              
              MainWindow::MainWindow(QWidget *parent) :
                  QMainWindow(parent),
                  ui(new Ui::MainWindow)
              {
                  ui->setupUi(this);
              
                  auto    sw1 = new QSvgWidget(QString("../untitled4/splash1.svg"), this);
                  layout()->addWidget(sw1);
                      sw1->setGeometry(50, 50, rect().width(), rect().height());
                  auto    sw2 = new QSvgWidget(QString("../untitled4/splash2.svg"), this);
                  sw2->setGeometry(50, 50, rect().width(), rect().height());
              
              
              }
              
              MainWindow::~MainWindow()
              {
                  delete ui;
              }
              
              

              0_1556860750801_final result.gif

              1 Reply Last reply
              1
              • D Devopia53

                @RiceBall

                There is nothing special. like this:

                #include <QSvgWidget>
                [...]
                auto    sw1 = new QSvgWidget(QString(":/splash1.svg"), this);
                layout()->addWidget(sw1);
                auto    sw2 = new QSvgWidget(QString(":/splash2.svg"), this);
                sw2->setGeometry(50, 50, rect().width(), rect().height());
                
                R Offline
                R Offline
                RiceBall
                wrote on last edited by
                #7

                @Devopia53
                Sorry to bother you again.
                Why I can't show splash1.svg when I change background-color?
                Do you have any idea ??

                0_1556867260896_03c0d04b-a261-4f63-a5cb-4fc259633504-image.png

                D 1 Reply Last reply
                0
                • R RiceBall

                  @Devopia53
                  Sorry to bother you again.
                  Why I can't show splash1.svg when I change background-color?
                  Do you have any idea ??

                  0_1556867260896_03c0d04b-a261-4f63-a5cb-4fc259633504-image.png

                  D Offline
                  D Offline
                  Devopia53
                  wrote on last edited by
                  #8

                  @RiceBall

                  If you do not specify a selector when using a stylesheet, the properties of the child widget may also be affected. Specifying a selector resolves this. like this:

                  QMainWindow {
                  background-color: rgb(0, 0, 0);
                  }
                  
                  R 2 Replies Last reply
                  3
                  • D Devopia53

                    @RiceBall

                    If you do not specify a selector when using a stylesheet, the properties of the child widget may also be affected. Specifying a selector resolves this. like this:

                    QMainWindow {
                    background-color: rgb(0, 0, 0);
                    }
                    
                    R Offline
                    R Offline
                    RiceBall
                    wrote on last edited by
                    #9

                    @Devopia53 said in How to use animate SVG and Overlap:

                    @RiceBall

                    If you do not specify a selector when using a stylesheet, the properties of the child widget may also be affected. Specifying a selector resolves this. like this:

                    QMainWindow {
                    background-color: rgb(0, 0, 0);
                    }
                    

                    It's so perfect.
                    Thank you Devopia53.

                    minwindow.cpp

                    #include "mainwindow.h"
                    #include "ui_mainwindow.h"
                    #include <QtSvg/QSvgWidget>
                    
                    MainWindow::MainWindow(QWidget *parent) :
                        QMainWindow(parent),
                        ui(new Ui::MainWindow)
                    {
                    
                        ui->setupUi(this);
                    
                        this->setStyleSheet("QMainWindow{background-color: rgb(0, 0, 0)}");
                    
                    
                        auto    sw1 = new QSvgWidget(QString("../untitled4/splash1.svg"), this);
                        layout()->addWidget(sw1);
                            sw1->setGeometry(0, 100, 1024, 768);
                            
                        auto    sw2 = new QSvgWidget(QString("../untitled4/splash2.svg"), this);
                             sw2->setGeometry(0, 100, 1024, 768);
                    }
                    
                    MainWindow::~MainWindow()
                    {
                        delete ui;
                    }
                    
                    

                    0_1556871000711_final result.gif

                    1 Reply Last reply
                    1
                    • D Devopia53

                      @RiceBall

                      If you do not specify a selector when using a stylesheet, the properties of the child widget may also be affected. Specifying a selector resolves this. like this:

                      QMainWindow {
                      background-color: rgb(0, 0, 0);
                      }
                      
                      R Offline
                      R Offline
                      RiceBall
                      wrote on last edited by
                      #10

                      @Devopia53 said in How to use animate SVG and Overlap:

                      @RiceBall

                      If you do not specify a selector when using a stylesheet, the properties of the child widget may also be affected. Specifying a selector resolves this. like this:

                      QMainWindow {
                      background-color: rgb(0, 0, 0);
                      }
                      

                      Sorry , now I meet a new problem .
                      When I use tab Widget, and I want one screen is shown SVG Widget.
                      But it looks like at Main Screen not at tab widget.
                      What is wrong ?

                      https://drive.google.com/open?id=1grsT0nF37w7dRHn_rXN4Dxdcb-WSj3hR

                      0_1556899252503_final result.gif

                      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