jquery – 是否可以混合HTML表单输入标签与SVG,或使用SVG布局一个窗体?

前端之家收集整理的这篇文章主要介绍了jquery – 是否可以混合HTML表单输入标签与SVG,或使用SVG布局一个窗体?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们喜欢使用带有SVG的JQuery模板来显示一个具有很好的样式价格的产品。

假设我们有一个表示复杂布局的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,但我添加了HTML元素在rect和圆之间使用foreignObject标签。遵守堆栈顺序,圆圈在输入前面。

其他解决方案存在于“纯”SVG中,但他们严重依赖JavaScript。这里的例子:http://www.carto.net/papers/svg/gui/textbox/

猜你在找的jQuery相关文章