SVG在img标签大小不一致，运动似乎在跳舞

Question

背景

我正在开发一款应在iOS和Android设备上运行的PhoneGap / Cordova应用，并使用嵌入<img/>标签的SVG图片，使用HTML属性width=""和height=""设置尺寸和style="left: ...px; top: ...px; zoom: ...;"设置它们的相对位置，缩放系数在多个图像对象之间是均匀的。

我的问题是，当放大和缩小时，图像会在Safari和Chrome中以不同的大小呈现。这也可以在这些浏览器的桌面版本中看到，我想我可以将其缩小到与left和top CSS属性相关的舍入问题。使用zoom CSS属性以及width和height HTML属性的小数值时，问题会更加严重。

I have created a demo here和downloadable version here。在这个演示中，我使用了两个SVG图像，除了它们的填充颜色外，它们用于颜色对比。演示中有三对：最顶层使用小数zoom值，中间使用小数width和height值，最后一个使用{{1的圆倍数}和width值。有一个按钮可以启动动画，只需将每个步骤中的一个像素向右移动所有图像。在Chrome中很容易注意到中间的图像大幅度地摇晃，而另外两个中的变化则更难以注意到 - 但它们也在那里。我使用的是Windows 10和Chrome 65.0 - 虽然我也可以看到Firefox和Edge中的问题变体（尽管 - 它们的呈现方式不同）。

这是演示的动画。请注意，我在帧之间更改的是所有图像的height位置 - 并且以统一的方式进行。

实际问题

对于我的应用程序，图像必须在left级别和页面上的不同位置具有一致的呈现。平稳地更改zoom，zoom和left属性时，图像应该平稳地改变尺寸和位置。更改top和left属性时，不应更改维度。有没有一种方法可以确保当多个图像使用相同的（可能是小数的）top和width值，但改变height和left位置时，它们将以相同的方式呈现？有没有办法确保top属性的平滑过渡导致平滑渲染？

答案指南

正确的答案可以解释为什么使用当前的浏览器无法做到这一点，指向一个描述此问题的已确认的错误报告，并表明它会影响任一平台中的流行设备;或者提供一种替代方法来定位和定位图像，同时保留使用小数值的可能性，并在所有图像使用相同尺寸时获得均匀性和平滑变焦过渡。

感谢您提供的任何帮助！

Answer 1

我认为这是因为zoom属性支持在浏览器之间不太一致（正如您在此处看到的那样https://caniuse.com/#feat=css-zoom）。请尝试transform: scale()属性：

＆＃13;

＆＃13;

function budgeRight() {
   var imgs = document.querySelectorAll('img');
   imgs = Array.prototype.slice.apply(imgs);
   imgs.forEach(function(img) { 
      var left = parseInt(img.style.left);
      
      img.style.left = (left + 1).toString() + "px"; 
    });
}

var interval = null;
var button = document.getElementById('button-click-me');

button.addEventListener('click', function() {
  if (interval) {
    clearInterval(interval);
    interval = null;
  }
  else {
    interval = setInterval(budgeRight, 500);
  }
});

＆＃13;

img { position: absolute; }
body { background-color: #000; }

＆＃13;

<img style="-webkit-transform: scale(2.3); -moz-transform: scale(2.3); -ms-transform: scale(2.3); -o-transform: scale(2.3); transform: scale(2.3); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; left: 41px; top: 25px;" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_white.svg?sanitize=true">
<img style="-webkit-transform: scale(2.3); -moz-transform: scale(2.3); -ms-transform: scale(2.3); -o-transform: scale(2.3); transform: scale(2.3); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; left: 40px; top: 25px;" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_red.svg?sanitize=true">
<img style="-webkit-transform: scale(2.3); -moz-transform: scale(2.3); -ms-transform: scale(2.3); -o-transform: scale(2.3); transform: scale(2.3); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; left: 31px; top: 35px;" width="9.35" height="23.35" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_red.svg?sanitize=true">
<img style="-webkit-transform: scale(2.3); -moz-transform: scale(2.3); -ms-transform: scale(2.3); -o-transform: scale(2.3); transform: scale(2.3); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; left: 32px; top: 35px;" width="9.35" height="23.35" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_white.svg?sanitize=true">
<img style="left: 91px; top: 130px;" width="18" height="42" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_red.svg?sanitize=true">
<img style="left: 94px; top: 130px;" width="18" height="42" src="https://gist.githubusercontent.com/kwikwag/74b991206c5fd197c70a6ec2c02fd238/raw/3f4070dbb97c69f716ad6b32ca5f6abd1f4fd702/rect_white.svg?sanitize=true">
<button id="button-click-me">Click me</button>

＆＃13;

＆＃13;

＆＃13;

注意我添加了transform-origin: top left，以便从左上角缩放每张图片。 我还使用了所有供应商前缀-webkit-，-moz-等来最大限度地兼容这两个属性......