animate image on SVG Path

user_7377273 0
Viewed 1468

I have a SVG path defined. I want to animate an image on that path. I can animate an object using <animateMotion>tag. But I can't figure out how to do that with an image.

Here is my svg path:

<svg id="svg" height="1746px" width="100%">
    <path d="M 100 50 Q 100 150 200 220 L 650 630 C 700 670 700 700 650 730 C 390 850 390 1000 580 1000
     Q 800 1000 900 1450 Q 900 1550 800 1550 L 300 1585 Q 160 1620 160 1740"stroke="black" stroke-width="30" fill="none"
    id="animatePath"/>
    <img src="car.png" id="car">
    <animateMotion xlink:href="#car" dur="10s" repeatCount="indefinite" begin="0s">
        <mpath xlink:href="#animatePath"/>
    </animateMotion>
</svg>

Thanks for any suggestions.

svg javascript
2 Answers

To snap a bitmap to a path using the animateMotion animation command instead of the <img> tag, it is better to use the SVG tag <image>

 <image xlink:href="https://i.stack.imgur.com/gLbds.png" y="-15" x="-15"  id="car" width="25px" height="25px">

The <image> attributes: y =" - 15 "x =" - 15 " position the icon relative to the path

<svg id="svg" height="1746px" width="100%">
     <!-- Way of movement -->
 <path d="M 100 50 Q 100 150 200 220 L 650 630 C 700 670 700 700 650 730 C 390 850 390 1000 580 1000
     Q 800 1000 900 1450 Q 900 1550 800 1550 L 300 1585 Q 160 1620 160 1740"stroke="black" stroke-width="30" fill="none"
    id="animatePath"/>
   <!-- Adding a bitmap to svg -->   
   <image id="car" xlink:href="https://i.stack.imgur.com/gLbds.png" y="-15" x="-15"   width="25px" height="25px">
    <animateMotion
   xlink:href="#car"
   dur="20s"
   repeatCount="1"
   begin="start.click"
   restart="whenNotActive" >
      
   <mpath xlink:href="#animatePath"/>
    </animateMotion> 
 </image>
  <!-- Animation Start Button -->
 <g id="start">
  <rect x="120" y="10" width="80" height="30" rx="5" fill="transparent" stroke="#B59964" />
   <text x="138" y="33" font-size="24" fill="#C75C5C" >Start </text>
 </g>
</svg>

user_73948710
Related