Question

已经使用Postscript多年了，现在我正在学习SVG。 PS的一个功能是我迄今为止无法复制的功能：零宽度线。在PS中，始终显示宽度为零的行：PostScript将零行宽转换为最小的可打印宽度。在屏幕上，进行缩放时，它们永远不会有任何想法，但是无论缩放比例如何，它们都是可见的。当我想绘制非常细的线条而不必担心我要使用的最终分辨率时，我就使用了它们，结果证明它们确实很有用。

但是，在官方SVG文档（https://www.w3.org/TR/svg-strokes/）中，它表示：

零值不会绘制任何笔划。负值无效。

从PostScript的角度来看，SVG中是否可以构建零宽度的行？

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中的零行程宽度

1 个答案: