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

在Internet Explorer 11中渲染时，SVG矩形的间距和宽度在视觉上是不均匀的

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

这是一个样本-

var cont=document.getElementById（'container'），
svg=document.createElements（“http://www.w3.org/2000/svg“，”svg“，
直肠，
我
startX=50，
startY=100，
宽度=2，
高度=200，
差距=0.8；
setAttribute（“宽度”，500）；
setAttribute（“高度”，500）；
setAttribute（“版本”、“1.1”）；
setAttribute（“id”、“mysvg”）；
对于（i=0；i<100；i++）{
rect=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
rect.setAttribute（“填充”、“rgba（88162213,1）”；
rect.setAttribute（“x”，startX）；
矩形setAttribute（“y”，startY）；
rect.setAttribute（“宽度”，宽度）；
rect.setAttribute（“高度”，高度）；
appendChild（rect）；
startX+=宽度+间隙；
startY+=1；
高度-=1；
}
container.appendChild（svg）
它与gap（0.8）的非整数值有关

如果将“间隙”更改为1，则会一致渲染

var cont=document.getElementById（'container'），
svg=document.createElements（“http://www.w3.org/2000/svg“，”svg“，
直肠，
我
startX=50，
startY=100，
宽度=2，
高度=200，
差距=1；
setAttribute（“宽度”，500）；
setAttribute（“高度”，500）；
setAttribute（“版本”、“1.1”）；
setAttribute（“id”、“mysvg”）；
对于（i=0；i<100；i++）{
rect=document.createElements（“http://www.w3.org/2000/svg“，“rect”）；
rect.setAttribute（“填充”、“rgba（88162213,1）”；
rect.setAttribute（“x”，startX）；
矩形setAttribute（“y”，startY）；
rect.setAttribute（“宽度”，宽度）；
rect.setAttribute（“高度”，高度）；
appendChild（rect）；
startX+=宽度+间隙；
startY+=1；
高度-=1；
}
container.appendChild（svg）；

这是因为，当您有一个非整数值，而其他所有内容都是基于整数的时，在浏览器中绘制时，将存在不均匀的像素映射。
如果放大和缩小svg，可以看到间隙变化


铬与0.8的差距，
注意你在IE11中解释的同样的事情

镀铬，间隙为1.0，间距不均匀

这与像素映射有关，它只是从可均匀分割的像素中绘制形状，这意味着如果使用十进制，它会被截断。
我知道。实际上，我正在绘制一个图形，其中所有绘图的宽度和间距值（svg矩形）都是小数点，即大部分是浮点值，而不是整数，即整数。在Chrome浏览器上，Firefox可以正确渲染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 = 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>