https://codepen.io/anon/pen/YaGdLV
<svg><text contentEditable="true">HELLO</text></svg>
那是 React 的旧版本，因为我很快就拿起了一个 codepen，但我在自己的项目中使用了最新的 react，这是同样的问题。
我收到有关 contenteditable 的警告，但即使如此，我仍然无法在 svg 中编辑文本元素。
React contenteditable svg 文本不可编辑
IT技术
reactjs
svg
contenteditable
2022-07-08 02:11:42
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>