SVG技术中有个标签rect，可以用来绘制矩形，如果将同样的矩形填充不同颜色和放置不同位置，部分重叠到一起，这样做出来的图形将会很漂亮。下面利用一个实例说明绘制多个重叠的矩形并展示出来，操作如下：
工具/原料
1
SVG
2
HTML5
3
CSS3
4
XML
5
浏览器
6
截图工具
方法/步骤
1
第一步，双击打开HBuilder编辑工具，新建静态页面rect.html，如下图所示：
2
第二步，在
插入svg标签，设置svg的宽度和高度，添加viewBox属性，如下图所示：4
第四步，保存代码并预览该静态页面，结果发现图形宽度高度设置过小，导致图形不好看，如下图所示：
5
第五步，将rect标签的宽度和高度进行调大，再次添加y属性值，X和Y分别设置不同的值，如下图所示：
6
第六步，再次保存代码并预览页面，查看到多个矩形重叠在一起，有立体感，如下图所示：
注意事项
1
注意SVG技术中的rect标签的用法
2
注意多个矩形重叠坐标位置设置方法
上一篇：java io流处理如何重新开始
下一篇：如何利用SVG画基本的几何图形