I want to create an animation in which an object (in this case, the first blue line in the image https://i.stack.imgur.com/RDwQ2.png) move along an svg path. The line is provided in the form of PNG.
I tried using the tag but it's not changing anything.
Here is basically an example of what I wanted animate image on SVG Path.
Below is my code.
<svg height="238.158mm" viewbox="0 0 1920 900" width="508.071mm" xmlns="http://www.w3.org/2000/svg">
<path class="green-line" d="M 1.09,741.82
C 1.09,741.82 17.09,734.00 17.09,734.00
17.09,734.00 51.45,718.73 51.45,718.73
51.45,718.73 74.55,709.09 74.55,709.09
74.55,709.09 110.91,694.73 110.91,694.73
110.91,694.73 157.45,678.18 157.45,678.18
157.45,678.18 199.82,665.27 199.82,665.27
199.82,665.27 253.82,650.55 253.82,650.55
253.82,650.55 312.67,638.00 312.67,638.00
312.67,638.00 387.67,627.33 387.67,627.33
387.67,627.33 453.33,621.00 453.33,621.00
453.33,621.00 505.33,618.67 505.33,618.67
505.33,618.67 576.67,620.33 576.67,620.33
576.67,620.33 619.33,623.67 619.33,623.67
619.33,623.67 636.67,625.00 636.67,625.00
636.67,625.00 715.67,636.33 716.00,636.33
716.33,636.33 783.00,648.33 783.00,648.33
783.00,648.33 846.67,665.00 846.67,665.00
846.67,665.00 895.33,679.00 895.33,679.00
895.33,679.00 951.33,697.67 951.33,697.67
951.33,697.67 1026.00,723.33 1026.00,723.33
1026.00,723.33 1097.33,747.67 1097.33,747.67
1097.33,747.67 1176.67,776.00 1176.67,776.00
1176.67,776.00 1236.67,798.00 1236.67,798.00
1236.67,798.00 1265.00,807.67 1265.00,807.67
1265.00,807.67 1316.00,826.55 1316.00,826.55
1316.00,826.55 1351.64,837.27 1351.64,837.27
1351.64,837.27 1389.09,847.82 1389.09,847.82
1389.09,847.82 1429.45,858.36 1429.45,858.36
1429.45,858.36 1452.91,863.82 1452.91,863.82
1452.91,863.82 1470.81,868.06 1470.81,868.06
1470.81,868.06 1489.88,872.06 1489.88,872.06
1489.88,872.06 1503.88,874.25 1503.88,874.25
1503.88,874.25 1513.50,875.94 1513.50,875.94
1513.50,875.94 1533.44,879.31 1533.44,879.31
1533.44,879.31 1546.38,881.56 1546.38,881.56
1546.38,881.56 1556.19,883.00 1556.19,883.00
1556.19,883.00 1566.19,884.19 1566.19,884.19
1566.19,884.19 1596.69,887.69 1596.69,887.69
1596.69,887.69 1614.12,889.88 1614.12,889.88
1614.12,889.88 1633.06,891.12 1633.06,891.12
1633.06,891.12 1645.25,892.25 1645.25,892.25
1645.25,892.25 1682.62,895.06 1682.62,895.06
1682.62,895.06 1693.31,896.12 1693.31,896.12
1693.31,896.12 1707.22,897.04 1707.22,897.04
1707.22,897.04 1723.17,897.78 1723.17,897.78
1723.17,897.78 1729.09,898.22 1729.09,898.22
1729.09,898.22 1763.43,899.22 1763.43,899.22
1763.43,899.22 1768.74,899.48 1768.78,899.48
1768.83,899.48 1774.59,899.56 1774.59,899.56
1774.59,899.56 1778.34,899.88 1778.34,899.88
1778.34,899.88 1779.50,899.97 1779.50,899.97
1779.50,899.97 1793.39,899.91 1793.39,899.91
1793.39,899.91 1807.48,899.96 1807.48,899.96
1807.48,899.96 1817.13,900.00 1817.13,900.00
1817.13,900.00 1822.35,899.83 1822.43,899.87
1822.52,899.91 1884.73,899.91 1884.73,899.91
1884.73,899.91 1897.73,899.91 1897.73,899.91
1897.73,899.91 1918.64,900.27 1918.64,900.27
1918.64,900.27 1919.62,900.00 1919.62,900.00" id="animatePath" style="fill:none;stroke:none ;stroke-miterlimit:10;">
</path>
<image height="250px" id="car" width="1918px" x="0" xlink:href="/data/cms/images/1668585137_img-top-panel-curve.png" y="500">
<animatemotion begin="0s" dur="20s" repeatcount="indefinite" restart="whenNotActive" xlink:href="#car">
<mpath xlink:href="#animatePath">
</mpath>
</animatemotion>
</image>
</svg>
</div>
