为什么 CSS svg <rect /> 在右侧和底部有较粗的笔画？
Why does a CSS svg <rect /> have a thicker stroke on the right and bottom sides?
我为我正在开发的一个小型网站创建了一些基于 svg 的图标，但我无法让笔触看起来像我想要的那样。如果您查看 this jsfiddle，您就会看到我的问题。外部 <rect> 的笔划一直都是 1px 但由于某种原因，该外部正方形的右侧和底部似乎比顶部和左侧具有更粗的笔划，有点像投影效果。
我当时在想，也许浏览器渲染器可能正在将笔画评估为不是整数，并且正在为左边缘和上边缘向下舍入并为右边缘和下边缘向上舍入（就像发生在很多光栅化问题），但无论我将它移到页面的哪个位置，它都只是右边缘和下边缘。
有人能告诉我这是怎么回事以及如何解决吗？
提前致谢。
您遇到的确实是令人惊讶的亚像素渲染案例。您会看到，SVG 笔划恰好应用在 指定它们的路径 上。示例：如果路径从点 (0,0) 运行到 (0,5) 并分配了 1px 宽的描边，则描边覆盖矩形 (-0.5,0), (0.5,0), (0.5,5 ), (-0.5,5)。 these images 的第一个说明了这一点：
您的矩形是从 (0,0)（默认位置）到 (36,36) 绘制的。因此，笔划的放置方式使其恰好位于 屏幕像素之间。这就是右侧和底部边缘看起来模糊的原因。
上边缘和左边缘怎么了？好吧，由于您没有为 SVG 图像定义尺寸，因此浏览器会为您确定一个尺寸。默认值是从 (0,0)（左上角）开始并使 SVG 300x150 pixels 宽。
由于矩形轮廓的上边缘和左边缘直接在图像的边缘，所以它们仍然画得很模糊，但是你看不到图像外面的部分。因此它看起来是一条尖锐的线，但如果仔细观察，你会发现它不是全黑的，而是半透明的。
如何解决这个问题？有两种选择。选项 1 是将矩形放置在半像素上：
<rect x="0.5" y="0.5" .../>
另一种选择是将 viewport of your image 左右移动，使整个图像移动半个像素：
<svg viewBox="-0.5 -0.5 37 37">
请注意，我已将视口的宽度和高度设置为 37px。那是因为你的矩形最终大小为 37px：轮廓为 36px，然后每边 0.5px，其中 1px 笔画的外半部分所在。
有关缩放 SVG 的一般概述，我建议 this post on CSS Tricks。
我为我正在开发的一个小型网站创建了一些基于 svg 的图标，但我无法让笔触看起来像我想要的那样。如果您查看 this jsfiddle，您就会看到我的问题。外部 <rect> 的笔划一直都是 1px 但由于某种原因，该外部正方形的右侧和底部似乎比顶部和左侧具有更粗的笔划，有点像投影效果。
我当时在想，也许浏览器渲染器可能正在将笔画评估为不是整数，并且正在为左边缘和上边缘向下舍入并为右边缘和下边缘向上舍入（就像发生在很多光栅化问题），但无论我将它移到页面的哪个位置，它都只是右边缘和下边缘。
有人能告诉我这是怎么回事以及如何解决吗？
提前致谢。
您遇到的确实是令人惊讶的亚像素渲染案例。您会看到，SVG 笔划恰好应用在 指定它们的路径 上。示例：如果路径从点 (0,0) 运行到 (0,5) 并分配了 1px 宽的描边，则描边覆盖矩形 (-0.5,0), (0.5,0), (0.5,5 ), (-0.5,5)。 these images 的第一个说明了这一点：
您的矩形是从 (0,0)（默认位置）到 (36,36) 绘制的。因此，笔划的放置方式使其恰好位于 屏幕像素之间。这就是右侧和底部边缘看起来模糊的原因。
上边缘和左边缘怎么了？好吧，由于您没有为 SVG 图像定义尺寸，因此浏览器会为您确定一个尺寸。默认值是从 (0,0)（左上角）开始并使 SVG 300x150 pixels 宽。
由于矩形轮廓的上边缘和左边缘直接在图像的边缘，所以它们仍然画得很模糊，但是你看不到图像外面的部分。因此它看起来是一条尖锐的线，但如果仔细观察，你会发现它不是全黑的，而是半透明的。
如何解决这个问题？有两种选择。选项 1 是将矩形放置在半像素上：
<rect x="0.5" y="0.5" .../>
另一种选择是将 viewport of your image 左右移动，使整个图像移动半个像素：
<svg viewBox="-0.5 -0.5 37 37">
请注意，我已将视口的宽度和高度设置为 37px。那是因为你的矩形最终大小为 37px：轮廓为 36px，然后每边 0.5px，其中 1px 笔画的外半部分所在。
有关缩放 SVG 的一般概述，我建议 this post on CSS Tricks。