Rect не визуализируется после добавления

Question

Context

Я использую реагирует js и svg.draw.js для рисования svg элементов внутри div, пользователь может рисовать прямоугольник или другие фигуры, и он может видеть фигуры, нарисованные в предыдущем сеансе.

Для создания последней функциональности я сохранил всю svg элемент рисуется как строка, поэтому при запуске метода ComponentDidMount () он может проанализировать его для элемента image / svg + xml и затем добавить узел svg в корень svg .Поэтому, чтобы попробовать это решение в ComponentDidMount () У меня есть rect узел для добавления.

Issue

Когда я пытаюсь добавить rect элемент, он не визуализируется, но присутствует внутри корневого элемента.

Это то, что я вижу в консоли, элемент rect это то, что я должен добавить .

Код

Это то, что присутствует в методе ComponentDidMount () .

    componentDidMount(){

        /*
         *
         *irrilevant code*/

        const scriptDraw = document.createElement("script");

        scriptDraw.src = "svgDrawer.js";        //svg.draw.js 
        scriptDraw.setAttribute("id","drawer")
        scriptDraw.async = true;
        document.body.appendChild(scriptDraw);

        var str = '<rect id="SvgjsRect1008" class="selected" width="124" height="89" stroke="#3399ff" stroke-width="2" fill-opacity="1" fill="#3399ff" x="236" y="160" name="dawdawad"></rect>'
        var parser = new DOMParser();
        var doc = parser.parseFromString(str, "image/svg+xml");

        scriptDraw.addEventListener("load",function(){
            var map = document.getElementById("planimetriaSVG"); //svg root
            map.appendChild(doc.documentElement);
        })  
    }

Answer 1

Добавьте атрибут пространства имен к элементу rect, чтобы parseFromString знал, что он должен быть элементом SVG, т.е.

    var str = '<rect xmlns="http://www.w3.org/2000/svg" id="SvgjsRect1008" class="selected" width="124" height="89" stroke="#3399ff" stroke-width="2" fill-opacity="1" fill="#3399ff" x="236" y="160" name="dawdawad"></rect>'
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, "image/svg+xml");