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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

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 possible to have the <input> tags nested in the SVG and still work within HTML 5? Are there alternatives within SVG to input data from the user, maybe extracting them with Knockout.js?

I know you could use the SVG in the sense of a background graphic and hack the positions so that the form fields line up. I am really interested in having the input statements flowed by the SVG if possible.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:28:28+0000

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/

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags