Повернуть изображение в соответствии с пути SVG - PullRequest
Новая
       8

Повернуть изображение в соответствии с пути SVG

5 голосов
/ 07 января 2020

Посмотрите на изображение, которое я прикрепил. Мне нужно, чтобы изображение машины поворачивалось при повороте svg path? Возможно ли это?

Вот мой код: 

 <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

1 Ответ

3 голосов
/ 07 января 2020

Я попробовал вот так Это сработало для меня: с помощью набора элементов 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>
...