Skip to content
Christopher Nikkel edited this page Dec 22, 2018 · 5 revisions

Path

Definition

type PathType =
    | MoveTo
    | LineTo
    | HorizontalLineTo
    | VerticalLineTo
    | CurveTo
    | SmoothCurveTo
    | QuadraticBezierCurveTo
    | SmoothQuadraticBezierCurveTo
    | EllipticalArc

type PathPositioning =
    | Relative
    | Absolute

type PathPart =
    | LengthPart of PathPositioning*PathType*Point
    | ClosePath

type Path =
    {
        PathParts: seq<PathPart>
    }

Description

Path is used to create a SVG path.

Functions

Function Signature Description
Path.empty Path create an empty path
Path.add PathPositioning -> PathType -> Point -> Path -> Path add a path part to a Point on a path
Path.addRelative PathType -> Point -> Path add a relative path part to a Point on a path
Path.addAbsolute PathType -> Point -> Path add a absolute path part to a Point on a path
Path.addClosePath Path -> Path close a path
Path.toString Path -> string convert a path to a string

Usage

Example

let path =
  Path.empty
    |> Path.addAbsolute PathType.MoveTo (Point.ofInts (10, 10))
    |> Path.addAbsolute PathType.LineTo (Point.ofInts (20, 10))
    |> Path.addAbsolute PathType.LineTo (Point.ofInts (25, 25))
    |> Path.addClosePath
 
let style = Style.create (Name Colors.Yellow) (Name Colors.Red) (Length.ofInt 3) 1.0

path
  |> Element.createWithStyle style
  |> printf "%A"

Output

<path stroke="red" stroke-width="3" fill="yellow" opacity="1" d="M10 10 L20 10 L25 25 Z"/>

Table of Contents

Getting Started

Fundamentals

Basic SVG Elements

Advanced Elements

Experimental

Clone this wiki locally
You can’t perform that action at this time.