Is it possible to mix HTML form input tags with SVG, or to use SVG to lay out a form ?

Is it possible to mix HTML form input tags with SVG, or to use SVG to lay out a form ?

Asked on November 23, 2018 in knockout js.
Add Comment


  • 1 Answer(s)

       Use the  foreignObject. For example :

    <?xml version="1.0" standalone="yes"?>
    <svg xmlns = "http://www.w3.org/2000/svg" width="100%" height="100%">
      <rect x="25" y="25" width="250" height="200" fill="#ff0000" stroke="#000000"/>
      <foreignObject x="50" y="50" width="200" height="150">
        <body xmlns="http://www.w3.org/1999/xhtml">
          <form>
            <input type="text"/>
            <input type="text"/>
          </form>
        </body>
      </foreignObject>
      <circle cx="60" cy="80" r="30" fill="#00ff00" fill-opacity="0.5"/>
    </svg>
    

      This is a standard SVG, But HTML elements is added intentionally between the rect and the circle using the foreignObject tag. The stack order is respected, the circle being in front of the inputs.

       Other solutions exists in “pure” SVG, but they heavily depend on the JavaScript. Here is an example : http://www.carto.net/papers/svg/gui/textbox/

    Answered on November 23, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.