gpt4 book ai didi

html - 是否可以将 HTML 表单输入标签与 SVG 混合,或者使用 SVG 来布置表单?

转载 作者:技术小花猫 更新时间:2023-10-29 11:44:35 25 4
gpt4 key购买 nike

例如,我们喜欢将 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/

25 4 0