为什么在 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) 的非整数有关。

如果您将 gap 更改为 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 间隙的镀铬，没有不均匀的间距。

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