正方形網格的矢量圖像

我正嘗試在給定的位置創建一個由正方形陣列組成的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

正方形網格的矢量圖像

回答

相關問題