我正在尝试使用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>
提前致谢
答案 0 :(得分:10)
只需在另一个上面画一个矩形: 它们的绘制顺序与您在代码中编写的顺序相同。
<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 :(得分: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的顺序时,它会绘制重叠的矩形。