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

后端未结

关注

 1  1715

臣服心动

We like using JQuery templates with SVG for example to show a Product with a nicely styled price.

Say we have an SVG that represents a complicated layout. Is it pos

相关标签:

1条回答

广开言路

2020-12-12 21:44

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/

0 讨论(0)