Inline text editing in SVG

Question

I render an inline SVG in a website, and have to enable the user to add and modify texts in that SVG, in a WYSIWYG manner. Basically I need something that works like svg-edit. However I don't need a fully WYSIWYG editor, but just the inline text editing part. I have looked at svg-edit's source code and it seems to be very hard to extract only that part of it.

So what I am looking for is an easy way (maybe with a third-party library) to implement inline SVG text editing. I already thought about replacing the SVG text with an HTML text input when focused, but the text must be rendered when in edit-mode exactly as it is rendered in the resulting SVG.

Answer 1

I made a fiddle that created editable text wherever you click in an SVG. A final step would be to grab the HTML text and put it in an SVG element.

http://jsfiddle.net/brx3xm59/

Code follows:

var mousedownonelement = false;  window.getlocalmousecoord = function (svg, evt) {     var pt = svg.createSVGPoint();     pt.x = evt.clientX;     pt.y = evt.clientY;     var localpoint = pt.matrixTransform(svg.getScreenCTM().inverse());     localpoint.x = Math.round(localpoint.x);     localpoint.y = Math.round(localpoint.y);     return localpoint; };  window.createtext = function (localpoint, svg) {     var myforeign = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')     var textdiv = document.createElement("div");     var textnode = document.createTextNode("Click to edit");     textdiv.appendChild(textnode);     textdiv.setAttribute("contentEditable", "true");     textdiv.setAttribute("width", "auto");     myforeign.setAttribute("width", "100%");     myforeign.setAttribute("height", "100%");     myforeign.classList.add("foreign"); //to make div fit text     textdiv.classList.add("insideforeign"); //to make div fit text     textdiv.addEventListener("mousedown", elementMousedown, false);     myforeign.setAttributeNS(null, "transform", "translate(" + localpoint.x + " " + localpoint.y + ")");     svg.appendChild(myforeign);     myforeign.appendChild(textdiv);  };  function elementMousedown(evt) {     mousedownonelement = true; }   $(('#thesvg')).click(function (evt) {     var svg = document.getElementById('thesvg');     var localpoint = getlocalmousecoord(svg, evt);     if (!mousedownonelement) {         createtext(localpoint, svg);     } else {         mousedownonelement = false;     } });