例如，我们喜欢将 jQuery 模板与 SVG 一起使用，以显示具有精美样式价格的产品。
假设我们有一个表示复杂布局的 SVG。是否有可能 <input>嵌套在 SVG 中并且在 HTML 5 中仍然有效的标签？ SVG 中是否有其他方法可以从用户输入数据，也许可以使用 Knockout.js 提取它们？
我知道您可以在背景图形的意义上使用 SVG 并破解位置，以便表单字段对齐。如果可能的话，我真的很感兴趣让输入语句通过 SVG 流动。
最佳答案
您可以使用 foreignObject .一个小例子:
<?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 标记在 rect 和 circle 之间添加了 HTML 元素。遵守堆栈顺序，圆圈在输入的前面。
“纯”SVG 中存在其他解决方案，但它们严重依赖 JavaScript。这里有一个例子:http://www.carto.net/papers/svg/gui/textbox/
关于html - 是否可以将 HTML 表单输入标签与 SVG 混合，或者使用 SVG 来布置表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5972705/