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

Ответ 1

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

<svg width="100%" height="500">
  <foreignObject x="10" y="10" width="100" height="150">
      <div xmlns="http://www.w3.org/1999/xhtml">
      <input></input>
          </div>
  </foreignObject>
</svg>

Ответ 2

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

Ответ 3

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

Ответ 4

Это для 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.