如何避免SVG线条出现不一致的厚度和间隙？

Question

我的用例可能有些独特，但我正在使用DOM元素创建一个动态大小的正方形网格，这些元素被包含在一个flexbox中。每个DOM元素都有一个SVG图像背景和高度/宽度等于calc(100vmin / <gridSize>)。SVG元素很简单： <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <path stroke-width="2" stroke="#000" stroke-linecap="square" d="M0,50 h100 M50,0 v50"/> </svg> 然而，我注意到一些线条比其他线条更暗，并且在一些SVG线条之间存在间隙。（见下图）我认为这是由于像素舍入造成的，因为当我调整浏览器大小时，间隙和线条粗细会跳动。

我尝试从calc中舍入像素，但我正在使用styled-components，所以无法使用SASS/LESS函数，如floor / ceil。我还注意到增加描边宽度可以缓解问题，但我更喜欢保持线条细。

是否有其他方法可以使线条保持一致？

- PDN

Answer 1

这是抗锯齿。在大多数用户代理上，设置shape-rendering="crispEdges"将关闭它。

- Robert Longson

---

谢谢！这使得线条的粗细保持一致，但间隙仍然存在。 - PDN

如果您的宽度不能被放入其中的行数整除，那是不可避免的。这就像将10除以3并说我不想要余数一样。 - Robert Longson

你说得对，那似乎是一个与SVG无关的问题。我会将你的答案标记为已接受。 - PDN

这实际上给了我更糟糕的结果，在Firefox和Chrome上。然而，结合@Joel的答案vector-effect ='non-scaling-stroke'，以及在Firefox上为stroke-width设置整数，它解决了问题。在Chrome上，我建议只使用vector-effect ='non-scaling-stroke'和整数stroke-width。 - Ambroise Rabier

Answer 2

vector-effect='non-scaling-stroke'

非缩放描边

该值修改了对象描边的方式。通常，描边涉及在当前用户坐标系中计算形状路径的描边轮廓，并使用描边颜料（颜色或渐变）填充该轮廓。这个值的视觉效果是，描边宽度不依赖于元素的变换（包括非均匀缩放和剪切变换）和缩放级别。

MDN web docs

- Joel

---

在Chrome上它可以工作！在Firefox上，它会使<path/>元素的线条变粗，但无法解决线条粗细不一致的问题。 - Ambroise Rabier

这正是我一直在寻找的，而且我不知道这个属性的存在。谢谢！ - phocks