HarmonyOS API：svg组件

joytrian

发布于 2023-3-29 21:31

4464浏览

0收藏

版本：v3.1 Beta

path

更新时间: 2023-02-17 09:19

说明

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

绘制路径。

权限列表

无

子组件

支持animate、animateMotion、animateTransform。

属性

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

名称	类型	默认值	必填	描述
id	string	-	否	组件的唯一标识。
d	string	-	否	设置路径的形状。包含一组字符指令，大写字母为绝对路径，小写字符为相对路径。字母指令表示的意义如下： - M/m = moveto - L/l = lineto - H/h = horizontal lineto - V/v = vertical lineto - C/c = curveto - S/s = smooth curveto - Q/q = quadratic Belzier curve - T/t = smooth quadratic Belzier curveto - A/a = elliptical Arc - Z/z = closepath

示例

<!-- xxx.hml -->
<div class="container">
    <svg width="400" height="400">
        <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
          stroke="blue" stroke-width="3" fill="red">
        </path>
    </svg>
</div>1.
2.
3.
4.
5.
6.
7.
8.

HarmonyOS API：svg组件-鸿蒙开发者社区

line

更新时间: 2023-02-17 09:19

说明

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

绘制线条。

权限列表

无

子组件

支持animate、animateMotion、animateTransform。

属性

支持Svg组件通用属性和以下属性。

名称	类型	默认值	必填	描述
id	string	-	否	组件的唯一标识。
x1	<length>\|<percentage>	-	否	设置线条起点的x轴坐标。支持属性动画。
y1	<length>\|<percentage>	-	否	设置线条起点的y轴坐标。支持属性动画。
x2	<length>\|<percentage>	-	否	设置线条终点的x轴坐标。支持属性动画。
y2	<length>\|<percentage>	-	否	设置线条终点的y轴坐标。支持属性动画。

示例

<!-- xxx.hml -->
<div class="container">
  <svg width="400" height="400">
    <line x1="10" x2="300" y1="50" y2="50" stroke-width="4" fill="white" stroke="blue"></line>
    <line x1="10" x2="300" y1="100" y2="100" stroke-width="4" fill="white" stroke="blue"></line>
    <line x1="10" x2="300" y1="150" y2="150" stroke-width="10" stroke="red" stroke-dasharray="5 3" stroke-dashoffset="3"></line>
    // round：在路径的末端延伸半个圆，直径等于线宽
    <line x1="10" x2="300" y1="200" y2="200" stroke-width="10" stroke="black" stroke-linecap="round"></line>
    // butt：不在路径两端扩展
    <line x1="10" x2="300" y1="220" y2="220" stroke-width="10" stroke="black" stroke-linecap="butt"></line>
    // square：在路径的末端延伸一个矩形，宽度等于线宽的一半，高度等于线宽
    <line x1="10" x2="300" y1="240" y2="240" stroke-width="10" stroke="black" stroke-linecap="square"></line>
  </svg>
</div>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

HarmonyOS API：svg组件-鸿蒙开发者社区

polyline

更新时间: 2023-02-17 09:19

说明

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

绘制折线。

权限列表

无

子组件

支持animate、animateMotion、animateTransform。

属性

支持Svg组件通用属性和以下属性。

名称	类型	默认值	必填	描述
id	string	-	否	组件的唯一标识。
points	string	-	否	设置折线的多个坐标点格式为[x1,y1 x2,y2 x3,y3]。支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效

示例

<!-- xxx.hml -->
<div class="container">
  <svg fill="white" stroke="blue" width="400" height="400">
    <polyline points="10,110 60,35 60,85 110,10" fill="red"></polyline>
    <polyline points="10,200 60,125 60,175 110,100" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
  </svg>
</div>1.
2.
3.
4.
5.
6.
7.

HarmonyOS API：svg组件-鸿蒙开发者社区

polygon

更新时间: 2023-02-17 09:19

说明

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

绘制多边形。

权限列表

无

子组件

支持animate、animateMotion、animateTransform。

属性

支持Svg组件通用属性和以下属性。

名称	类型	默认值	必填	描述
id	string	-	否	组件的唯一标识。
points	string	-	否	设置多边形的多个坐标点格式为[x1,y1 x2,y2 x3,y3]。支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效

示例

<!-- xxx.hml -->
<div class="container">
  <svg fill="white" stroke="blue" width="400" height="400">
    <polygon points="10,110 60,35 60,85 110,10" fill="red"></polygon>
    <polygon points="10,200 60,125 60,175 110,100" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
  </svg>
</div>1.
2.
3.
4.
5.
6.
7.

HarmonyOS API：svg组件-鸿蒙开发者社区

animateMotion

更新时间: 2023-02-17 09:19

说明

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

路径动效。

权限列表

无

子组件

不支持。

属性

支持animate属性（values不生效）和以下表格中的属性。

名称	类型	默认值	必填	描述
keyPoints	string	-	是	一组关键帧的点位置，每帧的值为对象沿路径的距离比例。功能与animate属性中的values相同。
path	string	-	是	定义运动的路径，使用与path组件d属性相同的语法。
rotate	[auto \| auto-reverse \| <number>]	auto	否	设置动画对象的旋转方向。

示例

<!-- xxx.hml -->
<div class="container">
  <svg fill="white" width="400" height="400">
    <path fill="none" stroke="blue" stroke-width="3" d="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
    <path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
    <path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
    <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
      <animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z">
      </animateMotion>
    </path>
    <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
      <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="m40,130 c0,-100 160,100 160,0 c0,-100,-160,100 -160,0 z">
      </animateMotion>
    </path>
    <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
      <animateMotion dur="2000" repeatCount="indefinite" rotate="45"path="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></animateMotion>
    </path>
  </svg>
</div>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

HarmonyOS API：svg组件-鸿蒙开发者社区

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-components-svg-polygon-0000001477981285-V3?catalogVersion=V3

分类

卡片开发

三方库

标签

HarmonyOS API

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：svg组件

path

权限列表

子组件

属性

示例

line

权限列表

子组件

属性

示例

polyline

权限列表

子组件

属性

示例

polygon

权限列表

子组件

属性

示例

animateMotion

权限列表

子组件

属性

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看