如何防止SVG线中的厚度和间隙不一致？

Question

我的用例可能有点独特，但我使用封装在flexbox中的DOM元素创建动态大小的方格。每个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，因此我无法使用像floor / ceil这样的SASS / LESS函数。我也注意到使笔画宽度更厚可以缓解这个问题，但我更喜欢保持细线。

我还有其他方法可以使线条保持一致吗？

Answer 1

这是抗锯齿。设置shape-rendering =“crispEdges”会在大多数UA上关闭它。

Answer 2

vector-effect='non-scaling-stroke'

无刻度行程

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

MDN web docs