SVG 不在 Elm 代码中绘制

Question

我正在编写一些 Elm 代码来渲染 SVG（我是菜鸟）。我有下面列出的相关视图代码（注意 onClick 消息存在于其他代码中）。我现在想做的就是画一个矩形或一条线，看看它是如何工作的。当我运行包含此视图定义的榆树代码时，不会绘制 svg 图形。如果 "pixels model" 使用线条大小写，则绘制按钮并绘制模型的文本字符串，但不绘制线条。如果 "pixels model" 使用矩形大小写，则整个浏览器选项卡为 blank/white（不呈现按钮或文本字符串）。我的代码有问题还是遇到了 Elm 错误？我已经尝试将代码粘贴到 elm-lang.org/try 中，还使用了 Mac 安装程序分发版的 0.17 和运行ning elm-reactor on localhost:8000.

import Html exposing (div, button, text, canvas, svg)
import Html.App exposing (beginnerProgram)
import Html.Events exposing (onClick)
import Html.Attributes exposing (id, height, width, style)
import Svg exposing (rect, line)
import Svg.Attributes exposing (x, y, x1, y1, x2, y2, viewBox, fill, color, stroke, strokeWidth)

<snip>

view model =
  div []
    [ button [ onClick Left  ] [ text "Left"     ]
    , button [ onClick Right ] [ text "Right"    ]
    , button [ onClick Down  ] [ text "Down"     ]
    , button [ onClick Up    ] [ text "Up"       ]
    , button [ onClick Out   ] [ text "Zoom out" ]
    , button [ onClick In    ] [ text "Zoom in"  ]
    , button [ onClick Reset ] [ text "Reset"    ]
    , div [] [ text (toString model) ]
    , svg [width 300, height 300, viewBox "0 0 300 300"] (pixels model)
]

pixels model = [rect [x "20", y "20", width 70, height 70, fill "rgb(255,0,0)" ][]]
--pixels model = [line [x1 "20", y1 "20", x2 "70", y2 "70", stroke "red", strokeWidth "2"][]]

Answer 1

你应该使用 Svg.svg 而不是 Html.svg。

SVG 不在 Elm 代码中绘制

SVG not drawing in Elm code

javascript

svg

elm