Javascript 基于 SVG 的文本输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4176146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG-based text input field
提问by Yurii Rashkovskii
Has anyone seen any javascript implementation of a text input field besides http://www.carto.net/papers/svg/gui/textbox/?
除了http://www.carto.net/papers/svg/gui/textbox/之外，有人见过文本输入字段的任何 javascript 实现吗？
回答by Ricardo Cruz
There is an interesting SVG node called foreignObject, which allows you to place HTML, flash, etc within your SVG code. Try the following:
有一个名为 的有趣 SVG 节点foreignObject，它允许您在 SVG 代码中放置 HTML、Flash 等。请尝试以下操作：
<svg width="100%" height="500" xmlns="http://www.w3.org/2000/svg>
<foreignObject x="10" y="10" width="100" height="150">
<div xmlns="http://www.w3.org/1999/xhtml">
<input></input>
</div>
</foreignObject>
</svg>
EDIT:added xmlnsso it works for IE.
编辑：添加xmlns所以它适用于 IE。
回答by Wolfgang Kuehn
This is for MS Internet Explorer, not tested in any other browser.
这是针对 MS Internet Explorer 的，未在任何其他浏览器中测试。
As mentioned in another comment, up to IE11 does not support foreignObject. Instead, use the contentEditable attribute.
正如另一条评论中提到的，直到 IE11 都不支持 foreignObject。相反，使用 contentEditable 属性。
Plain SVG example
普通 SVG 示例
<svg width="100" height="100" >
<g transform="translate(40,40)">
<text contentEditable="true">foo</text>
</g>
</svg>
D3.js example with data binding
带有数据绑定的 D3.js 示例
Here we listen for key events to write the text back to the data.
在这里，我们侦听关键事件以将文本写回数据。
selection.
.append("text")
.attr("contentEditable", true)
.text(function(d) { return d.text })
.on("keyup", function(d) { d.text = d3.select(this).text(); });
Note: If nodes are dynamically generated like with d3.js, you mustcapitalize contentEditablelike such (this took me some time)!
注意：如果节点像 d3.js 一样动态生成，你必须contentEditable像这样大写（这花了我一些时间）！
Note: Do not style your text with pointer-events: None, for then you cannot interact with the text anymore, regardless of the contentEditable setting.
注意：不要使用 设置文本样式pointer-events: None，因为无论 contentEditable 设置如何，您都无法再与文本交互。
回答by Josef Engelfrost
I've been looking for this for a project I'm working on. We couldn't find anything suitable so we're coding our own solution, I hope it's good enough so that someone else does not have to do the same: http://engelfrost.github.io/svg-input-elements/
我一直在为我正在从事的项目寻找这个。我们找不到合适的东西，所以我们正在编写我们自己的解决方案，我希望它足够好，这样其他人就不必做同样的事情：http: //engelfrost.github.io/svg-input-elements/
回答by Erik Dahlstr?m
I've seen another one, note that it requires support for the 'editable' attributefrom SVG Tiny 1.2... it's definately more native in the sense that there's not a single line of javascript in that example. Try it out in Opera.
我见过另一个，请注意它需要支持来自 SVG Tiny 1.2的“editable”属性......从这个例子中没有一行 javascript 的意义上说，它绝对是更原生的。在Opera 中尝试一下。
