是否可以将 HTML 表单输入标签与 SVG 混合使用，或者使用 SVG 来布置表单? [英] Is it possible to mix HTML form input tags with SVG, or to use SVG to lay out a form?
问题描述
例如，我们喜欢将 jQuery 模板与 SVG 结合使用，以显示价格合理的产品.
We like using jQuery templates with SVG for example to show a Product with a nicely styled price.
假设我们有一个表示复杂布局的 SVG.是否可以将 标签嵌套在 SVG 中并且仍然在 HTML 5 中工作?SVG 中是否有替代方案来输入来自用户的数据，也许可以使用 Knockout.js 提取它们?
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?
我知道您可以在背景图形的意义上使用 SVG 并修改位置，以便表单字段对齐.如果可能的话，我真的很想让 SVG 处理输入语句.
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.
推荐答案
您可以使用 foreignObject.一个小例子:
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>
这是一个标准的SVG，但我使用foreignObject 标签在矩形和圆之间添加了HTML 元素.遵守堆栈顺序，圆圈在输入之前.
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.
纯"SVG 中存在其他解决方案，但它们严重依赖 JavaScript.这里有一个例子:http://www.carto.net/papers/svg/gui/textbox/
Other solutions exists in "pure" SVG, but they heavily rely on JavaScript. Here an example : http://www.carto.net/papers/svg/gui/textbox/
这篇关于是否可以将 HTML 表单输入标签与 SVG 混合使用，或者使用 SVG 来布置表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
