elm-community / typed-svg / TypedSvg.Attributes.InPx

This module exposes all Length attributes (x, y, width, etc.) as px-based attributes. It's used as a shortcut so that it becomes unnecessary to prefix each numeric length with the px function.

Example:

import Color
import Html exposing (Html)
import TypedSvg exposing (rect, svg)
import TypedSvg.Attributes exposing (fill, stroke, viewBox)
import TypedSvg.Attributes.InPx exposing (height, strokeWidth, width, x, y)

type Msg
    = NoOp

type alias Model =
    Int

view : Model -> Html Msg
view model =
    svg
        [ viewBox 0 0 800 600
        ]
        [ rect
            [ x 150
            , y 150
            , width 200
            , height 200
            , fill Color.white
            , strokeWidth 2
            , stroke Color.black
            ]
            []
        ]

Common Length Attributes

x : Basics.Float -> TypedSvg.Core.Attribute msg

y : Basics.Float -> TypedSvg.Core.Attribute msg

r : Basics.Float -> TypedSvg.Core.Attribute msg

width : Basics.Float -> TypedSvg.Core.Attribute msg

height : Basics.Float -> TypedSvg.Core.Attribute msg

strokeWidth : Basics.Float -> TypedSvg.Core.Attribute msg

Text

fontSize : Basics.Float -> TypedSvg.Core.Attribute msg

textLength : Basics.Float -> TypedSvg.Core.Attribute msg

Marker

markerWidth : Basics.Float -> TypedSvg.Core.Attribute msg

markerHeight : Basics.Float -> TypedSvg.Core.Attribute msg

Other

cx : Basics.Float -> TypedSvg.Core.Attribute msg

cy : Basics.Float -> TypedSvg.Core.Attribute msg

dx : Basics.Float -> TypedSvg.Core.Attribute msg

dy : Basics.Float -> TypedSvg.Core.Attribute msg

fx : Basics.Float -> TypedSvg.Core.Attribute msg

fy : Basics.Float -> TypedSvg.Core.Attribute msg

rx : Basics.Float -> TypedSvg.Core.Attribute msg

ry : Basics.Float -> TypedSvg.Core.Attribute msg

x1 : Basics.Float -> TypedSvg.Core.Attribute msg

y1 : Basics.Float -> TypedSvg.Core.Attribute msg

x2 : Basics.Float -> TypedSvg.Core.Attribute msg

y2 : Basics.Float -> TypedSvg.Core.Attribute msg