svg 中的多个矩形？

Question

我希望矩形像 div 显示块在哪里？

<svg width="400" height="180">
  <rect width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
  
    <rect width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>

但会相互重叠。如何制作另一个矩形并将其包装在一个 svg 中？

Answer 1

您需要根据要水平对齐还是垂直对齐来调整 x 和 y attributes。

由于 svg 的高度为 180，垂直定位可能会被隐藏。你也需要增加它。

横向定位

<svg width="400" height="180">
    <rect width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    <rect x="200" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

垂直定位

<svg width="400" height="480">
    <rect width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    <rect y="200" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

svg 中的多个矩形？

multiple rect in an svg?

html

css

svg