榆树：嵌入Svg bug的Html

Question

在Elm中我试图在Svg中嵌入一个Html textarea，但textarea将无法正确加载。有人能帮助我吗？

svgTextarea : Model -> Html Msg
svgTextarea model =
    let
        textspace =
            textarea [ onInput ChangeSvgText ] []

        ( w, h ) =
            ( 200, 200 )
    in 
    svg
      [ width w
      , height h
      , viewBox <| "0 0 " ++ toString w ++ " " ++ toString h
      ]
      [ textspace ]

提前致谢！

示例回购：https://github.com/gitLabor8/Elm-Html-embedded-in-Svg-bug

Answer 1

textarea本身不是有效的SVG。您需要将其包装在foreignObject标记中。

svgTextarea model =
    let
        textspace =
            Svg.foreignObject []
                [ textarea [ onInput ChangeSvgText ] [] ]
    ...

请注意，foreignObject代码为not supported by all browsers。