Question

在Internet Explorer 11中呈现时，SVG矩形的间隙和宽度在视觉上不均匀。

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

以下是一个示例 -

＆＃13;

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

＆＃13;

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

＆＃13;

提前致谢！

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，间距不均匀。

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

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

1 个答案: