反应内容可编辑的SVG文本不可编辑 [英] React contenteditable svg text isn't editable

问题描述

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

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

那是React的旧版本，因为我很快抓住了一个Codepen，但是我在自己的项目中使用了最新的React，这是同样的问题.

我收到有关内容可编辑的警告，但即使如此，我仍然无法在svg中编辑文本元素.

解决方案

默认情况下，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

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.

解决方案

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

这篇关于反应内容可编辑的SVG文本不可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！