Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to use animate SVG and Overlap



  • 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


  • Moderators

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



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

    alt text



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



  • @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());
    


  • @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



  • @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



  • @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);
    }
    


  • @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



  • @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


Log in to reply