简体   繁体   中英

SVG not drawing in Elm code

I am writing some Elm code to render SVG (I am a noob). I have the relevant view code listed below (note the onClick messages are present in other code). All I'm trying to do at the moment is draw a rect or a line to see how it works. When I run the elm code that contains this view def the svg graphics are not drawn. if "pixels model" uses the line case the buttons are drawn and the text string of the model is drawn but no line is drawn. If "pixels model" uses the rect case the whole browser tab is blank/white (no buttons or text string rendered). Is there something wrong with my code or have I come across an Elm bug? I've tried pasting the code into elm-lang.org/try and also using 0.17 of the Mac Installer distribution and running 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"][]]

您应该使用Svg.svg而不是Html.svg

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM