React contenteditable svg 文本不可编辑

Question

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

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

这是 React 的旧版本，因为我很快就拿到了 codepen，但我在自己的项目中使用了最新的 React，这是同样的问题。

我收到有关 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>

但是您可以使用另一个块（例如 div）来包装 svg 元素。并且您的 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