---
title: "Path"
description: "Path element api."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';

The `Path` element allows rendering a generic shape, composed of different geometric commands. A path
shape can be filled and outlined.

When not part of a layout, its width or height defaults to 100% of the parent element when not specified.

A path can be defined in two different ways:

-   Using SVG path commands as a string
-   Using path command elements in `.slint` markup.

The coordinates used in the geometric commands are within the imaginary coordinate system of the path.
When rendering on the screen, the shape is drawn relative to the `x` and `y` properties. If the `width`
and `height` properties are non-zero, then the entire shape is fit into these bounds - by scaling
accordingly.

## Properties

### fill
<SlintProperty propName="fill" typeName="brush">
The color for filling the shape of the path.
</SlintProperty>

### fill-rule
<SlintProperty propName="fill-rule" typeName="enum" enumName="FillRule" defaultValue="nonzero">
The fill rule to use for the path.
</SlintProperty>

### stroke
<SlintProperty propName="stroke" typeName="brush">
The color for drawing the outline of the path.
</SlintProperty>

### stroke-width
<SlintProperty propName="stroke-width" typeName="length">
The width of the outline.
</SlintProperty>

### stroke-line-cap
<SlintProperty propName="stroke-line-cap" typeName="enum" enumName="LineCap" defaultValue="butt">
The appearance of the ends of the path's outline.
</SlintProperty>

### stroke-line-join
<SlintProperty propName="stroke-line-join" typeName="enum" enumName="LineJoin" defaultValue="miter">
The appearance of the joins between segments of stroked paths.
</SlintProperty>

### stroke-miter-limit
<SlintProperty propName="stroke-miter-limit" typeName="float" defaultValue="4">
The limit on the ratio of the miter length to the stroke width when `stroke-line-join` is set to `miter`.
When the limit is exceeded, the join is rendered as a bevel instead.
</SlintProperty>

### width
<SlintProperty propName="width" typeName="length">
If non-zero, the path will be scaled to fit into the specified width.
</SlintProperty>

### height
<SlintProperty propName="height" typeName="length">
If non-zero, the path will be scaled to fit into the specified height.
</SlintProperty>


### fit
<SlintProperty propName="fit" typeName="enum" enumName="ImageFit" defaultValue="contain">
Defines how the path's view box is scaled to fit the element's width and height.
If no view box is defined, the implicit bounding rectangle is used.
</SlintProperty>

### clip
<SlintProperty propName="clip" typeName="bool" defaultValue="false">
By default, when a path has a view box defined and the elements render
outside of it, they are still rendered. When this property is set to `true`, then rendering will be
clipped at the boundaries of the view box.
</SlintProperty>

### anti-alias
<SlintProperty propName="anti-alias" typeName="bool" defaultValue="true">
 By default, the fill and stroke of a path is rendered with anti-aliasing, for best quality. Some GPUs
 have performance issues when rendering with anti-aliasing and animation. Setting the value to `false`
 might improve the frame-rate at the expense of a smoother looking path.
</SlintProperty>

## Viewbox Properties

These four properties allow defining the position and size of the viewport of the path in path coordinates.

If the `viewbox-width` or `viewbox-height` is less or equal than zero, the viewbox properties are
ignored and instead the bounding rectangle of all path elements is used to define the view port.


### viewbox-x
<SlintProperty propName="viewbox-x" typeName="float"/>

### viewbox-y
<SlintProperty propName="viewbox-y" typeName="float"/>

### viewbox-width
<SlintProperty propName="viewbox-width" typeName="float"/>

### viewbox-height
<SlintProperty propName="viewbox-height" typeName="float"/>

## Functions

### point-at(t: [float](/reference/property-types/numeric-types/#float)) -> [Point](/reference/property-types/builtin-structs/#point)
Returns a point at the given percent along the path in the Path element's coordinate space.
Returns (0, 0) if the path is empty.

If a `t` outside the bounds of 0 and 1 is passed, it will be converted to its decimal fraction.
Ex: 1.5 -> 0.5 and 2.0 -> 1.0. This allows for N iterations of a loop
by animating t from 0 to N. If `t` is animated from N to 0, it will loop N times backwards.

### angle-at(t: [float](/reference/property-types/numeric-types/#float)) -> [angle](/reference/property-types/numeric-types/#angle)
Returns the angle (in degrees) between the x-axis and the path's tangent vector at the given `t`.
The tangent points in the direction the path was defined, so this reflects the path's shape and not
the object's current direction of travel. Returns 0 if the path is empty.
If a `t` outside the bounds of 0 and 1 is passed, the decimal fraction will be passed.

## Path Using SVG Commands

SVG is a popular file format for defining scalable graphics, which are often composed of paths. In SVG
paths are composed using [commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands),
which in turn are written in a string. In `.slint` the path commands are provided to the `commands`
property. The following example renders a shape consists of an arc and a rectangle, composed of `line-to`,
`move-to` and `arc` commands:

