所以基本上我有一個網格，它使用路徑/矩形的parrerns來繪制網格。在這個網格上，我想在 x 和 y 方向上放置數字。就像您在學校可能知道的坐標系一樣。
我嘗試將文本放入模式中，但有兩個問題：
- 每個矩形中的文本都是相同的（不迭代）
- 每個矩形都包含文本（而不僅僅是“軸”）
我的猜測是，我需要另一個 svg 來覆寫另一個 svg 以解決最后一個問題。
這些是我的模式：
<defs>
<pattern id="smallGrid" width="15px" height="15px" patternUnits="userSpaceOnUse">
<path d="M 15 0 L 0 0 0 15" fill="none" stroke="gray" stroke-width="0.5"/>
</pattern>
<pattern id="grid" width="75" height="75" patternUnits="userSpaceOnUse">
<text x="20" y="70">foo</text> <== Here is the text I inserted
<rect width="75" height="75" fill="url(#smallGrid)"/>
<path d="M 75 0 L 0 0 0 75" fill="none" stroke="blue" stroke-width="4"/>
</pattern>
</defs>
這些模式被放置在一個<svg>參考它們的 id 的標簽中，如下所示：
<svg>
<g id="viewport">
<rect id="gridParent" fill="url(#grid)"/>
</g>
</svg>
最終結果看起來像這樣：
但我想做這樣的事情：
我很感謝你能給我的所有提示！！！提前致謝。
uj5u.com熱心網友回復：
正如@Robert Longson 已經指出的那樣：
svg<pattern>是相當靜態的——所以你不能實作任何動態計數器。
如果您不需要突出顯示單個列（例如使用不同的填充顏色），您可以<text>使用一些 javaScript 附加元素。
本質上，您需要遍歷由網格寬度和高度定義的所有列/網格單元，并添加<text>具有適當 x 和 y 坐標的元素。
在這種情況下：（
寬度/高度）600x300 = 8 列；4行；32 個網格單元
每次到達迭代索引都可以被列數整除，當前的y偏移量根據總行數遞增。
示例：將標簽添加到 svg 網格
const svg = document.querySelector('svg');
const bb = svg.getBBox();
const strokeWidth = 4;
//get viewBox and adjust it to avoid overflow caused by grid strokes
const [x, y, width, height] = [bb.x, bb.y, bb.width strokeWidth / 2, bb.height strokeWidth / 2];
svg.setAttribute('viewBox', [x, y, width, height].join(' '));
const cols = Math.floor((width - strokeWidth / 2) / 75);
const rows = Math.floor((height - strokeWidth / 2) / 75);
// add labels
addGridLabelsCoord(svg, cols, rows, width, height, strokeWidth);
function addGridLabelsCoord(svg, cols, rows, width = 1, height = 1, strokeWidth = 1) {
// set initial y/x offset according to stroke width to avoid cropped outer strokes
let offsetX = (width - strokeWidth / 2) / cols;
let offsetY = (height - strokeWidth / 2) / rows;
let currentRow = 1;
let currentCol = 1;
let shiftX = 0;
let shiftY = 0;
let cellCount = cols * rows;
let nameSpace = 'http://www.w3.org/2000/svg';
// loop through all columns
for (let i = 0; i < cellCount; i ) {
// if current index is divisible by columns – move to next row
if (i > 0 && i % (cols) === 0) {
shiftX = 0;
shiftY = offsetY;
currentCol = 1;
currentRow ;
}
// add labels only for first row and first columns
if (currentRow == 1 || currentCol == 1) {
let colLabel = currentCol == 1 ? currentRow - 1 : i;
// add new cell to output
let text = document.createElementNS(nameSpace, 'text');
text.setAttribute('x', (shiftX offsetX / 2).toFixed(1));
text.setAttribute('y', (shiftY offsetY / 2).toFixed(1));
text.setAttribute('dominant-baseline', 'central');
text.setAttribute('text-anchor', 'middle');
text.textContent = colLabel;
svg.appendChild(text);
}
// increment x offset for next column
shiftX = offsetX;
currentCol ;
}
}<svg viewBox="0 0 600 300">
<defs>
<pattern id="smallGrid" width="15px" height="15px" patternUnits="userSpaceOnUse">
<path d="M 15 0 L 0 0 0 15" fill="none" stroke="gray" stroke-width="0.5" />
</pattern>
<pattern id="grid" width="75" height="75" patternUnits="userSpaceOnUse">
<rect width="75" height="75" fill="url(#smallGrid)" />
<path d="M 75 0 L 0 0 0 75" fill="none" stroke="blue" stroke-width="4" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" id="gridParent" fill="url(#grid)" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486836.html