Javascript 基于SVG的文本输入字段

除此之外，还有人见过文本输入字段的javascript实现吗？

我见过，请注意，它需要支持SVG Tiny 1.2。。。在这个示例中，没有一行javascript，这显然更为自然。在中试用。

我一直在为一个我正在从事的项目寻找这个。我们找不到任何合适的解决方案，因此我们正在编写自己的解决方案，我希望它足够好，以便其他人不必这样做：

这是针对MS Internet Explorer的，没有在任何其他浏览器中测试过

如另一条评论所述，IE11不支持foreignObject。 相反，请使用contentEditable属性

普通SVG示例 注意：如果节点是像d3.js那样动态生成的，那么必须像这样大写

contentEditable

（这花了我一些时间）

---

注意：不要使用

指针事件设置文本的样式：无

，因为这样无论contentEditable设置如何，您都无法再与文本交互。

有一个名为

foreignObject

的有趣的SVG节点，它允许您在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>

---

为什么？那一个怎么了？试过之后，我收回了那个问题。它有很多缺陷，包括完全缺少快捷键、bidi和不完善的键盘选择。你在2010年问过这个问题。现在是2014年。此时SVG中是否构建了直接功能？否则，我希望SVG文本在不久的将来能够接受用户输入。这将非常有帮助。我的意思是，这可能只是一个在运行中访问正确元素和节点的xml编辑器的问题，不是吗？SVG现在允许HTML代码通过
foreignObject
，它可以包括输入框之类的东西。Internet Explorer不支持此操作。请看下面我的答案。问题中给出的链接已断开。我熟悉可编辑属性。糟糕的是1.2并不是一个真正的选项。无论如何谢谢你！这需要jQuery，它要求SVG嵌入HTML中。如果文档是HTML，则可以使用
并插入本机
元素。很酷，不幸的是，本地元素在视觉上表现不好，特别是在缩放时。我相信这会越来越好。仅供参考，删除键在GitHub演示、Mac上的最新Firefox和选择错误中不起作用<代码>

在这个平台上进行缩放效果非常好。YMMV.请注意，任何版本的IE（当前版本的11）都绝对不支持

foreignObject

。阅读自述，它不再有任何依赖关系！你能帮我贴张小提琴吗？这对我也不管用。我不知道怎么了。小提琴可能真的很有用。“使任何HTML元素可编辑的方法。”请注意该引号中的HTML。@MarkKuczmarski，我忘了添加IE所需的

xmlns

。您现在可以测试它吗？（我不使用Windows。）

selection.
  .append("text")
    .attr("contentEditable", true)
    .text(function(d) { return d.text })
    .on("keyup", function(d) { d.text = d3.select(this).text(); });

<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>