internet-explorer - 当 SVG 前面有一个不以像素为单位大小的元素时，IE 和 Edge 中的路径边缘模糊

Question

我正在尝试使用 SVG 绘制一个清晰的矩形<path>。

我有一个问题，即在 IE 和 Edge 中渲染时，形状的顶部和底部边缘有意外的抗锯齿。仅当<path>元素前面有另一个元素的维度以不同于 的单位表示时，才会出现此问题px。

<div>SVG<rect>元素不会出现问题。<path>似乎只有 SVG受到影响。

感谢您的帮助，如何在<path>不改变周围环境<div>的情况下使渲染清晰？

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

• 本机按钮：https ://jsfiddle.net/7btjcy18/
• 使用 REM 单位大小的字体：https ://jsfiddle.net/ptzs71ba/

以下屏幕截图显示了该问题。左侧是 Chrome，右侧是 Edge。在缩放中，您可以看到用箭头突出显示的模糊边界。

#div1 {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

<div id="div1">REM font size</div>

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 0 0 L 300 0 L 300 100 L 0 100" />
</svg>

标签： internet-explorersvgmicrosoft-edge

Answer 1

该问题与 svg 处于 31.2 等坐标（不完全在像素线上）有关。我还发现了一个类似的线程。根据公认的答案，您应该设计 svg 以使其形状位于像素边界（尤其是形状的水平和垂直部分）。

每当您的形状通过像素中间时，由于 2D 渲染器使用的抗锯齿，您将获得灰色像素。

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

#div1 {
  font-size: 2rem;
  margin-bottom: 20px;
}

#div2 {
  width: 300px;
  height: 100px;
  background: black;
  margin-bottom: 20px;
}

<div id="div1">REM font size</div>

<div id="div2"></div>
<svg xmlns="http://www.w3.org/2000/svg">
   <path d="M 0 0 L 300 0 L 300 100 L 0 100" />
</svg>