contenteditable

HTML5 has introduced contenteditable attribute. This attribute specifies whether the content of an element is editable or not. How to make svg text editable? To put html elements in an svg element, we need to use <foreignObject>. Within that object we can add any html element, for example div that has attribute contenteditable. The problem is that we want svg text to be editable, and not div. Solution is to add svg elements inside contenteditable div. When the contenteditable attribute is not set on an element, the element will inherit it from its parent. svg will be converted into html in render-time and inherit the contenteditable attribute from parent div. The last trick to make this work is to set the same width and height to foreignObject and to svg object that need to be editable. Except these steps, it is also necessary to check if the solution is working fine in all targeted browsers , because browser’s support for contenteditable is different in different browsers which can cause strange behaviour of svg.