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

Question

我用一辆汽车（图像）制作了一个 svg，它跟随鼠标并保持它的鼻子朝向圆心。

这在 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 可以在点击 button 时切换汽车。请在 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>

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

Svg image changes size after setting transform rotate

javascript

svg

svg-animate