Html 在无外来对象的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>

样本文本

以下是一个示例：

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

你好，世界

---

在Opera 18、Chrome 33、Firefox（每晚）28和IE9中工作。可能在早期版本的Opera、Chrome和Firefox中也能工作，但不太确定要追溯到多久。

@Erik Dalhström的解决方案似乎没有解决这个问题：他希望能够编辑SVG对象顶部（“内部”）的文本内容，如示例所示。在Firefox上，Erik的代码确实使文本可编辑，但在10 x 10的圆圈下，而不是在SVG空间内

我在以下位置找到了解决方法：

当用户单击SVG

元素时， 将HTML命名空间中最近祖先的

contenteditable

属性设置为

true

（例如，

document.body.contentEditable=true；

）， 然后使SVG

元素可选择 （例如，

svgTextElement.style.webkitUserSelect='text'；

）

当用户完成编辑文本时（例如，通过单击画布） 将祖先上的

contentEditable

属性设置回

false

我还没试过，希望有人能报告一下。

---

我们不必等待CSS 2.0来获得这一非常明显需要的功能。

感谢您的回答。但这似乎不适用于嵌套的SVG，例如，当我想要编辑圆圈中的内容时，圆圈本身包含在另一个SVG元素中，例如g元素。光标在chrome 31上的位置也不好，但我应该能够解决这个问题。更新：在最新的chrome（49.0.2623.110）中不起作用@Erik Dalhström，contenteditable出现在外部元素而不是实际的目标元素上，这有什么好的原因吗？@ATL_DEV我也在想同样的问题-看起来是因为它不是SVG规范的一部分，因此它不起作用-尽管有一个添加它的建议，复制HTML语义：不确定为什么Erik不是可信的或官方的来源。他是SVG规范的编辑之一。