path

The <path> component is used to draw a path.

NOTE: This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Required Permissions

None

Child Components

animate, animateMotion, and animateTransform are supported.

Attributes

The universal attributes and the attributes listed below are supported. The configured universal attributes are passed to the child components.

Name	Type	Default Value	Mandatory	Description
id	string	-	No	Unique ID of the component.
d	string	-	No	Shape of the path. The value contains a group of character instructions. Uppercase letters are absolute paths, and lowercase letters are relative paths. The meanings of the letters are as follows: 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

Name

Type

Default Value

Mandatory

Description

string

Unique ID of the component.

string

Shape of the path. The value contains a group of character instructions. Uppercase letters are absolute paths, and lowercase letters are relative paths.

The meanings of the letters are as follows:

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

Example

<!-- 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>