SVG изображение меняет размер после применения transform rotate

#javascript #svg #svg_animation

Я сделал 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

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



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

  





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



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

  



Ответ 2

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

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

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


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

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


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

transform-origin:50% 50%;