```slint
export component Example inherits Path {
    width: 100px;
    height: 100px;
    commands: "M 0 0 L 0 100 A 1 1 0 0 0 100 100 L 100 0 Z";
    stroke: red;
    stroke-width: 1px;
}
```

The commands are provided in a property:

### Commands
<SlintProperty propName="commands" typeName="string">
A string providing the commands according to the SVG path specification.
This property can only be set in a binding and cannot be accessed in an expression.
</SlintProperty>

## Path Using SVG Path Elements

The shape of the path can also be described using elements that resemble the SVG path commands but use the
`.slint` markup syntax. The earlier example using SVG commands can also be written like that:

```slint
export component Example inherits Path {
    width: 100px;
    height: 100px;
    stroke: blue;
    stroke-width: 1px;

    MoveTo {
        x: 0;
        y: 0;
    }
    LineTo {
        x: 0;
        y: 100;
    }
    ArcTo {
        radius-x: 1;
        radius-y: 1;
        x: 100;
        y: 100;
    }
    LineTo {
        x: 100;
        y: 0;
    }
    Close {
    }
}
```

Note how the coordinates of the path elements don't use units - they operate within the imaginary
coordinate system of the scalable path.


## `ArcTo`

The `ArcTo` sub-element describes the portion of an ellipse. The arc is drawn from the path's
current position to the location specified by the `x` and `y` properties. The remaining properties
are modelled after the SVG specification and allow tuning visual features such as the direction
or angle.

### large-arc
<SlintProperty propName="large-arc" typeName="bool">
Out of the two arcs of a closed ellipse, this flag selects that the larger arc is to be rendered. If the property is `false`, the shorter arc is rendered instead.
</SlintProperty>

### radius-x
<SlintProperty propName="radius-x" typeName="float">
The x-radius of the ellipse.
</SlintProperty>

### radius-y
<SlintProperty propName="radius-y" typeName="float">
The y-radius of the ellipse.
</SlintProperty>

### sweep
<SlintProperty propName="sweep" typeName="bool">
If the property is `true`, the arc will be drawn as a clockwise turning arc; anti-clockwise otherwise.
</SlintProperty>

### x-rotation
<SlintProperty propName="x-rotation" typeName="float">
The x-axis of the ellipse will be rotated by the value of this properties, specified in as angle in degrees from 0 to 360.
</SlintProperty>

### x
<SlintProperty propName="x" typeName="float">
The target x position of the line.
</SlintProperty>

### y
<SlintProperty propName="y" typeName="float">
The target y position of the line.
</SlintProperty>

## `Close`

The `Close` element closes the current sub-path and draws a straight line from the current
position to the beginning of the path.

## `CubicTo`

The `CubicTo` sub-element describes a smooth Bézier from the path's current position to the
location specified by the `x` and `y` properties, using two control points specified by their
respective properties.

### control-1-x
<SlintProperty propName="control-1-x" typeName="float">
The x coordinate of the curve's first control point.
</SlintProperty>

### control-1-y
<SlintProperty propName="control-1-y" typeName="float">
The y coordinate of the curve's first control point.
</SlintProperty>

### control-2-x
<SlintProperty propName="control-2-x" typeName="float">
The x coordinate of the curve's second control point.
</SlintProperty>

### control-2-y
<SlintProperty propName="control-2-y" typeName="float">
The y coordinate of the curve's second control point.
</SlintProperty>

### x
<SlintProperty propName="x" typeName="float">
The target x position of the curve.
</SlintProperty>

### y
<SlintProperty propName="y" typeName="float">
The target y position of the curve.
</SlintProperty>

## `LineTo`

The `LineTo` sub-element describes a line from the path's current position to the
location specified by the `x` and `y` properties.

### x
<SlintProperty propName="x" typeName="float">
The target x position of the line.
</SlintProperty>

### y
<SlintProperty propName="y" typeName="float">
The target y position of the line.
</SlintProperty>

## `MoveTo`

The `MoveTo` sub-element closes the current sub-path, if present, and moves the current point
to the location specified by the `x` and `y` properties. Subsequent elements such as `LineTo`
will use this new position as their starting point, therefore this starts a new sub-path.

### x
<SlintProperty propName="x" typeName="float">
The x position of the new current point.
</SlintProperty>

### y
<SlintProperty propName="y" typeName="float">
The y position of the new current point.
</SlintProperty>

## `QuadraticTo`

The QuadraticTo sub-element describes a smooth Bézier from the path's current position to the
location specified by the `x` and `y` properties, using the control points specified by the
`control-x` and `control-y` properties.

### control-x
<SlintProperty propName="control-x" typeName="float">
The x coordinate of the curve's control point.
</SlintProperty>

### control-y
<SlintProperty propName="control-y" typeName="float">
The y coordinate of the curve's control point.
</SlintProperty>

### x
<SlintProperty propName="x" typeName="float">
The target x position of the curve.
</SlintProperty>

### y
<SlintProperty propName="y" typeName="float">
The target y position of the curve.
</SlintProperty>