1# 绘制图形 2 3 4Svg组件可以用来绘制常见图形和线段，如矩形（<rect>）、圆形（<circle>）、线条(<line>）等，具体支持图形样式还请参考svg组件。 5 6 7在本场景中，绘制各种图形拼接组成一个小房子。 8 9 10```html 11<!-- xxx.hml --> 12<div class="container"> 13 <svg width="1000" height="1000"> 14 <polygon points="100,400 300,200 500,400" fill="red"></polygon> //屋顶 15 <polygon points="375,275 375,225 425,225 425,325" fill="orange"></polygon> //烟囱 16 <rect width="300" height="300" x="150" y="400" fill="orange"> //房子 17 </rect> 18 <rect width="100" height="100" x="180" y="450" fill="white"> //窗户 19 </rect> 20 <line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"></line> //窗框 21 <line x1="230" x2="230" y1="450" y2="550" stroke-width="4" fill="white" stroke="black"></line> //窗框 22 <polygon points="325,700 325,550 400,550 400,700" fill="red"></polygon> //门 23 <circle cx="380" cy="625" r="20" fill="black"></circle> //门把手 24 </svg> 25</div> 26``` 27 28 29```css 30/* xxx.css */ 31.container { 32 width: 100%; 33 height: 100%; 34 flex-direction: column; 35 justify-content: center; 36 align-items: center; 37 background-color: #F1F3F5; 38} 39``` 40 41 42
