使用SVG标记绘制网格

Question

我正在寻找一个网格，我将再次使用SVG添加一些简单的矩形。在浏览器中查看时，网格应该适合单个页面。怀疑我错过了一些非常简单的东西但是我为这个结果编写了SVG（视口和网格）代码;网格？ 我已经阅读了建议，指定一个定义文档画布的内部坐标系的视图框;还可以将高度和宽度属性设置为百分比（？）。理想情况下，最终结果（最终是地图）是有网格线。

Answer 1

在全宽和高矩形上使用pattern。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;