代码拉取完成,页面将自动刷新
同步操作将从 OpenHarmony/docs 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Svg组件可以用来绘制常见图形和线段,如矩形(<rect>)、圆形(<circle>)、线条(<line>)等,具体支持图形样式还请参考svg组件。
在本场景中,绘制各种图形拼接组成一个小房子。
<!-- xxx.hml -->
<div class="container">
<svg width="1000" height="1000">
<polygon points="100,400 300,200 500,400" fill="red"></polygon> //屋顶
<polygon points="375,275 375,225 425,225 425,325" fill="orange"></polygon> //烟囱
<rect width="300" height="300" x="150" y="400" fill="orange"> //房子
</rect>
<rect width="100" height="100" x="180" y="450" fill="white"> //窗户
</rect>
<line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"></line> //窗框
<line x1="230" x2="230" y1="450" y2="550" stroke-width="4" fill="white" stroke="black"></line> //窗框
<polygon points="325,700 325,550 400,550 400,700" fill="red"></polygon> //门
<circle cx="380" cy="625" r="20" fill="black"></circle> //门把手
</svg>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。