为什么 CSS svg <rect /> 在右侧和底部有较粗的笔画？

Question

我为我正在开发的一个小网站创建了一些基于 svg 的图标，但我无法让笔画看起来像我想要的那样。如果你看看这个 jsfiddle你就能看到我的问题。外部的笔画<rect>一直都是 1px，但由于某种原因，外部正方形的右侧和底边似乎比顶部和左侧的笔画更粗，有点像投影效果。

我在想，浏览器渲染器可能会将笔画评估为不是整数，并且对左侧和顶部边缘进行向下舍入，对右侧和底部边缘进行向上舍入（就像在许多光栅化问题中发生的情况一样），但没有无论我将其移动到页面的哪个位置，它都只是右边缘和下边缘。

有人可以告诉我这里发生了什么以及如何解决它吗？

提前致谢。

Answer 1

你遇到的确实是令人惊讶的亚像素渲染的情况。您会看到，SVG 笔划完全应用在指定的路径上。示例：如果一条路径从点 (0,0) 延伸到 (0,5)，并指定了 1 像素宽的描边，则该描边将覆盖矩形 (-0.5,0)、(0.5,0)、(0.5,5 ), (-0.5,5)。这些图像中的第一张说明了这一点：

\n\n

您的矩形是从 (0,0)（默认位置）到 (36,36) 绘制的。因此，笔划的放置方式使其恰好位于屏幕像素之间。这就是右边缘和下边缘看起来模糊的原因。

\n\n

\xe2\x80\x99 的顶部和左侧边缘是什么？好吧，由于您没有\xe2\x80\x99 定义 SVG 图像的大小，浏览器会为您确定一个大小。默认值是从 (0,0)（左上角）开始并使 SVG宽度为300x150 像素。

\n\n

由于矩形轮廓的顶部和左侧边缘直接位于图像的边缘，因此它们仍然被绘制得模糊，但您看不到图像外部的部分。因此，它看起来是一条尖锐的线，但如果你仔细观察，你会发现它不是全黑的，而是半透明的。

\n\n

如何解决这个问题？有两种选择。选项 1 是将矩形放置在半像素上：

\n\n

<rect x="0.5" y="0.5" .../>\n

\n\n

另一个选项是移动图像的视口，以便整个图像移动半个像素：

\n\n

<svg viewBox="-0.5 -0.5 37 37">\n

\n\n

请注意，我\xe2\x80\x99已将视口的宽度和高度设置为37px。\xe2\x80\x99s 因为你的矩形的最终大小为 37px：轮廓为 36px，然后每边 0.5px，即 1px 笔划的外半部分所在的位置。

\n\n

有关缩放 SVG 的一般概述，我建议您阅读CSS Tricks 上的这篇文章。

\n