1# Graph Drawing 2 3 4The **<svg>** component can be used to draw simple shapes, such as rectangles, circles, and lines. For details about the supported shapes, see <svg>. 5 6 7In this example, you can draw different shapes and stitch them to form a house graph. 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> // Rooftop 15 <polygon points="375,275 375,225 425,225 425,325" fill="orange"></polygon> // Chimney 16 <rect width="300" height="300" x="150" y="400" fill="orange"> // Main body 17 </rect> 18 <rect width="100" height="100" x="180" y="450" fill="white"> // Window 19 </rect> 20 <line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"></line> // Window frame 21 <line x1="230" x2="230" y1="450" y2="550" stroke-width="4" fill="white" stroke="black"></line> // Window frame 22 <polygon points="325,700 325,550 400,550 400,700" fill="red"></polygon> // Door 23 <circle cx="380" cy="625" r="20" fill="black"></circle> // Doorknob 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
