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? jquery jquery

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


You can use foreignObject. A small 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 I added HTML elements 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 rely on JavaScript. Here an example : http://www.carto.net/papers/svg/gui/textbox/