.SVG + PHP Automatic Animation

1

Good morning, I would like to get help in a situation that I came across today.

I have an animation in .svg that wanted to do something that I can not find a way to accomplish.

I have several elements and they are all made as polygons, they also have CSS and duration.

Now what I wanted was that when the page is opened or refreshed the animations are always running an internal schedule or even a real schedule. I do not have much knowledge of .svgs nor php I know I should not even use this type, but it has to be svg because it is for specific software and I also know that in php it is possible to "read / show" hours.

Now the question is how do I get the two together and say that for example: From 2:00 AM onwards, the animation of the plane that goes from left to right starts and will last for 60 minutes, and if I close the page or refresh the animation instead of starting again or resuming, continue the animation (left and right) ).

(I leave a small example of the code below)

    <head>
        <meta charset="utf-8">
        <title>Fundo TIGER</title>
        <link rel="stylesheet" type="text/css" href="animate.css">
        <!--- FONT AWESOME --->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    </head>
    <body style="margin:0px;">
        
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px" height="250px">
<!------------------------------FUNDO-------------------------------->
    <g id="ventana">
        <rect x="0" y="0" fill="#3498db" width="1920" height="1080">

        </rect>

    </g>
<g id="avion" fill-opacity="0">
        <path fill="#2c3e50" d="M490,187h10l5.1,5c0,0,31.1,0,40.9,0s10.2,8,0,8s-45,0-45,0L490,187z">
            <animate attributeName="fill-opacity" attributeType="CSS" from="0" to="1" begin="5s" dur="1s" fill="freeze"/>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" from="1" to="500" begin="5s" dur="35s"/>
            <animate attributeName="fill-opacity" attributeType="CSS" from="1" to="0" begin="15s" dur="1s" fill="freeze"/>
        </path>
        <polygon fill="#2c3e50"points="507.4,187 517.1,199.9 507.3,207 515,207 529.3,198.1 514.8,187">
            <animate attributeName="fill-opacity" attributeType="CSS" from="0" to="1" begin="5s" dur="1s" fill="freeze"/>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" from="1" to="500" begin="5s" dur="35s"/>
            <animate attributeName="fill-opacity" attributeType="CSS" from="1" to="0" begin="15s" dur="1s" fill="freeze"/>
        </polygon>

    </g>
    
asked by anonymous 05.08.2016 / 13:07

0 answers