使用 SVG 标记绘制网格答案

【问题标题】：Drawing a grid using SVG markup使用 SVG 标记绘制网格
【发布时间】：2014-02-25 11:46:55
【问题描述】：

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

【问题讨论】：

怎么画？你的意思是用javascript吗？这有什么原因吗？为什么不直接在 Inkscape 之类的 SVG 编辑器中绘制它（打开对齐网格等）。
该练习还涉及在网格上绘制几个点 - 需要对这些地理对象（位于地理坐标系而不是相反的图形坐标系）进行 SVG 变换。这些坐标都是从 Oracle 空间 d/b 输入的。因此，它更像是一张动态地图，即所需的输出，而不是静态地图。
看这篇最近的帖子，可能会有所帮助：stackoverflow.com/questions/21915059/…
你的代码在哪里？编辑问题以添加它。

标签： svg grid

【解决方案1】：

在完全宽高的矩形上使用pattern。

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

【讨论】：