如何防止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 网络文档

Answer 3

stroke-linecap="round"

这会将路径的末端从第一个默认值更改为第二个渲染描边类型。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Stroke-linecap