logo标签列表

如何使用SVG绘制一个矩形内嵌另一个矩形？

htmlsvgrectangles
14

我试图使用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>

提前致谢

2个回答
17

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

<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>
1
尝试这段代码。
    <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>

注意：只要保持rect的顺序不变，它将绘制重叠的矩形。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接