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

Posted 2023-03-28

【中文标题】当 SVG 前面有一个不以像素为单位大小的元素时，IE 和 Edge 中的路径边缘模糊

【英文标题】：Blurry path edges in IE & Edge when SVG is preceded by an element not sized in pixels

【发布时间】：2020-06-03 14:38:47

【问题描述】：

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

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

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

感谢任何帮助，如何在不改变周围 <div>s 的情况下使 <path> 呈现清晰？

我可以用一个简单的 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>

【参考方案1】：

这个问题与 svg 的坐标如 31.2（不完全在像素线上）有关。我还找到了similar thread。根据公认的答案，您应该设计 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>

【讨论】：

感谢您抽出宝贵时间截取屏幕截图。事实上，*你的截图和我的有相同的区别。您只需要使用 Paint.NET 之类的图形软件放大屏幕截图。这是你截图的特写：imgur.com/a/IoV1lbd

@warpech 我明白了。我再次进行了研究，您可以查看我的更新答案。