Svg 如何在Elm视图中迭代列表？

我试图通过以下方式使用Elm中的视图向SVG添加矩形：

view : Model -> Html Msg
view model =
  let
      log1 = Debug.log "Time: " model.time
      log2 = Debug.log "Coords: " model.coordinates
      rects = [ ("200", "200"), ("210","201"), ("220", "202") ]
  in
    svg
    [ width "700", height "700", viewBox "0 0 500 500" ]
        [ rect [ x "100", y "100", width "600", height "600", fill "gray" ] []
        , List.map (\ coord -> (rect [ x (fst coord), y (snd coord), width "1", height "1", fill "black" ] [])) rects
        ]

有没有办法从映射而不是列表中获取VirtualDom.Node类型

错误消息：

    The 1st element has this type:

        VirtualDom.Node a

    But the 2nd is:

        List (Svg a)

Hint: All elements should be the same type of value so that we can iterate
through the list without running into unexpected values.

---

您可以将列表连接在一起，如下所示：

svg
[ width "700", height "700", viewBox "0 0 500 500" ]
    ([ rect [ x "100", y "100", width "600", height "600", fill "gray" ] [] ]
      ++ List.map (\ coord -> (rect [ x (fst coord), y (snd coord), width "1", height "1", fill "black" ] [])) rects)

由于第一个列表是单个元素，因此也可以使用cons运算符

svg
[ width "700", height "700", viewBox "0 0 500 500" ]
    (rect [ x "100", y "100", width "600", height "600", fill "gray" ] []
      :: List.map (\ coord -> (rect [ x (fst coord), y (snd coord), width "1", height "1", fill "black" ] [])) rects)