html5 – 在没有foreignobject的情况下模拟SVG中的contenteditable

我编写了一个Web应用程序,用户可以使用文本创建svg元素.我想模拟svg元素中的contenteditable元素,以便用户可以动态编辑svg元素的内容.也就是说,当用户单击其中一个元素时,应显示光标以便可以编辑文本.我不想使用foreignobject来实现这一点,因为IE不支持.我在网上找不到任何有用的东西,所以有什么方法可以做到这一点吗？

编辑：澄清一下,这是一个例子：

<svg>
    <rect width="192" height="192" style="stroke-width: 3; fill:red"></rect>
    <text x="30" y="20">A sample text</text><!-- when the user clicks on this,it should be editable-->
</svg>

解决方法

这是一个例子：

<div contenteditable="true">
    <svg>
        <circle cx="10" cy="10" r="5" fill="green" />
        <text y="2em">Hello world</text>
    </svg>
</div>

http://jsfiddle.net/ZEAwB/

适用于Opera 18,Chrome 33,Firefox(夜间)28和IE9.可能也适用于早期版本的Opera,Chrome和Firefox,但不太确定它有多远.

原文地址：https://www.jb51.cc/html5/168279.html