根据svg路径旋转图像

时间:2020-01-07 05:55:49

标签: html css svg svg-animate

看一下我附加的图像。当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>

image 1

0 个答案:

没有答案