为什么连续绘制的SVG矩形的间隙和宽度在IE11中呈现时不均匀？

Question

SVG矩形的间隙和宽度在Internet Explorer中呈现时11.

连续矩形绘制具有相同的间隙和宽度，但在IE11的间隙和宽度似乎是不均匀的视觉不均匀目视。

这里是一个样本 -

var cont = document.getElementById('container'), 
 
     svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), 
 
     rect, 
 
     i, 
 
     startX = 50, 
 
     startY = 100, 
 
     width = 2, 
 
     height = 200, 
 
     gap = 0.8; 
 

 
    svg.setAttribute("width", 500); 
 
    svg.setAttribute("height", 500); 
 
    svg.setAttribute("version", "1.1"); 
 
    svg.setAttribute("id", "mysvg"); 
 

 
    for (i = 0; i < 100; i++) { 
 
     rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
 
     rect.setAttribute("fill", "rgba(88,162,213,1)"); 
 
     rect.setAttribute("x", startX); 
 
     rect.setAttribute("y", startY); 
 
     rect.setAttribute("width", width); 
 
     rect.setAttribute("height", height); 
 
     svg.appendChild(rect); 
 

 
     startX += width + gap; 
 
     startY += 1; 
 
     height -= 1; 
 
    } 
 

 
    container.appendChild(svg);

<div id="container"></div>

提前感谢！

Answer 1

它与间距（0.8）中的非整数值有关。

如果您将差距更改为1，则表现一致。 https://jsfiddle.net/6jzcuh6s/

var cont = document.getElementById('container'), 
    svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), 
    rect, 
    i, 
    startX = 50, 
    startY = 100, 
    width = 2, 
    height = 200, 
    gap = 1; 

svg.setAttribute("width", 500); 
svg.setAttribute("height", 500); 
svg.setAttribute("version", "1.1"); 
svg.setAttribute("id", "mysvg"); 

for (i = 0; i < 100; i++) { 
    rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
    rect.setAttribute("fill", "rgba(88,162,213,1)"); 
    rect.setAttribute("x", startX); 
    rect.setAttribute("y", startY); 
    rect.setAttribute("width", width); 
    rect.setAttribute("height", height); 
    svg.appendChild(rect); 

    startX += width + gap; 
    startY += 1; 
    height -= 1; 
} 

container.appendChild(svg); 

<div id="container"></div> 

这是因为当你有一个非整数值和其他一切基于整型在浏览器中抽出时，会有像素的不均匀映射。 如果你放大和缩小svg，你可以看到间隔变化。

铬与0.8差距， 通知你解释IE11 同样的事情

铬与1.0的差距，没有不均匀间距。

这与像素映射有关，它仅从均匀可分的像素中绘制形状，这意味着如果使用小数点，它将被截断。