根据SVG路径旋转图像

Question

请看我附上的图片。当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>

- Aashif Ahamed

---

我认为使用SVG做这件事情相当复杂。但是类似的应用程序会采用不同的处理方式。它们从GPS获取方向，而不是从SVG路径获取。 - Arseniy-II

@Arseniy-II 我只需要动画而不是实际的GPS。 - Aashif Ahamed

将汽车设置为“标记”，并对其进行动画处理，请参考http://bl.ocks.org/KoGor/8163268，https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion，以及snapsvg和greensock。 - Ruskin

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

- Aashif Ahamed