html - 如何使用 svg 在矩形内绘制矩形?

标签 html svg rectangles

我正在尝试使用 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>
    <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>

关于html - 如何使用 svg 在矩形内绘制矩形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22036996/

相关文章:

css - 在 div 上显示无/ block 不起作用

javascript - 以更有效的方式使用 Javascript 更改 CSS 属性

html - Svg rect 从底部到顶部设置动画高度

java - 我正在尝试使用图像的坐标在 imageIcon 上绘制一个填充的矩形,并且该矩形显示为关闭

line - 用Ghostscript绘制矩形(使用PostScript语言)

php - 使用自定义模板引擎如何用 php 替换内容

javascript - 只显示一个段落......不管是否有更多,空白,空白,类......只有并且只有CSS

javascript - SVG 图形不会出现在使用 javascript 和内部样式的第二个 float 相对 div 列中

javascript - 如何用图像替换 SVG 形状?

Javascript Canvas 绘制矩形或圆形