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>