SVG 中的零笔划宽度

Question

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

然而，在官方 SVG 文档 (https://www.w3.org/TR/svg-strokes/) 中它说：

A zero value causes no stroke to be painted. A negative value is invalid.

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

Answer 1

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

这适用于 Chrome 和 Firefox（可能还有 Opera - 尚未检查），但 AFAIK 不适用于 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>

SVG 中的零笔划宽度

Zero stroke-width in SVG

svg

width

stroke