I am using contenteditable="true" to edit text in SVG. In all browsers except Safari it works.
Safari has an issue with caret position:
Sample code:
[contenteditable]{
-webkit-user-select:text;
user-select:text;
}<div contenteditable="true" style="background: #ffe7e7">
<svg style="display:inline-block">
<text id="text" y="2em">Hello world</text>
</svg>
</div>I have had a similar issue in the past. Unfortunately, the answer was to admit that safari sometimes has particular issues and I had to decide between supporting safari for that or rethinking the approach. Since I didn't want to drop saffari, I totally rethought the need for that layout, but YMMV. You can find the issue tracker for safari issues related to contenteditable here.
We have solved the issue by implementing our own caret. System caret is hidden by style rule.
If your Safari browser is up to date (contenteditable is fully supported from 3.1.), most likely your problem is that webkit and safari are very buggy with contenteditable. Here are Safari's bugs.