我已经为我正在开发的一个小型网站创建了一些基于 svg 的图标，但我无法让中风看起来像我想要的那样。如果您查看this jsfiddle，您可以看到我的问题。外部<rect> 的笔触一直是 1px，但出于某种原因，该外部正方形的右侧和底部似乎比顶部和左侧的笔触更粗，有点像投影效果。
我在想，也许浏览器渲染器可能将笔画评估为不是整数，并且正在向下舍入左侧和顶部边缘并向上舍入右侧和底部边缘（就像在许多光栅化问题中发生的那样) 但无论我在页面的哪个位置移动它，它都只是右边缘和下边缘。
谁能告诉我这里发生了什么以及如何解决它？
提前致谢。
【问题讨论】：
标签： css svg css-shapes stroke
你遇到的确实是一个令人惊讶的亚像素渲染案例。您会看到，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">
请注意，我已将视口的宽度和高度设置为 37 像素。那是因为您的矩形的最终尺寸为 37px：轮廓为 36px，然后每边 0.5px，即 1px 笔划的外半部分所在的位置。
关于缩放 SVG 的一般概述，我建议 this post on CSS Tricks。
【讨论】：