在没有异物的情况下模拟 SVG 中的 contenteditable

Question

我编写了一个网络应用程序，用户可以在其中创建带有文本的 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>

Answer 1

这是一个例子：

<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 (Nightly) 28 和 IE9。可能也可以在早期版本的 Opera、Chrome 和 Firefox 中使用，但不太确定有多远。