我想實作幾個 SVG 的布局，如下圖所示。
灰色框是包含其他元素的頂級 SVG。寬度和高度是已知的。
橙色框包含紅色框，彼此之間需要保持相同的距離。類似于justify-content: space-around對齊專案的方式。
紅色框也以相同的方式（但垂直）保持它們的距離。
我一直在嘗試調整定位，transform-origin但它似乎不起作用。相反，偏移量總是從每個元素的左上角計算，這會將元素推到視野之外。這是一個非常基本的片段，但遺憾的是這就是我所擁有的。
顯示代碼片段
<svg width="400" height="400" style="background:#ccc;">
<g transform="translate(10, 10)">
<svg width="50" height="50">
<rect width="50" height="50" fill="red" />
</svg>
<svg width="50" height="50">
<rect width="50" height="50" fill="red" />
</svg>
<svg width="50" height="50">
<rect width="50" height="50" fill="red" />
</svg>
</g>
<g transform="translate(200, 10)">
<svg width="50" height="50">
<rect width="50" height="50" fill="red" />
</svg>
<svg width="50" height="50">
<rect width="50" height="50" fill="red" />
</svg>
<svg width="50" height="50">
<rect width="50" height="50" fill="red" />
</svg>
</g>
<g transform="translate(360, 10)">
<svg width="50" height="50">
<rect width="50" height="50" fill="red" />
</svg>
<svg width="50" height="50">
<rect width="50" height="50" fill="red" />
</svg>
<svg width="50" height="50">
<rect width="50" height="50" fill="red" />
</svg>
</g>
</svg>有沒有辦法在不知道紅框大小的情況下以這種方式對齊這些容器？我最終得到的每個解決方案都使用一些計算，我需要減去紅色框的寬度和高度的一半。
uj5u.com熱心網友回復：
正如@enxaneta評論中指出的那樣：
您可以在 defs 中放置一個矩形，而不是使用所有那些嵌套的 svg 元素。矩形將以點 0,0 為中心
在 SVG 中，元素位置相對于畫布的左上角。
如果x=40為多個矩形指定相同的坐標，則它們將垂直對齊。
為了不為每個矩形寫入其坐標值以及 and 的值width，height您需要在該<defs>部分中放置一個實體，然后使用<use>標簽克隆它。
x在這種情況下，您需要y為每個副本指定坐標：
<use xlink:href="#rect" x="40" y="62.5" />
要獲得三列，您需要將一列包裝在<g>組標簽中并使用克隆它<use>
<use xlink:href="#column" x="150" y="0" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="450" height="400" viewBox="0 0 450 400" style="background:#ccc;">
<defs>
<rect id="rect" width="50" height="50" fill="red" x="0" y="0" />
</defs>
<g id="column" >
<rect x="30" y="0" width="70" height="400" fill="#C89F33" />
<use xlink:href="#rect" x="40" y="62.5" />
<use xlink:href="#rect" x="40" y="175" />
<use xlink:href="#rect" x="40" y="287.5" />
</g>
<use xlink:href="#column" x="150" y="0" />
<use xlink:href="#column" x="300" y="0" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/421762.html
標籤：
下一篇：網站上的SVG圖示變得透明