如何实现<img>标签引用的对象沿SVG路径动画？

我想制作一个动画，让PNG格式的对象（即图中第一条蓝线）沿SVG路径运动。尝试使用相关标签但没有效果，以下是我的代码：

<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>

问题分析与修正方案 #

代码无法生效的核心原因是SVG标签和属性的大小写错误，SVG对大小写敏感，以下是具体修正点：

1. 标签名修正：<animatemotion>改为<animateMotion>，这是SVG动画的标准标签名。
2. 属性名修正：repeatcount改为repeatCount，属性名同样区分大小写。
3. 移除冗余属性：<animateMotion>嵌套在<image>内部时，不需要xlink:href="#car"，直接作用于父元素即可。
4. 调试优化：路径设置了stroke:none，调试时可以临时改为stroke:green;stroke-width:2，方便确认路径位置。
5. 图片尺寸调整：原图片宽度1918px接近SVG视口宽度1920px，过大的尺寸可能导致动画效果不明显，建议缩小到合适尺寸（比如宽100px、高50px），后续可按需调整。

修正后的代码 #

<svg height="238.158mm" viewBox="0 0 1920 900" width="508.071mm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <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
                              ...（完整路径内容保留原代码即可）
                              1918.64,900.27 1919.62,900.00 1919.62,900.00" 
        id="animatePath" style="fill:none;stroke:green;stroke-width:2;stroke-miterlimit:10;"> 
  </path> 
  <image height="50px" id="car" width="100px" x="0" xlink:href="/data/cms/images/1668585137_img-top-panel-curve.png" y="500"> 
    <animateMotion begin="0s" dur="20s" repeatCount="indefinite" restart="whenNotActive"> 
      <mpath xlink:href="#animatePath"></mpath> 
    </animateMotion> 
  </image> 
</svg>

内容的提问来源于stack exchange，提问作者Hanim