Elm Language, mouse tracer

Question

I am trying to make a simple mouse follower. A blue circle who's position updates with my mouse position. What is wrong with my update and view that won't allow this?

type alias Model = { position : { x : Int, y : Int} }

update : Msg -> Model -> (Model,Cmd.Cmd Msg)
update (MouseMsg pos) model = ({ position = {x = model.position.x + pos.x, y = model.position.y + pos.y} },Cmd.none)


view : Model -> Html.Html Msg
view model = let
posX = toString model.position.x
posY = toString model.position.y
in
  svg [width "600",height "600"] [circle [cx "300",cy "300", r "50", fill "blue", x posX, y posY] []]

Dogbert Dogbert · Accepted Answer · 2018-03-15T14:56:38

The <circle> SVG element does not support x or y attributes (they're silently ignored). cx and cy are the coordinates of the center, so you need to pass posX and posY to them:

Change:

circle [cx "300",cy "300", r "50", fill "blue", x posX, y posY]

To:

circle [cx posX, cy posY, r "50", fill "blue"]

Elm Language, mouse tracer

1 Answers