Internet explorer IE&；中的模糊路径边；SVG前面有未按像素大小调整的元素时的边缘

我正在尝试使用SVG

绘制一个锐利的矩形

我有一个问题，即在IE和edge中渲染时，形状的上边缘和下边缘会出现意外的抗锯齿。只有当

元素前面有另一个元素，并且该元素的尺寸以不同于

px

的单位表示时，才会出现问题

或SVG

元素似乎没有问题。似乎只有SVG

受到影响

非常感谢您的帮助，如何在不改变周围环境的情况下使

呈现得更清晰

我可以用一个简单的SVG对象模拟相同的问题，并且：

• 本机按钮：
• 使用REM单位的字体大小：

下面的屏幕截图显示了该问题。左侧为镀铬，右侧为边缘。在缩放时，可以看到用箭头高亮显示的模糊边界

#第1部分{
字号：1.2rem；
边缘底部：20px；
}

REM字体大小

这个问题与svg位于31.2这样的坐标系（不完全在像素线上）有关。我还找到了一个。根据公认的答案，您应该设计svg，使其形状位于像素边界上（特别是形状的水平和垂直部分）

任何时候形状通过像素中间时，都会由于2D渲染器使用的抗锯齿而获得灰色像素

我认为是非整数值

1.2rem

导致svg的坐标不在像素线上。我尝试使用整数值，但问题在IE和Edge中消失了：

#第1部分{
字号：2rem；
边缘底部：20px；
}
#第二组{
宽度：300px；
高度：100px；
背景：黑色；
边缘底部：20px；
}

REM字体大小

感谢您抽出时间和截图。事实上，*你的截图和我的截图有相同的区别。你只需要用绘图软件如Paint.NET放大屏幕就可以了。这是你截图的特写：@warpech我明白了。我再次研究，你可以检查我的最新答案。