1
Good morning, I’d like to get help in a situation I came across today.
I have an animation in . svg that I wanted to do something that I’m not getting a way to do.
I have several elements and they are all made as polygons, also have CSS and duration.
Now what I wanted was that when the page opens or is refreshed the animations are always running an internal time or even a real time. I don’t have much knowledge of. svgs or php I know I shouldn’t even use this type, but it has to be svg because it is for a specific software and I also know that in php it is possible to "read/show" hours.
Now the question is how can I put the two together and say that for example: From 2am starts the animation of the plane that will walk from left to right and will last 60 minutes, and if I close the page or refresh the animation instead of starting again or resume, 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>