Drop-in replacement for the Svg
module from the elm-lang/svg
package.
The only functions added are styled
, toUnstyled
and fromUnstyled
:
styled : (List (Attribute msg) -> List (Svg msg) -> Svg msg) -> List Css.Style -> List (Attribute msg) -> List (Svg msg) -> Svg msg
Takes a function that creates an element, and pre-applies styles to it.
fromUnstyled : VirtualDom.Node msg -> Svg msg
toUnstyled : Svg msg -> VirtualDom.Node msg
VirtualDom.Styled.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 evancz/virtual-dom
, but you do not
need to know any details about that to use this library!
VirtualDom.Styled.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 (Html.Styled.Attribute msg) -> List (Svg msg) -> Html.Styled.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 (Html.Styled.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