3

Я сделал SVG с машиной (image), которая следует за мышью и держит ее переднюю часть к центру круга.

Это очень хорошо работает в Windows (проверено на Chrome, Firefox, Edge).

Проблема

Когда положение машины меняется и начинается вращение, машина меняет размер без причины. Это происходит (я думаю) на устройствах IOS (протестировано на Macbook - Safari и iPhone - Safari & Chrome).

Положение просто изменяется, устанавливая x и y изображения. Вращение (которое, я думаю, вызывает проблему) изменяется путем установки атрибута transform.

image.setAttributeNS(null, 'x', (xy.x - (12 * 0.25)));
image.setAttributeNS(null, 'y', (xy.y - (5.4 / 2)));
image.setAttributeNS(null, 'transform', 'rotate(' + (180 - angle) + ',' + xy.x + ',' + xy.y + ') '); 

Я сделал fiddle, где при нажатии на кнопку происходит перемещение машины на другую позицию . Пожалуйста, попробуйте это в Safari и Chrome, чтобы увидеть разницу.

1

2 ответа 2

2

Пожалуйста, сообщите мне, - если это то движение машины, которое вам необходимо:

var circle = document.getElementById("circle");
var radius = 100 / (2 * Math.PI);
var xmlns = "http://www.w3.org/2000/svg";
var procent = 100 / (360 / 15);
var offset = 0 - procent / 2;

let angle = 0

function rotateCar(){
  requestAnimationFrame(rotateCar);
  angle +=.5;
  car.setAttributeNS(null, 'transform', `rotate(${angle},21,21)`);
}

rotateCar()
.wrapper {
  height: 300px;
  width: 300px;
  border: 1px solid black;
}
<div class="wrapper">
  <svg id="svg" viewBox="0 0 42 42" width="100%" height="100%">
      <circle cx="21" cy="21" r="16" stroke="red" fill="none" />
      
      <image id="car" xlink:href="https://cdn.via.nl/img/mainmot/4.svg" x="2.1450689516760377" y="16.912873272286454" width="12" height="5.4" transform="rotate(0,21,21)"></image>
  </svg>
</div>

В случае, если вы хотите центрировать автомобиль на дорожке, вы можете сделать что-то вроде этого: Вы оборачиваете изображение в группу. Внутри группы машина позиционируется так, чтобы она была в центре. Далее вы вращаете группу.

var circle = document.getElementById("circle");
var radius = 100 / (2 * Math.PI);
var xmlns = "http://www.w3.org/2000/svg";
var procent = 100 / (360 / 15);
var offset = 0 - procent / 2;

let angle = 0

function rotateCar(){
  requestAnimationFrame(rotateCar);
  angle +=.5;
  car.setAttributeNS(null, 'transform', `rotate(${angle},21,21)`);
}

rotateCar()
.wrapper {
  height: 300px;
  width: 300px;
  border: 1px solid black;
}
<div class="wrapper">
  <svg id="svg" viewBox="0 0 42 42" width="100%" height="100%">
      <circle cx="21" cy="21" r="16" stroke="red" fill="none" />
      <g id="car" transform="rotate(0,21,21)">
      <image xlink:href="https://cdn.via.nl/img/mainmot/4.svg" x="0" y="21" width="12" height="5.4" transform="translate(0,-2.7)" ></image>
    </g>
  </svg>
</div>

2

Второй вариант движения машины

Чтобы развернуть машину для движения вдоль трассы и для уменьшения её размеров применена команда трансформации:

transform:rotate(75deg) scale(0.75);

В svg для корректного вычисления центра вращения потребовались бы некоторые усилия. В css это реализуется проще:

transform-box: fill-box;  - контейнер по габаритным размерам объекта       

И вычисляется центр вращения

transform-origin:50% 50%;

<style>
.wrapper {
  height: 500px;
  width: 500px;
  border: 1px solid black;
}
.img1 {
width:12;
height:5.4;
transform-origin:50% 50%;
transform-box: fill-box;
transform:rotate(75deg) scale(0.75);
}
</style>
<div class="wrapper">
  <svg id="svg" viewBox="0 0 42 42" width="100%" height="100%">
     
	  <rect width="100%" height="100%" fill="#888888" />
      <circle cx="21" cy="21" r="16" stroke="#DEDEDE" fill="none"  stroke-dasharray="8 0.377" />
      <g id="car" transform="rotate(0,21,21)">
      <image class="img1" xlink:href="https://cdn.via.nl/img/mainmot/4.svg" x="0.5" y="21" width="10px" height="5.4px"  ></image>
    </g>
  </svg>
</div>
<script>
var circle = document.getElementById("circle");
var xmlns = "http://www.w3.org/2000/svg";
let angle = 0

function rotateCar(){
  requestAnimationFrame(rotateCar);
  angle -=0.2;
  car.setAttributeNS(null, 'transform', `rotate(${angle},21,21)`);
}

rotateCar()
</script>

1
  • интересненько...
    – user262779
    9 авг 2019 в 18:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.