是否可以将HTML表单输入标签与SVG混合使用，还是使用SVG来布置表单？ [英] Is it possible to mix HTML form input tags with SVG, or to use SVG to lay out a form?
问题描述
假设我们有一个表示复杂布局的SVG，我们可以使用SVG来表示一个复杂的布局。是否有可能嵌套在SVG中的< input> 标签仍然在HTML 5中工作？ SVG中是否有替代方案可以从用户输入数据，也可以使用Knockout.js提取数据？
我知道你可以在背景图形的意义上使用SVG破解职位，以便表单字段排队。如果可能的话，我真的很感兴趣的是让输入语句由SVG流动。 您可以使用 foreignObject 。一个小例子：
<？xml version =1.0standalone =yes？>
< svg xmlns =http://www.w3.org/2000/svgwidth =100％height =100％>
< rect x =25y =25width =250height =200fill =＃ff0000stroke =＃000000/>
< foreignObject x =50y =50width =200height =150>
< body xmlns =http://www.w3.org/1999/xhtml>
< form>
< input type =text/>
< input type =text/>
< / form>
< / body>
< / foreignObject>
这是一个标准的SVG，但我在rect和circle之间使用foreignObject标记添加了HTML元素。其他解决方案存在于纯SVG中，但它们主要依赖于JavaScript。下面是一个例子： http://www.carto.net/papers/svg/gui/textbox/
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.
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/
这篇关于是否可以将HTML表单输入标签与SVG混合使用，还是使用SVG来布置表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
