meo-canvas
    Preparing search index...

    Type Alias PathProps

    PathProps: Style & {
        d: string;
        fill?: PathPaint;
        fillRule?: "nonzero" | "evenodd";
        lineCap?: "butt" | "round" | "square";
        lineDash?: readonly number[];
        lineDashOffset?: number;
        lineJoin?: "bevel" | "round" | "miter";
        lineWidth?: number;
        name?: string;
        preserveAspectRatio?: "none";
        stroke?: PathPaint;
        viewBox?: readonly [number, number, number, number];
    }

    A path node's own properties, on top of everything a node can be styled with.

    The geometry lives here rather than in Style because it is what the node is rather than how it looks: a path without d draws nothing, where a path without a fill is still a shape.

    Type Declaration

    • Readonlyd: string

      The SVG d attribute, in the node's own coordinates — or in the space of PathProps's viewBox when one is given.

    • Optional Readonlyfill?: PathPaint

      How the interior is painted. Defaults to black, as SVG does.

    • Optional ReadonlyfillRule?: "nonzero" | "evenodd"

      Which side of the winding counts as inside.

    • Optional ReadonlylineCap?: "butt" | "round" | "square"

      How the stroke's ends are drawn.

    • Optional ReadonlylineDash?: readonly number[]

      Alternating dash and gap lengths. Empty or unset draws a solid line.

    • Optional ReadonlylineDashOffset?: number

      How far into the dash pattern the stroke begins.

    • Optional ReadonlylineJoin?: "bevel" | "round" | "miter"

      How the stroke's corners are drawn.

    • Optional ReadonlylineWidth?: number

      How wide the stroke is drawn, in logical pixels.

    • Optional Readonlyname?: string

      A name carried through for diagnostics.

    • Optional ReadonlypreserveAspectRatio?: "none"

      Whether the drawing may be stretched to fill the node.

      SVG's preserveAspectRatio, and only its none value: absent is the default xMidYMid meet, which fits the drawing without distorting it, and 'none' scales each axis independently so it fills the node exactly.

      A subset rather than a private spelling, so the other eight alignments stay addable without breaking a caller. none is here because a line chart needs it — a plot must fill its box, meet preserves aspect, and no viewBox fixes that, since the box's aspect would have to match the node's and that is exactly what is unknown when the drawing is authored.

      It does not distort the pen — see PathProps's viewBox.

    • Optional Readonlystroke?: PathPaint

      How the outline is painted. Unset draws no stroke.

    • Optional ReadonlyviewBox?: readonly [number, number, number, number]

      The coordinate space d is written in, as SVG's viewBox: [minX, minY, width, height].

      Absent means absolute coordinates, which is what every path did before this existed. With a box, the path is scaled and centred into the node's resolved size under SVG's default preserveAspectRatio — xMidYMid meet — so it fits without distorting.

      Equivalent to SVG's viewBox with vector-effect: non-scaling-stroke. The drawing scales; the pen does not. In SVG a two-pixel stroke in a box scaled five times is drawn ten pixels wide, and ours stays two — deliberately, because a caller authoring a d in a unit square wants lineWidth to mean pixels. vector-effect is the piece to add if something ever wants the other behaviour.

      The node must have a size for this to mean anything. A path node has no intrinsic size, so one with neither a width nor a height gets an empty box, and scaling a drawing into nothing draws nothing.

      It exists because a path in a percentage-sized box was otherwise undrawable: d is absolute, transform.scale is a number rather than a length, and a percentage-sized path node still draws d in absolute local coordinates. A rectangle can be a percentage and a path cannot — which is why a chart's bars needed nothing and its line, pie and doughnut need this.

    Settings
    Member Visibility