Drop-in replacement for the Svg
module from the elm/svg
package.
The only functions added are styled
, toSvg
, toSvgs
and fromSvg
:
styled : (List (Attribute msg) -> List (Svg msg) -> Svg msg) -> List Origami.Style -> List (Attribute msg) -> List (Svg msg) -> Svg msg
Takes a function that creates an element, and pre-applies styles to it.
fromSvg : VirtualDom.Node msg -> Svg msg
toSvg : Svg msg -> VirtualDom.Node msg
toSvgs : List (Svg msg) -> List (VirtualDom.Node msg)
Origami.VirtualDom.Node msg
The core building block to create SVG. This library is filled with helper
functions to create these Svg
values.
This is backed by VirtualDom.Node
in elm/virtual-dom
, but you do not
need to know any details about that to use this library!
Origami.VirtualDom.Attribute msg
Set attributes on your Svg
.
text : String -> Svg msg
A simple text node, no tags at all.
Warning: not to be confused with text_
which produces the SVG <text>
tag!
node : String -> List (Attribute msg) -> List (Svg msg) -> Svg msg
Create any SVG node. To create a <rect>
helper function, you would write:
rect : List (Attribute msg) -> List (Svg msg) -> Svg msg
rect attributes children =
node "rect" attributes children
You should always be able to use the helper functions already defined in this library though!
map : (a -> msg) -> Svg a -> Svg msg
Transform the messages produced by some Svg
.
svg : List (Origami.Html.Attribute msg) -> List (Svg msg) -> Origami.Html.Html msg
The root <svg>
node for any SVG scene. This example shows a scene
containing a rounded rectangle:
import Svg exposing (..)
import Svg.Attributes exposing (..)
roundRect =
svg
[ width "120", height "120", viewBox "0 0 120 120" ]
[ rect [ x "10", y "10", width "100", height "100", rx "15", ry "15" ] [] ]
foreignObject : List (Attribute msg) -> List (Origami.Html.Html msg) -> Svg msg
circle : List (Attribute msg) -> List (Svg msg) -> Svg msg
The circle element is an SVG basic shape, used to create circles based on a center point and a radius.
circle [ cx "60", cy "60", r "50" ] []
ellipse : List (Attribute msg) -> List (Svg msg) -> Svg msg
image : List (Attribute msg) -> List (Svg msg) -> Svg msg
line : List (Attribute msg) -> List (Svg msg) -> Svg msg
path : List (Attribute msg) -> List (Svg msg) -> Svg msg
polygon : List (Attribute msg) -> List (Svg msg) -> Svg msg
polyline : List (Attribute msg) -> List (Svg msg) -> Svg msg
The polyline element is an SVG basic shape, used to create a series of straight lines connecting several points. Typically a polyline is used to create open shapes.
polyline [ fill "none", stroke "black", points "20,100 40,60 70,80 100,20" ] []
rect : List (Attribute msg) -> List (Svg msg) -> Svg msg
use : List (Attribute msg) -> List (Svg msg) -> Svg msg
animate : List (Attribute msg) -> List (Svg msg) -> Svg msg
animateColor : List (Attribute msg) -> List (Svg msg) -> Svg msg
animateMotion : List (Attribute msg) -> List (Svg msg) -> Svg msg
animateTransform : List (Attribute msg) -> List (Svg msg) -> Svg msg
mpath : List (Attribute msg) -> List (Svg msg) -> Svg msg
set : List (Attribute msg) -> List (Svg msg) -> Svg msg
desc : List (Attribute msg) -> List (Svg msg) -> Svg msg
metadata : List (Attribute msg) -> List (Svg msg) -> Svg msg
title : List (Attribute msg) -> List (Svg msg) -> Svg msg
a : List (Attribute msg) -> List (Svg msg) -> Svg msg
The SVG Anchor Element defines a hyperlink.
defs : List (Attribute msg) -> List (Svg msg) -> Svg msg
g : List (Attribute msg) -> List (Svg msg) -> Svg msg
marker : List (Attribute msg) -> List (Svg msg) -> Svg msg
mask : List (Attribute msg) -> List (Svg msg) -> Svg msg
pattern : List (Attribute msg) -> List (Svg msg) -> Svg msg
switch : List (Attribute msg) -> List (Svg msg) -> Svg msg
symbol : List (Attribute msg) -> List (Svg msg) -> Svg msg
altGlyph : List (Attribute msg) -> List (Svg msg) -> Svg msg
altGlyphDef : List (Attribute msg) -> List (Svg msg) -> Svg msg
altGlyphItem : List (Attribute msg) -> List (Svg msg) -> Svg msg
glyph : List (Attribute msg) -> List (Svg msg) -> Svg msg
glyphRef : List (Attribute msg) -> List (Svg msg) -> Svg msg
textPath : List (Attribute msg) -> List (Svg msg) -> Svg msg
text_ : List (Attribute msg) -> List (Svg msg) -> Svg msg
tref : List (Attribute msg) -> List (Svg msg) -> Svg msg
tspan : List (Attribute msg) -> List (Svg msg) -> Svg msg
font : List (Attribute msg) -> List (Svg msg) -> Svg msg
linearGradient : List (Attribute msg) -> List (Svg msg) -> Svg msg
radialGradient : List (Attribute msg) -> List (Svg msg) -> Svg msg
stop : List (Attribute msg) -> List (Svg msg) -> Svg msg
feBlend : List (Attribute msg) -> List (Svg msg) -> Svg msg
feColorMatrix : List (Attribute msg) -> List (Svg msg) -> Svg msg
feComponentTransfer : List (Attribute msg) -> List (Svg msg) -> Svg msg
feComposite : List (Attribute msg) -> List (Svg msg) -> Svg msg
feConvolveMatrix : List (Attribute msg) -> List (Svg msg) -> Svg msg
feDiffuseLighting : List (Attribute msg) -> List (Svg msg) -> Svg msg
feDisplacementMap : List (Attribute msg) -> List (Svg msg) -> Svg msg
feFlood : List (Attribute msg) -> List (Svg msg) -> Svg msg
feFuncA : List (Attribute msg) -> List (Svg msg) -> Svg msg
feFuncB : List (Attribute msg) -> List (Svg msg) -> Svg msg
feFuncG : List (Attribute msg) -> List (Svg msg) -> Svg msg
feFuncR : List (Attribute msg) -> List (Svg msg) -> Svg msg
feGaussianBlur : List (Attribute msg) -> List (Svg msg) -> Svg msg
feImage : List (Attribute msg) -> List (Svg msg) -> Svg msg
feMerge : List (Attribute msg) -> List (Svg msg) -> Svg msg
feMergeNode : List (Attribute msg) -> List (Svg msg) -> Svg msg
feMorphology : List (Attribute msg) -> List (Svg msg) -> Svg msg
feOffset : List (Attribute msg) -> List (Svg msg) -> Svg msg
feSpecularLighting : List (Attribute msg) -> List (Svg msg) -> Svg msg
feTile : List (Attribute msg) -> List (Svg msg) -> Svg msg
feTurbulence : List (Attribute msg) -> List (Svg msg) -> Svg msg
feDistantLight : List (Attribute msg) -> List (Svg msg) -> Svg msg
fePointLight : List (Attribute msg) -> List (Svg msg) -> Svg msg
feSpotLight : List (Attribute msg) -> List (Svg msg) -> Svg msg
clipPath : List (Attribute msg) -> List (Svg msg) -> Svg msg
colorProfile : List (Attribute msg) -> List (Svg msg) -> Svg msg
cursor : List (Attribute msg) -> List (Svg msg) -> Svg msg
filter : List (Attribute msg) -> List (Svg msg) -> Svg msg
style : List (Attribute msg) -> List (Svg msg) -> Svg msg
view : List (Attribute msg) -> List (Svg msg) -> Svg msg