svg - 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>