是否可以将HTML表单输入标签与SVG混合,或者使用SVG来布局表单？

Question

是否可以将HTML表单输入标签与SVG混合,或者使用SVG来布局表单？

Zac*_*ott 29 jquery html5 svg form-design knockout.js

我们喜欢使用带有SVG的JQuery模板来显示具有良好风格的产品.

假设我们有一个代表复杂布局的SVG.是否可以将<input>标记嵌套在SVG中并仍然在HTML 5中工作？SVG中是否有替代方案可以从用户输入数据,也可以使用Knockout.js提取它们？

我知道你可以在背景图形的意义上使用SVG并破解位置,以便表单字段排列.如果可能的话,我真的很想让SVG传入输入语句.

Answer 1

Pla*_*lan 32

您可以使用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>

Run Code Online (Sandbox Code Playgroud)

这是一个标准的SVG,但是我使用foreignObject标记在rect和circle之间添加了HTML元素.堆栈顺序得到遵守,圆圈位于输入的前面.

其他解决方案存在于"纯"SVG中,但它们严重依赖于JavaScript.这是一个例子:http://www.carto.net/papers/svg/gui/textbox/

如果您尝试此操作,请注意此处报告的长期未解决的Chrome/Webkit错误:https://code.google.com/p/chromium/issues/detail？id = 116566 (4认同)
答案应说明foreignObject无法正常使用IE11.请参阅http://stackoverflow.com/questions/4176146中的解决方法 (4认同)

归档时间：	14 年，5 月前
查看次数：	16861 次
最近记录：	10 年，1 月前