path

About 3 min

path

绘制路径。

说明: 从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