如何使用 svg 在矩形内绘制矩形？答案

【问题标题】：How to draw a rectangle inside a rectangle using svg?如何使用 svg 在矩形内绘制矩形？
【发布时间】：2014-02-26 09:26:55
【问题描述】：

我正在尝试使用 svg 在矩形内绘制一个矩形，但我没有看到内部矩形。有人可以帮我我做错了什么吗？代码如下。

<html>
    <body>
        <h1>My first SVG</h1>
        <svg width="700" height="200">
            <rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)">
                 <rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
            </rect>
        </svg>
    </body>
</html>

提前致谢

【问题讨论】：

标签： html svg rectangles

【解决方案1】：

只需在另一个矩形的顶部绘制一个矩形：它们将按照您在代码中编写的顺序绘制。

<html>
    <body>
        <h1>My first SVG</h1>
        <svg width="700" height="200">
            <rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
            <rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
        </svg>
    </body>
</html>

【讨论】：

【解决方案2】：

试试这个代码

    <svg width="700" height="200">
        <rect height="100" width="200"stroke-width:1 stroke:rgb(0,0,0)"></rect>
        <rect height="50" width="100" style="fill:rgb(242,242,242);stroke-width:1;stroke:rgb(0,0,0)</rect>
    </svg>

注意：当您保持矩形的顺序时，它会绘制重叠的矩形。

【讨论】：