Simulating contenteditable in SVG without foreignobject

user_1763828 0
Viewed 7847

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>
contenteditable svg html
2 Answers

@Erik Dalhström's solution doesn't seem to address the question: He wants to be able to edit text content atop ("inside") an SVG object, as the example showed. On Firefox, Erik's code indeed makes the text editable, but beneath the 10 x 10 circle, and not inside the SVG space.

I found a workaround at https://github.com/artursapek/mondrian/issues/12 :

when the user clicks on an SVG <text> element, set the contenteditableattribute on the nearest ancestor in HTML namespace to true (e.g. document.body.contentEditable = true;), then make the SVG <text> element selectable (e.g. svgTextElement.style.webkitUserSelect = 'text';).

When the user finishes editing the text (e.g. by clicking on canvas) set the contentEditable attribute on the ancestor back to false.

I haven't tried this, hope someone reports back if this works. We shouldn't have to wait for CSS 2.0 to get this very obviously needed functionality.

user_57703770
Related