Поле ввода текста на основе SVG

Question

Кто-нибудь видел реализацию javascript поля ввода текста, кроме http://www.carto.net/papers/svg/gui/textbox/?

Answer 1

Существует интересный узел SVG под названием foreignObject, который позволяет вам размещать HTML, flash и т. Д. В вашем SVG-коде. Попробуйте следующее:

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

РЕДАКТИРОВАТЬ: добавлено xmlns, поэтому он работает для IE.

Answer 2

Это для MS Internet Explorer, не тестировалось ни в одном другом браузере.

Как уже упоминалось в другом комментарии, до IE11 не поддерживается ForeignObject. Вместо этого используйте атрибут contentEditable.

Простой SVG пример

<svg width="100" height="100" >
    <g transform="translate(40,40)">
        <text contentEditable="true">foo</text>
    </g>
</svg>

Пример D3.js с привязкой данных

Здесь мы слушаем ключевые события, чтобы записать текст обратно в данные.

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

Примечание : если узлы генерируются динамически, как в случае с d3.js, вы должны использовать contentEditable с заглавной буквы, как таковой (это заняло у меня некоторое время)!

Примечание : не вводите текст в текст с помощью pointer-events: None, так как тогда вы не сможете больше взаимодействовать с текстом, независимо от настройки contentEditable.

Answer 3

Я искал это для проекта, над которым я работаю.Мы не смогли найти ничего подходящего, поэтому мы кодируем наше собственное решение, надеюсь, оно достаточно хорошее, чтобы кому-то другому не пришлось делать то же самое:

Answer 4

Я видел еще один , обратите внимание, что для него требуется поддержка 'редактируемого' атрибута из SVG Tiny 1.2 ... он определенно более нативный в том смысле, что нет единственная строка JavaScript в этом примере. Попробуйте в Opera .