SVG 中的零笔画宽度

Question

使用 Postscript 多年后，我现在正在学习 SVG。PS 有一个功能我到目前为止还无法复制：零宽度线。在 PS 中，零宽度的线始终可见：PostScript 将零线宽转换为最小可打印宽度。在屏幕上，当缩放时，它们永远不会引起任何思考，但无论比例如何，它们都是可见的。当我想要渲染非常细的线条，而不用担心我要使用的最终分辨率时，我就使用了它们，结果证明它们非常有用。

然而，在官方 SVG 文档（https://www.w3.org/TR/svg-lines/）中它说：

零值将导致不绘制任何笔画。负值无效。

SVG 中有没有一种方法可以构建 PostScript 意义上的零宽度线条？

Answer 1

正如 Robert 所说，SVG 中最接近您想要的东西是vector-effect="non-scaling-stroke". 无论 SVG 如何缩放，这都会将笔画宽度固定为 1。

这适用于 Chrome 和 Firefox（可能还有 Opera - 尚未检查），但据我所知不适用于 IE/Edge。

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80"
        fill="none" stroke="black" stroke-width="1"
        vector-effect="non-scaling-stroke"/>
</svg>

请注意，抗锯齿功能将根据线条的位置发挥作用。位置会受到比例的影响。

如果您的线条是直线（水平或垂直），您可能还想使用shape-rendering="crispEdges". 这将关闭使用它的形状的抗锯齿功能，从而产生锐利的单像素线条。

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80"
        fill="none" stroke="black" stroke-width="1"
        vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/>
</svg>