时间戳

首页 > 解决方案 > SVG 中的零笔画宽度

svg - SVG 中的零笔画宽度

问题描述

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

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

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

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

标签： svgwidthstroke

解决方案

正如罗伯特所说，在 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>

推荐阅读