Interface Stroke

Represents stroke properties in Penpot. You can add a stroke to any shape except for groups. This interface includes properties for defining the color, style, width, alignment, and caps of a stroke.

interface Stroke {
    strokeColor?: string;
    strokeColorRefFile?: string;
    strokeColorRefId?: string;
    strokeOpacity?: number;
    strokeStyle?:
        | "svg"
        | "none"
        | "mixed"
        | "solid"
        | "dotted"
        | "dashed";
    strokeWidth?: number;
    strokeAlignment?: "center" | "inner" | "outer";
    strokeCapStart?: StrokeCap;
    strokeCapEnd?: StrokeCap;
    strokeColorGradient?: Gradient;
}

Properties

strokeColor?: string

The optional color of the stroke, represented as a string (e.g., '#FF5733').

strokeColorRefFile?: string

The optional reference to an external file for the stroke color.

strokeColorRefId?: string

The optional reference ID within the external file for the stroke color.

strokeOpacity?: number

The optional opacity level of the stroke color, ranging from 0 (fully transparent) to 1 (fully opaque). Defaults to 1 if omitted.

strokeStyle?:
    | "svg"
    | "none"
    | "mixed"
    | "solid"
    | "dotted"
    | "dashed"

The optional style of the stroke.

strokeWidth?: number

The optional width of the stroke.

strokeAlignment?: "center" | "inner" | "outer"

The optional alignment of the stroke relative to the shape's boundary.

strokeCapStart?: StrokeCap

The optional cap style for the start of the stroke.

strokeCapEnd?: StrokeCap

The optional cap style for the end of the stroke.

strokeColorGradient?: Gradient

The optional gradient stroke defined by a Gradient object.