方形网格的矢量图像答案

【问题标题】：Vector image of square grid方形网格的矢量图像
【发布时间】：2016-06-21 16:18:02
【问题描述】：

我正在尝试创建一个由给定位置的正方形数组组成的 SVG 图像。我曾经用 Matlab 创建一个 bmp 图像，并使用像 inkscape 这样的图像矢量化工具将其导出为 SVG。如您所料，Inkscape 创建近似正方形的多边形。这些不是很准确，并且会产生不同大小的矩形阵列。

我认为这很容易做到。我对 SVG 真的很陌生，所以我尝试了类似的方法：

<svg width="400" height="100">
    <rect x="10" y="10" width="10" height="10">
    <rect x="20" y="10" width="10" height="10">
    <rect x="10" y="20" width="10" height="10">
    <rect x="20" y="20" width="10" height="10">
</svg>

但是，这似乎创建了一个正方形。有一个位置列表（如 Matlab 向量），完成类似任务的最简单方法是什么？是否可以创建一个遍历给定向量所有位置的循环？

【问题讨论】：

我刚刚注意到每条矩形线都应该以“/>”结尾。我在想它们不应该合并为一个，因为它们位于不同的位置。
也不知道。缺少的 /> 将意味着您只能看到第一个，因为其余的将是无效的嵌套 rect 元素。

标签： svg

【解决方案1】：

产生多个均匀正方形的最简单方法是这样的路径：

<path fill="none" stroke="#000" stroke-width="10" stroke-linecap="square"
  d="M20,20h0 M40,20h0 M60,20h0"/>

但要注意零行长路径的错误。如果您使用stroke-linecap="round" 生成圆形而不是正方形，那么至少某些实现会失败。一种解决方法是使用较小但非零的行长，例如M20,20h.1。你也可以使用stroke-linecap="butt"（默认）：

<path fill="none" stroke="#000" stroke-width="10"
  d="M20,20h10 M40,20h10 M60,20h10"/>

【讨论】：