How to make an animation in a SVGWidget by using qt?



  • m_svgWidget = new QSvgWidget;
    m_svgWidget->load(QString(":/clock.svg"));
    m_svgWidget->show();
    

    The above codes will show,
    0_1529558012181_捕获.PNG

    What I want is,

    0_1529558510355_1.gif

    If I use HTML, I can rotate the pointer and change the value by using javascript, but now I need to use qt to make it,,,,e,e, how to do?

    Below is the file clock.svg (the code about the pointer is at line 81, and the code about the value is at line 83).

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="730" height="390" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:perfectsvg="http://www.perfectsvg.com/PerfectSVG" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
    					<g transform="matrix(1.168225,0,0,1.168224,478.1774,138.1776)" hw-powertime="10" id="XX_HWIstrument2_1_636355550889375000_XX" hwkey="XX_HWIstrument2_1_636355550889375000_XX">
    						<g>
    							<defs>
    								<linearGradient id="XX_HWIstrument2_1_636355550889375000_XXone" x1="0%" y1="0%" x2="100%" y2="100%">
    									<stop stop-color="#ABCDEF" offset="0" localid="XX_HWIstrument2_1_636355550889375000_XXone1"></stop>
    									<stop stop-color="#FFFFFF" offset="0.25"></stop>
    									<stop stop-color="#ABCDEF" offset="0.5" localid="XX_HWIstrument2_1_636355550889375000_XXone2"></stop>
    									<stop stop-color="#FFFFFF" offset="0.75"></stop>
    									<stop stop-color="#ABCDEF" offset="1" localid="XX_HWIstrument2_1_636355550889375000_XXone3"></stop>
    								</linearGradient>
    								<radialGradient id="XX_HWIstrument2_1_636355550889375000_XXtwo" cx="50%" cy="50%" fx="50%" fy="50%">
    									<stop stop-color="#FFFFFF" offset="0"></stop>
    									<stop stop-color="#ABCDEF" offset="1" localid="XX_HWIstrument2_1_636355550889375000_XXtwo1"></stop>
    								</radialGradient>
    								<linearGradient id="XX_HWIstrument2_1_636355550889375000_XXthree" x1="0%" y1="0%" x2="100%" y2="0%">
    									<stop stop-color="#FF0000" offset="0" localid="XX_HWIstrument2_1_636355550889375000_XXthree1"></stop>
    									<stop stop-color="#FFFFFF" offset="0.5"></stop>
    									<stop stop-color="#FF0000" offset="1" localid="XX_HWIstrument2_1_636355550889375000_XXthree2"></stop>
    								</linearGradient>
    							</defs>
    							<path d="M 207 -7 L -7 -7 L -7 207 L -5 205 L -5 -5 L 205 -5 L 207 -7" stroke="none" fill="#FFFFFF"></path>
    							<path d="M 207 -7 L 207 207 L -7 207 L -5 205 L 205 205 L 205 -5 L 207 -7" stroke="none" fill="#666666"></path>
    							<rect x="-5" y="-5" width="210" height="210" stroke="none" fill="url(#XX_HWIstrument2_1_636355550889375000_XXone)"></rect>
    							<circle cx="100" cy="100" r="102" stroke="none" fill="#666666"></circle>
    							<circle localid="HWIstrumentType1" cx="100" cy="100" r="100" stroke="none" fill="#FFFFFF"></circle>
    							<g localid="HWPlate" transform="rotate(0 100 100)">
    								<path d="M23 164A100 100 0 1 1 177 164" stroke="black" fill="none"></path>
    								<path d="M178.25180805870446 83.36706473457922 L197.81476007338057 79.20883091822402A100 100 0 0 1 176.6044443118978 164.27876096865393L161.28355544951825 151.42300877492315A80 80 0 0 0 178.25180805870446 83.36706473457922" stroke="black" fill="red"></path>
    								<path d="M135.06969174312616 28.096476296066626 L143.8371146789077 10.12059537008328A100 100 0 0 1 197.81476007338057 79.20883091822402L178.25180805870446 83.36706473457922A80 80 0 0 0 135.06969174312616 28.096476296066626" stroke="black" fill="yellow"></path>
    								<path d="M64.93030825687382 28.09647629606664 L56.16288532109227 10.120595370083294A100 100 0 0 1 143.8371146789077 10.12059537008328L135.06969174312616 28.096476296066626A80 80 0 0 0 64.93030825687382 28.09647629606664" stroke="black" fill="green"></path>
    								<path d="M21.748191941295545 83.36706473457927 L2.185239926619431 79.2088309182241A100 100 0 0 1 56.16288532109227 10.120595370083294L64.93030825687382 28.09647629606664A80 80 0 0 0 21.748191941295545 83.36706473457927" stroke="black" fill="yellow"></path>
    								<path d="M38.71644455048176 151.42300877492315 L23.395555688102192 164.27876096865396A100 100 0 0 1 2.185239926619431 79.2088309182241L21.748191941295545 83.36706473457927A80 80 0 0 0 38.71644455048176 151.42300877492315" stroke="black" fill="red"></path>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(50 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(76 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(102 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(128 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(154 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(180 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(206 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(232 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(258 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(284 100 100)"></line>
    								<line x1="100" y1="170" x2="100" y2="200" stroke="black" transform="rotate(310 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(50 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(63 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(76 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(89 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(102 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(115 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(128 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(141 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(154 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(167 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(180 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(193 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(206 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(219 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(232 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(245 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(258 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(271 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(284 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(297 100 100)"></line>
    								<line x1="100" y1="180" x2="100" y2="200" stroke="black" transform="rotate(310 100 100)"></line>
                                    <text x="48.0373334128613" y="138.567256581192" font-size="12" stroke="blue">0</text>
                                    <text x="35.7822564234402" y="114.51531373598" font-size="12" stroke="blue">10</text>
                                    <text x="35.3111439559717" y="87.5252985509345" font-size="12" stroke="blue">20</text>
                                    <text x="46.7193547835967" y="63.0603114804605" font-size="12" stroke="blue">30</text>
                                    <text x="67.6977311926554" y="46.07235722205" font-size="12" stroke="blue">40</text>
                                    <text x="94" y="40" font-size="12" stroke="blue">50</text>
                                    <text x="120.302268807345" y="46.07235722205" font-size="12" stroke="blue">60</text>
                                    <text x="141.280645216403" y="63.0603114804605" font-size="12" stroke="blue">70</text>
                                    <text x="152.688856044028" y="87.5252985509344" font-size="12" stroke="blue">80</text>
                                    <text x="152.21774357656" y="114.51531373598" font-size="12" stroke="blue">90</text>
                                    <text x="139.962666587139" y="138.567256581192" font-size="12" stroke="blue">100</text>
                                </g>
    							<path id="HWzhizhen" d="M 100 160 L 95 100 L 105 100 L 100 160" stroke="#FF0000" fill="url(#XX_HWIstrument2_1_636355550889375000_XXthree)" transform="rotate(0 100 100)"></path>
    							<rect localid="HWBorder" x="45" y="120" width="110" height="20" stroke="none" fill="none"></rect>
    							<text id="HWmyshuzhi" x="90.1796875" y="135" fill="blue" stroke="none" font-family="Microsoft YaHei" font-size="16">0</text>
    							<circle cx="100" cy="100" r="10" stroke="none" fill="#666666"></circle>
    							<circle cx="100" cy="100" r="8" stroke="none" fill="url(#XX_HWIstrument2_1_636355550889375000_XXtwo)"></circle>
    						</g>
    					</g>
    				</svg>
    


  • I have found a way to rotate the pointer, but I always failed to change the value. The below is the whole project(including the svg file).

    https://github.com/Hapoa/_Repository/tree/master/Qt/SVGWidget


Log in to reply
 

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