React contenteditable svg text isn't editable

问题

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

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

That's an old version of React, because I quickly grabbed a codepen, but I'm using the latest react on my own project and it's the same issue.

I get the warning about contenteditable, but even still I simply can't edit text elements in svg.

回答1:

By default svg does not support contenteditable attribute.

<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>

But you can wrap your svg element with aby another block such as div. And your svg element will be changed correctly:

<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>

Live demo https://codepen.io/xnimorz/pen/NYRoRV

来源：https://stackoverflow.com/questions/49340612/react-contenteditable-svg-text-isnt-editable