问题
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.
回答1:
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/
来源：https://stackoverflow.com/questions/5972705/is-it-possible-to-mix-html-form-input-tags-with-svg-or-to-use-svg-to-lay-out-a