在 SVG 中绘制 1px 网格的最佳/最短方法

Question

我需要使用嵌入网页中的 SVG canvas 绘制一个 1px 网格（10px 间距）。 有许多 SVG 标签可供选择，我希望有人能建议哪些标签最适合这项工作并产生最少的代码。

例如，是否有更短的替代方法来使用 <path> 标签绘制路径？ 也许通过定义一个 10px x 10px 的正方形，然后以某种方式在 canvas 上重复它。

无论如何，请接受建议。

谢谢

Answer 1

您可以制作一个<pattern> （基本上是您问题中的图块）并用它填充任何形状。

这是该技术的一个示例。

Answer 2

我不是专家（第 3 天），但我知道 Google 使用 rects 在 Google 图表上执行此操作。 宽度或高度等于 1，没什么特别的：只需用很多这样的东西写网格：

<rect x="86" y="61" width="1" height="198" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="1" stroke-dasharray="0" fill="#cccccc"></rect>

他们为什么这样做呢？ 不知道。 他们的图形很好，所以大概有人考虑过。 我自己的倾向是使用路径来执行此操作，使用“h”和“v”表示相对水平和垂直线。 它更紧凑，但 output 可能不是那么好。