svg : List (Html.Attribute msg) -> List (Core.Svg msg) -> Html msg
The root svg
node for any SVG scene. This example shows a scene
containing a rounded rectangle:
import Html
import TypedSvg exposing (..)
import TypedSvg.Attributes exposing (..)
roundRect : Html.Html msg
roundRect =
svg
[ width (px 120), height (px 120), viewBox 0 0 120 120 ]
[ rect [ x (px 10), y (px 10), width (px 100), height (px 100), rx (px 15), ry (px 15) ] [] ]
circle : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The circle element is an SVG basic shape, used to create circles based on a center point and a radius.
circle [ cx (px 60), cy (px 60), r (px 50) ] []
ellipse : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The ellipse element creates an ellipse based on a center coordinate and its x and y radius.
ellipse
[ cx (px 100), cy (px 60), rx (px 80), ry (px 50) ]
[]
image : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The image element displays JPEG, PNG, and other SVG files. Animated GIF behavior is undefined.
image
[ attribute "href" "path_to_image.png"
, width (px 200)
, height (px 200)
]
[]
line : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The line element creates a line connecting two points.
line
[ x1 (px 0)
, y1 (px 80)
, x2 (px 100)
, y2 (px 20)
, stroke (Paint Color.black)
]
[]
path : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The path element is the generic element for defining a shape. All the basic shapes can be created with a path element. Here, we show a heart-shaped path:
TypedSvg.path
[ d """M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"""
]
[]
polygon : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The polygon element defines a closed shape with a set of
connected straight line segments. The last point is connected
to the first point. For open shapes, see the polyline
element.
Here, we show a polygon with stroke and no fill:
polygon
[ points [(0,100), (50,25), (50,75), (100,0)]
, fill PaintNone
, stroke (Paint Color.black)
]
[]
polyline : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.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 FillNone
, stroke Color.black
, points [(20, 100), (40, 60), (70, 80), (100, 20)]
]
[]
rect : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The rect element draws a rectangle defined by its position, width, and height. The rectangle may have rounded corners. Here, we show a rounded corner rectangle:
rect
[ x (px 0)
, y (px 0)
, width (px 100)
, height (px 100)
, rx (px 15)
]
[]
use : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
animate : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
animateColor : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
animateMotion : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
animateTransform : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
mpath : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
set : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
desc : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
metadata : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
title : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
a : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The SVG Anchor Element defines a hyperlink.
defs : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
g : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
marker : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
mask : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
pattern : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
switch : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
symbol : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
glyph : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
glyphRef : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
textPath : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The textPath
element draws text along the shape of a path.
It is usually embedded within a text_
element.
import TypedSvg exposing (..)
import TypedSvg.Attributes exposing (..)
import TypedSvg.Core exposing (text, attribute)
import TypedSvg.Types exposing (px, Paint(..))
svg
[ width (px 100), height (px 100), viewBox 0 0 100 100 ]
[ TypedSvg.path
[ id "MyPath"
, fill PaintNone
, stroke (Paint Color.red)
, d "M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50"
]
[]
, text_
[]
[ textPath
[ attribute "href" "#MyPath" ]
[ text "Quick brown fox jumps over the lazy dog." ]
]
]
text_ : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The text_
element draws a graphics element consisting of text.
It should not be confused with text
in TypedSvg.Core
which produces
a simple text node without any tags. text
is often embedded within text_
to specify its content.
import TypedSvg exposing (..)
import TypedSvg.Core exposing (text)
import TypedSvg.Attributes exposing (..)
import TypedSvg.Types exposing (px, FontWeight(..))
text_
[ x (px 20)
, y (px 35)
, fontFamily [ "Helvetica", "sans-serif" ]
, fontSize (px 30)
, fontWeight FontWeightBold
]
[ text "Hello World" ]
tref : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
tspan : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
The tspan
element defines a subtext within a text_
element or
another tspan
element. It allows for adjustment of the style and/or
position of that subtext.
text_
[ x (px 0)
, y (px 40)
, fontFamily [ "Helvetica", "sans-serif" ]
]
[ text "Hello "
, tspan
[ dy (px 10)
, fontFamily [ "Georgia", "serif" ]
, fontSize (px 30)
, fontWeight FontWeightBold
]
[ text "New" ]
, text " World"
]
font : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
linearGradient : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
radialGradient : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
stop : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
See TypedSvg.Filters
clipPath : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
colorProfile : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
cursor : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
filter : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
script : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
style : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
view : List (Core.Attribute msg) -> List (Core.Svg msg) -> Core.Svg msg
See TypedSvg.Deprecated
(e.g. altGlyph
etc.)