Simulating contenteditable in SVG without foreignobject

contenteditable, html, svg

Solution

Here's an example:

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

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.

Problem

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? EDIT: 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> ```

Original source