Functional programming Elm语言，鼠标跟踪器

我正在尝试制作一个简单的鼠标跟随器。一个蓝色圆圈，其位置随鼠标位置更新。我的更新和视图有什么不允许这样做的地方吗

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] []]

SVG元素不支持

x

或

y

属性（它们被静默忽略）

cx

和

cy

是中心的坐标，因此需要将

posX

和

posY

传递给它们：

更改：

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

致：

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