PathD - Minimal, complete SVG Path constructor of the
This library helps you specify SVG paths with a clean Elm interface. For the complete instruction on what each segment does, consult the MDN docs on SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
Example of drawing a custom shape:
import Svg
import Svg.PathD exposing (Segment(..), pathD, m, l)
...
Svg.path
[ d <| pathD
[ M (-0.5, 0.5)
, Q (0.5, 0.5) (0.5, -0.5)
, L (-0.5, -0.5)
, m (0.1, 0.1)
, l (0.2, 0.1)
, l (0.2, 0.25)
, Z
]
]
[]
Uppercase commands work in absolute coordinates, and lowercase commands work in relative coordinates. For how relative paths work, see https://oreillymedia.github.io/Using_SVG/guide/path-data.html
pathD : List Segment -> String
This function takes a list of Segments and produces a SVG d attribute with exact specifications.
Complete implementation of the SVG path d
attribute.
For relative commands in corresponding lowercase, such as m
or l
, they are
exposed from the top-level module.
Construtors ending with -d
are implementation details, and will be removed
in a future iteration. Use the corresponding lowercase function instead.
Qualifying imports may be used to resolve namespace clashing, like
import Svg.PathD as PathD exposing (Segment(..), m, l)
The commands will then be accessible as PathD.M
, PathD.Q
, PathD.m
etc.
a : Point -> Basics.Float -> Basics.Bool -> Basics.Bool -> Point -> Segment
Declare a relative arc SVG path command
c : Point -> Point -> Point -> Segment
Declare a relative cubic curve-to SVG path command
h : Basics.Float -> Segment
Declare a relative horizontal line SVG path command
l : Point -> Segment
Declare a relative line-to SVG path command
m : Point -> Segment
Declare a relative move-to SVG path command
q : Point -> Point -> Segment
Declare a relative quadratic curve-to SVG path command
s : Point -> Point -> Segment
Declare a relative smooth cubic curve-to SVG path command
t : Point -> Segment
Declare a relative smooth quadratic curve-to SVG path command
v : Basics.Float -> Segment
Declare a relative vertical line SVG path command
z : Segment
Declare a relative close-path SVG path command
( Basics.Float, Basics.Float )
Type shorthand for 2 floats that make up a coordinate.