Javascript 如何使SVG文本可编辑？

我有一个文本标记，我正在通过JS脚本添加到SVG中，并希望使该文本可编辑

在StackOverflow上找到了两个解决方案：

创建css类并将其应用于我的SVG文本元素。这很好，至少在Safari中是这样，但MDN不推荐这样做 这堂课实际上是某人的答案，不幸的是我记不起是谁的：

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

将svg包装在contenteditable div中（Erik给出的答案）。这也可以工作，但会导致错误的光标行为，至少在Safari中是这样

@Raymond comment是正确的答案，但由于您仍然有问题，我写了一个示例


document.getElementById（“svgWrapper”）.contentEditable=“true”

document.getElementById（“元素”）.contentEditable=“true”
您还可以在HTML元素中使用ref
contenteditable=“true”
，例如：
。在第二个示例中，您没有要编辑的文本元素。Raymond，环绕运行，但会产生奇怪的光标行为。我无法将contentEditable设置为“true”来工作。这就是我尝试的，我做错了吗？：document.getElementsByTagName（“text”）[0]。contentEditable='true'文本元素通过JS添加到第二个代码部分的SVG元素中。谢谢Masoud和大家。这个答案已经在StackOverflow上了，并且在我的问题中被列为可能的解决方案之一。它会产生奇怪的光标行为。寻找另一种方法，如果有的话。