Как я могу сделать SVG текст редактируемым?

Question

У меня есть текстовый тег, который я добавляю в SVG через JS-скрипт, и я хотел бы сделать этот текст редактируемым.

Нашел на StackOverflow пару решений:

1. Создание класса CSS и его применение к моему текстовому элементу SVG. Это прекрасно работает, по крайней мере, в Safari, но не рекомендуется MDN https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify Вот класс, который на самом деле является чьим-то ответом, к сожалению, я не могу вспомнить, чей:

   .editable {
       font-size: 0.3em;
       user-modify: read-write;
       -moz-user-modify: read-write;
       -webkit-user-modify: read-write;
   }
   

2. оборачивая svg в contenteditable div (ответ, данный Эриком). Это также работает, но приводит к плохому поведению курсора, по крайней мере, в Safari.

<div contenteditable="true">
  <svg id="svgArea" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  </svg>
</div>

JS часть

function foo(x, y, w, h) {
  var rect, group;
  var svgPlace = document.getElementById('svgArea');
  var xmlns = "http://www.w3.org/2000/svg";
  group = document.createElementNS(xmlns, 'g');
  svgPlace.appendChild(group);

  var txtElem = document.createElementNS(xmlns, 'text');
  txtElem.setAttributeNS(null, 'x', x);
  txtElem.setAttributeNS(null, 'y', y * 1.25);
  txtElem.setAttributeNS(null, 'fill', 'LightBlue');
  txtElem.setAttributeNS(null, 'contentEditable', true); //does nothing!
  txtElem.setAttributeNS(null, 'class', 'editable'); //this is the best working option at the moment
  var txtVal = document.createTextNode('test');
  txtElem.appendChild(txtVal);
  group.appendChild(txtElem);
}

Я бы хотел иметь возможность установить contentEditable в качестве атрибута, если это возможно. Но самое главное, как лучше всего редактировать текст SVG?

Answer 1

@ Комментарий Раймонда - правильный ответ, но, поскольку у вас все еще есть проблема, я записал пример.

document.getElementById("svgWrapper").contentEditable = "true";

<div id="svgWrapper">
  <svg id="svgArea" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  </svg>
</div>