为什么CSS svg 在右侧和底部都有较粗的笔画？

Question

我已经为我正在工作的一个小型网站创建了一些基于SVG的图标，但是我很难让它看起来像我想要的样子。如果您查看this jsfiddle，可以看到我的问题。外部<rect>的笔画始终为1px，但由于某种原因，该外部正方形的右侧和底部的笔画似乎比顶部和左侧的笔画更粗，有点像投影效果。

我以为浏览器渲染器可能会评估笔划不是一个整数，并且将其四舍五入的左边缘和上边缘以及四舍五入的右边缘和下边缘（例如发生在许多光栅化问题中）但是无论我在页面上的什么位置移动，它都只能是右边缘和下边缘。

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

提前感谢。

Answer 1

您遇到的确实是令人惊讶的亚像素渲染的情况。您会看到，SVG笔划正好在指定的on the path上应用。示例：如果路径从点（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中使用px单位会造成混乱，因为SVG px单位与屏幕像素没有任何共同之处，=>您无需在SVG中使用单位名称：=> All coordinates and lengths in SVG can be specified without a unit identifier。SVG的元素基于可自由调整大小的矢量网格，因此使用单位名称px将永远不会对应于屏幕像素

您还缺少添加视图框的声明

边缘粗细在每条线的每一侧上为50％，因此在视图框边缘上找到的那些将被截断50％

用于备忘录：

viewbox（x y w h）

x

->可水平查看的第一个x位置的值y->垂直可见的第一个y位置的值w->水平视图（宽度）的总值（x）。=>最后的x可视= = [[x + ww->垂直视图（高度）的总值（以y为单位）.... =>上一个y可见= y + h

#my-svg-1 {
  margin: 1em;
  width : 230px;  
  height: 230px;
}
#my-svg-2 {
  margin: 1em;
  width : 6em;
  height: 6em;
}
.square {
  fill: #fff;
  stroke-width: 1;  /* no unit */
  stroke: #424242;
}
svg { background-color: yellow; }

<svg id="my-svg-1" viewbox="-10 -10 46 46">
  <rect class="square" x="-5" y="-5" width="36" height="36"></rect>

</svg>

<svg id="my-svg-2" viewbox="-1.5 -1.5 39 39">
  <rect class="square" x="0"  y="0"  width="36" height="36"></rect>
  <rect class="square" x="8"  y="8"  width="8"  height="8" ></rect>
  <rect class="square" x="20" y="8"  width="8"  height="8" ></rect>
  <rect class="square" x="8"  y="20" width="8"  height="8" ></rect>
  <rect class="square" x="20" y="20" width="8"  height="8" ></rect>
</svg>

Answer 2

在SVG中使用px单位会造成混乱，因为SVG px单位与屏幕像素没有任何共同之处，=>您无需在SVG中使用单位名称：=> All coordinates and lengths in SVG can be specified without a unit identifier。SVG的元素基于可自由调整大小的矢量网格，因此使用单位名称px将永远不会对应于屏幕像素