我的用例可能有点独特，但我正在使用包含在 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 函数.我还注意到使笔划宽度变粗可以缓解这个问题，但我更愿意让我的线条变细。
还有其他方法可以使线条保持一致吗？
最佳答案
这是抗锯齿。设置shape-rendering ="crispEdges"将在大多数 UA 上将其关闭。
关于css - 如何防止 SVG 线条的粗细不一致和间隙？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44040163/