React contenteditable svg text不可编辑

Question

https://codepen.io/anon/pen/YaGdLV

<svg><text contentEditable="true">HELLO</text></svg>

这是React的旧版本，因为我很快就抓住了一个codepen，但我正在使用我自己的项目的最新反应，这是同样的问题。

我收到了关于contenteditable的警告，但即使我仍然无法编辑svg中的文本元素。

Answer 1

默认情况下，svg不支持contenteditable属性。

<div style="border:1px solid" >
  <div>
    Here svg has contenteditable attribute, but this does not work
    <svg contenteditable height="30" width="200" style="border: 1px solid">
      <text x="0" y="15">This is SVG</text>
    </svg>
  </div>
</div>

但你可以用aby包装你的svg元素，例如div。并且您的svg元素将被正确更改：

<div style="border:1px solid" >
  <p>Hello</p>
  <div contenteditable>
    <svg height="30" width="200" style="border: 1px solid">
      <text x="0" y="15">This is SVG</text>
    </svg>
  </div>
  <p>World</p>
</div>

现场演示https://codepen.io/xnimorz/pen/NYRoRV