输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
指南
指南应用框架ArkUI（方舟UI框架）UI开发 (兼容JS的类Web开发范式)常见组件开发指导svg开发指导绘制图形

绘制图形

更新时间: 2026-03-09 02:50

svg组件可以用来绘制常见图形和线段，如矩形（<rect>）、圆形（<circle>）、线条(<line>）等，具体支持图形样式还请参考svg组件。

在本场景中，绘制各种图形拼接成一个小房子。

收起
自动换行
深色代码主题
复制
  1. <!-- xxx.hml -->
  2. <div class="container">
  3.   <svg width="1000" height="1000">
  4.     <polygon points="100,400 300,200 500,400" fill="red"></polygon>     //屋顶
  5.     <polygon points="375,275 375,225 425,225 425,325" fill="orange"></polygon>   //烟囱
  6.     <rect width="300" height="300" x="150" y="400" fill="orange">      //房子
  7.     </rect>
  8.     <rect width="100" height="100" x="180" y="450" fill="white">    //窗户
  9.     </rect>
  10.     <line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"></line>     //窗框
  11.     <line x1="230" x2="230" y1="450" y2="550" stroke-width="4" fill="white" stroke="black"></line>     //窗框
  12.     <polygon points="325,700 325,550 400,550 400,700" fill="red"></polygon>     //门
  13.     <circle cx="380" cy="625" r="20" fill="black"></circle>      //门把手
  14.   </svg>
  15. </div>
收起
自动换行
深色代码主题
复制
  1. /* xxx.css */
  2. .container {
  3.   width: 100%;
  4.   height: 100%;
  5.   flex-direction: column;
  6.   justify-content: center;
  7.   align-items: center;
  8.   background-color: #F1F3F5;
  9. }

基础知识
绘制路径
相关推荐
文档绘制文本
文档svg
文档rect
文档绘制几何图形 (Shape)
文档line
文档图元绘制概述
文档polygon
文档image
文档几何图形绘制概述
文档几何形状绘制（ArkTS）
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 指南 中进行搜索
请输入您想要搜索的关键词