SVG 中的零笔画宽度答案

【问题标题】：Zero stroke-width in SVGSVG 中的零笔画宽度
【发布时间】：2018-08-02 12:46:41
【问题描述】：

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

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

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

在 SVG 中有没有办法在 PostScript 的意义上构建零宽度线？

【问题讨论】：

可能是矢量效果非缩放笔画

标签： svg width stroke

【解决方案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>

【讨论】：

@LeBeau 谢谢，不完全相同但足够接近！
为什么这在 Firefox 90 和 Chromium 91 中不起作用？
@MarkJeronimus 哪个部分不适合您？我在 Win10 上使用 Chrome 92 和 FF 90，它按预期工作。
当我缩放页面时（甚至当我运行代码 sn-p 时也是这个页面），线条会改变粗细。
如果您使用浏览器缩放，那么它们会改变。此功能仅适用于 SVG 内部比例。