javascript - Svg 图像在设置变换旋转后更改大小

Question

我制作了一个 svg，其中有一辆汽车(图像)跟随鼠标并保持它的 Nose 朝向圆心。

这在 Windows 中运行良好。 (在 Chrome、Firefox、Edge 上测试过)。

---

问题

当position改变，rotation设置好，小车无缘无故改变尺寸。这种情况(我认为)发生在 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 中尝试查看差异。

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

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>