為什么在IE11中渲染時連續繪制的SVG矩形的間隙和寬度不均勻？

Question

在Internet Explorer 11中呈現時，SVG矩形的間距和寬度在視覺上是不均勻的。

繪制具有相同間隙和寬度的連續矩形，但是在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，您可以看到間隙發生變化。

與.8差距的鉻，注意你在IE11中解釋的相同的事情

鉻與1.0間隙，沒有不均勻的間距。

這與像素映射有關，它只是從均勻可分的像素中繪制形狀，這意味着如果使用小數，它會被截斷。