Elm：Html 嵌入到 Svg 错误中

Question

在 Elm 中，我试图在 Svg 中嵌入一个 Html 文本区域，但文本区域无法正确加载。有人可以帮助我吗？

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

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

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

请注意 foreignObject 标签是 not supported by all browsers。