Simulate content in SVG without a foreign object

Question

I wrote a web application in which users can create svg elements with text. I want to simulate content elements inside svg elements so that users can dynamically edit the contents of svg elements. That is, when the user clicks on one of these elements, the 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 could not find anything useful about this on the Internet, so is there a 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> 

Answer 1

Here is 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 (night) 28, and IE9. It probably works in earlier versions of Opera, Chrome and Firefox too, not quite sure how far back.