Question

我正在尝试创建一个由给定位置的正方形阵列组成的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矢量），最简单的方法是什么？是否可以创建一个遍历给定向量的所有位置的循环？

Answer 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"/>

方形网格的矢量图像

1 个答案: