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

Question

背景

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

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

我在这里创建了一个demo和一个可下载的版本.在这个演示中,我使用了两个SVG图像,除了它们的填充颜色外,它们用于颜色对比.演示中有三对:最顶层使用小zoom数值,中间使用小数width和height值,最后一个使用width和height值的圆倍数.有一个按钮可以启动动画,只需将每个步骤中的一个像素向右移动所有图像.在Chrome中很容易注意到,中间的图像大幅度地摇晃,而另外两个中的变化则更难以注意到 - 但它们也在那里.我正在使用Windows 10和Chrome 65.0 - 虽然我也可以看到Firefox和Edge中的问题变体(尽管 - 它们的呈现方式不同).

这是演示的动画.请注意,我在帧之间改变的是left所有图像的位置 - 并且以统一的方式这样做.

实际问题

对于我的应用程序,图像必须zoom在页面上的级别和不同位置具有一致的呈现.当改变zoom,left并top顺利地性能,图像应该改变的尺寸和位置顺利,尊称.更改left和top属性时,它们不应更改尺寸.有没有一种方法可以确保当多个图像使用相同(可能是分数)width和height值,但是变化left和top位置时,它们将被渲染为相同的？有没有办法确保zoom属性的平滑过渡导致平滑渲染？

答案指南

一个正确的答案要么解释为什么使用当前的浏览器是不可能的,指向一个描述此问题的确认的错误报告,并表明它影响任一平台中的流行设备; 或提供另一种方法来确定图像的大小和位置,同时保留使用小数值的可能性,并在所有图像使用相同尺寸时获得均匀性和平滑的变焦过渡.

感谢您提供的任何帮助!

Answer 1

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

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

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

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

请注意，我添加了transform-origin: top left, 以从左上角缩放每个图像。我还使用了所有供应商前缀-webkit-、-moz-等，以在这两个属性上获得最大的兼容性......