使用 SVG 标记绘制网格

Question

我正在寻求绘制一个网格，我将在其上添加一些简单的矩形，再次使用 SVG。在浏览器中查看时，网格应适合单个页面。怀疑我遗漏了一些非常简单的东西，但我是否为此结果编写了 SVG（视口和网格）？即网格？我已经阅读了指定一个视图框的建议，该视图框定义了文档画布的内部坐标系；还可以将高度和宽度属性设置为百分比 (?)。理想的最终结果（最终是一张地图）是有网格线。

Answer 1

在完全宽且高的矩形上使用图案。

<svg width="800" height="600">
<defs>
	<pattern id="tenthGrid" width="10" height="10" patternUnits="userSpaceOnUse">
		<path d="M 10 0 L 0 0 0 10" fill="none" stroke="silver" stroke-width="0.5"/>
	</pattern>
	<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
		<rect width="100" height="100" fill="url(#tenthGrid)"/>
		<path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
	</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"/>
</svg>