根据svg路径旋转图像答案

【问题标题】：Rotate an image According to svg path根据svg路径旋转图像
【发布时间】：2020-04-24 15:14:24
【问题描述】：

看看我附上的图片。当 svg 路径转动时，我需要汽车图像转动吗？这可能吗？

这是我的代码：

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

【问题讨论】：

嗯，我认为用 svg 做起来很复杂。但是类似的应用程序处理它的方式不同。他们从 gps 而不是从 svg 路径获取方向。
@Arseniy-II 我只需要动画而不是实际的 GPS
将汽车设置为 marker 并为其设置动画，查看 bl.ocks.org/KoGor/8163268、developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion，以及 snapsvg 和 greensock

标签： html css svg svg-animate

【解决方案1】：

我试过这样它对我有用：使用 animateMotion 元素集 rotate="auto"

这是我的代码：

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

【讨论】：