React contenteditable svg 文本不可编辑答案

【问题标题】：React contenteditable svg text isn't editableReact contenteditable svg 文本不可编辑
【发布时间】：2018-03-17 18:46:02
【问题描述】：

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

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

那是 React 的旧版本，因为我很快就拿起了一个 codepen，但我在自己的项目中使用了最新的 react，而且是同样的问题。

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

【问题讨论】：

标签： reactjs svg contenteditable

【解决方案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>

但是你可以将你的 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

【讨论】：

男孩，浏览器标准一团糟！ SVG 不支持 ContentEditable，但如果您使用包含 ContentEditable 的 div 包装 SVG，它会支持？诡异而诡异！因此 HTML 将 ContentEditable 功能泄漏到 SVG 中。我猜 HTML 就像涓滴经济学。