html5 - Simulando contenteditable en SVG sin objeto extranjero

Question

He escrito una aplicación web donde los usuarios pueden crear elementos svg con texto. Quiero simular elementos editables dentro de los elementos svg, para que los usuarios puedan editar dinámicamente el contenido de los elementos svg. Es decir, cuando un usuario hace clic en uno de estos elementos, debería aparecer un cursor para poder editar el texto. No quiero usar el objeto extranjero para lograr esto, ya que esto no es compatible con IE. No pude encontrar nada útil sobre esto en línea, así que ¿hay alguna manera de hacer esto?

EDITAR: Para aclarar, aquí hay un ejemplo:

<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

Aquí hay un ejemplo:

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

Funciona en Opera 18, Chrome 33, Firefox (Nightly) 28 e IE9. Probablemente también funciona en versiones anteriores de Opera, Chrome y Firefox, aunque no estoy seguro de cuán atrás.