如何防止 SVG 线条的粗细和间隙不一致？

Posted 2023-03-16

【中文标题】如何防止 SVG 线条的粗细和间隙不一致？

【英文标题】：How to prevent inconsistent thickness and gaps in SVG lines?

【发布时间】：2017-10-17 19:40:39

【问题描述】：

我的用例可能有点独特，但我正在使用包含在 flexbox 中的 DOM 元素创建一个动态大小的方形网格。每个 DOM 元素都有一个 SVG 图像背景和一个等于 calc(100vmin / <gridSize>) 的高度/宽度。 SVG 元素很简单：

<svg xmlns="http://www.w3.org/2000/svg" > <path stroke- stroke="#000" stroke-linecap="square" d="M0,50 h100 M50,0 v50"/> </svg>

但是，我注意到有些线条看起来比其他线条更暗，并且一些 SVG 线条之间存在间隙。 （见下图）我假设这是由于像素舍入，因为当我调整浏览器大小时，间隙和厚度会跳来跳去。

我尝试对来自calc 的像素进行四舍五入，但我使用的是styled-components，因此我无法使用floor / ceil 等SASS / LESS 函数。我还注意到让笔画宽度变粗可以缓解这个问题，但我更愿意让我的线条变细。

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

【参考方案1】：

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

【讨论】：

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

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

你说得对，这似乎是与 SVG 不同的问题。我会将您的答案标记为已接受。

这实际上给了我更糟糕的结果，在 Firefox 和 chrome 上。但是，结合@Joel 回答vector-effect='non-scaling-stroke'，以及 Firefox 上的stroke-width 整数，它可以解决问题。在 Chrome 上，我只推荐 vector-effect='non-scaling-stroke' 和整数 stroke-width。

【参考方案2】：

vector-effect='non-scaling-stroke'

非缩放笔画

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

MDN web docs

【讨论】：

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