在没有外来对象的情况下模拟SVG中的contenteditable [英] Simulating contenteditable in SVG without foreignobject

问题描述

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

I have written a web-application where users can create svg elements with text. I want to simulate contenteditable elements inside the svg elements, so that users can dynamically edit the content of the svg elements. That is, when a user clicks on one of these elements, a cursor should appear so that the text can be edited. I do not want to use foreignobject to achieve this, since this is not supported by IE. I couldn't find anything useful about this online, so is there any way to do this?

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

To clarify, here is an example:

<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，但不太确定它有多久。

Works in Opera 18, Chrome 33, Firefox (Nightly) 28 and IE9. Probably works in earlier versions of Opera, Chrome and Firefox too, not quite sure how far back though.

这篇关于在没有外来对象的情况下模拟SVG中的contenteditable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！