根据 svg 路径旋转图像

Question

Look at the image I attached. I needed the car image to turn when the svg path turns? Is this possible?

Here is my code:

 <div style="background-image: url(app-img/mapback.jpg); background-size: inherit"> <svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="240 -106 1440 772"> <rect x="240" y="-106" width="1440" height="772" style="fill: url(app-img/mapback.jpg)"></rect> <path id="MotionPath_1" class="st1" d="M 230 580 L 300 520 L 390 460 Q 500 400 995 155 C 1200 126 1200 106 1240 30 L 1270 -30 L 1150 -120 " style="stroke: #0000cc; stroke-width: 0px;"></path> <image class="st3" xlink:href="app-img/car.png" height="50" width="50"> <animateMotion dur="15.1s" repeatCount="indefinite" keySplines="0 0 0 0;0.7 0 0.2 1" calcMode="spline" fill="freeze" keyTimes="0;0;1" keyPoints="1;1;0"> <mpath xlink:href="#MotionPath_1"></mpath> </animateMotion> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="10s" repeatCount="indefinite" /> </image> </svg> </div>

Answer 1

I tried like This its worked for me: using the animateMotion element set rotate="auto"

this is my code:

 <div style="background-image: url(app-img/mapback.jpg); background-size: inherit"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1440 772" > <path id="MotionPath_2" class="st1" d="M 10 650 C 200 500 150 570 400 420 C 620 320 600 300 820 235 C 1000 200 980 150 1020 90 L 910 0" style="stroke: #0000cc;stroke-width: 0px;"></path> <g id="spaceship"> <image class="st3" xlink:href="app-img/car.png" height="50" width="50"/> <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#MotionPath_2"/> </animateMotion> </g> </svg> </div>