javascript - 设置变换旋转后，SVG图像改变大小

Question

我用汽车（图像）制作了一个 svg，它跟随鼠标并将其保持在圆心。

这在 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 + ') '); 

我制作了一个小提琴，可以在单击 时切换汽车button。请在 Safari 和 Chrome 中尝试以查看差异。

https://jsfiddle.net/065o4xke/3/

标签： javascriptsvgsvg-animate

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

<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="//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="//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>