正方形网格的矢量图像

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

来源

2016-06-21 Mike Nelson

我只注意到每个矩形行应该在“/>”已经结束。我认为他们不应该合并成一个，因为他们位于不同的位置。 –

没有norice那个。缺少/>意味着你只能看到第一个，因为其余的将是无效的嵌套rect元素。 –

以生产许多均匀方块的最简单的方法是这样的路径：

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

来源

2016-06-21 17:17:40 zayjuc

正方形网格的矢量图像

回答

相关问题