输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心
全部文档版本说明工具设计指南与API参考开发与测试上架分发与运营问题处理与运维最佳实践行业解决方案
指南与API参考
指南
API
高级筛选
API version全部版本
设备全部
元服务API集不筛选
您当前正在浏览HarmonyOS最新文档，覆盖已发布的所有API版本，可在API参考中筛选您使用的API版本。详细的版本配套关系请参考版本说明。
指南与API参考API参考应用框架ArkUI（方舟UI框架）JS组件兼容JS的类Web开发范式（ArkUI.Full）svg组件svg

svg

更新时间: 2026-08-29 09:41
复制页面
本文导读

基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。

说明

  • 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

  • svg父组件或者svg组件需要定义宽高值，否则不进行绘制。

权限列表

无

子组件

支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform。

属性

支持svg组件通用属性和以下属性，设置的通用属性会传递给子组件。

展开
名称 类型 默认值 必填 描述
id string - 否 组件的唯一标识。
width <length>|<percentage> - 否 设置组件的宽度。
height <length>|<percentage> - 否 设置组件的高度。
x <length>|<percentage> - 否 设置当前svg的x轴坐标，根svg节点无效。
y <length>|<percentage> - 否 设置当前svg的y轴坐标，根svg节点无效。
viewBox string - 否 设置当前svg的视口。支持的格式为<number number number number>，4个参数分别表示min-x, min-y, width and height，viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。

示例

收起
自动换行
深色代码主题
复制
  1. <!-- xxx.hml -->
  2. <div class="container">
  3.   <svg width="400" height="400">
  4.     <svg width="200" height="200" viewBox="0 0 100 100">
  5.       <rect x="10" y="10" width="80" height="80" fill="#00FF00"></rect>
  6.     </svg>
  7.     <rect x="10" y="10" width="80" height="80" fill="red" ></rect>
  8.     <svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
  9.       <rect x="10" y="10" width="80" height="80" fill="red"></rect>
  10.     </svg>
  11.     <svg x="0" y="0" width="200" height="200" viewBox="0 0 400 400">
  12.       <rect x="10" y="10" width="80" height="80" fill="blue"></rect>
  13.     </svg>
  14.   </svg>
  15. </div>

通用属性
rect
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明