This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

TypedSvg.Extra.InPx

Typed SVG elements that default to px units

Helpers

centeredImage : String -> Float -> Float -> Float -> Float -> Svg msg

Centers an image (png, svg, etc.) referenced by an url string and with a given image width and height on the given x, y coordinate. Usage example:

let
    width = 50.5
    height = 50.5
    x = 150
    y = 200
in
    centeredImage "/images/example.png" width height x y
module TypedSvg.Extra.InPx exposing (..)

{-| Typed SVG elements that default to `px` units

# Helpers
@docs centeredImage
-}

import TypedSvg exposing (image)
import TypedSvg.Core exposing (Svg)
import TypedSvg.Attributes exposing (xlinkHref)
import TypedSvg.Attributes.InPx exposing (x, y, width, height)


{-| Centers an image (png, svg, etc.) referenced by an url string and with a given image width and height on the given x, y coordinate. Usage example:

    let
        width = 50.5
        height = 50.5
        x = 150
        y = 200
    in
        centeredImage "/images/example.png" width height x y
-}
centeredImage : String -> Float -> Float -> Float -> Float -> Svg msg
centeredImage href w_ h_ x_ y_ =
    image
        [ x (x_ - w_ / 2)
        , y (y_ - h_ / 2)
        , width w_
        , height h_
        , xlinkHref href
        ]
        []