Векторное изображение квадратной сетки

Question

Я пытаюсь создать изображение SVG, сделанное из массива квадратов в данных положениях. Я использовал для создания BMP-изображения с помощью Matlab и использовал инструмент для векторизации изображений, например 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"/>