css - 如何防止 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. 我还注意到让笔画宽度变粗可以缓解这个问题，但我更愿意让我的线条变细。

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

Answer 1

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

Answer 2

vector-effect='non-scaling-stroke'

非标度冲程

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

MDN 网络文档