追加后矩形不可视化

Question

语境

我正在使用react js和svg.draw.js在div内绘制svg元素，用户可以绘制矩形或其他形状，他可以看到在先前会话中绘制的形状。

为了实现最后一个功能，我将绘制的整个svg元素存储为字符串，因此当ComponentDidMount()方法被触发时，它可以将其解析为image/svg+xml元素，然后它可以将svg节点附加到svg根。 所以为了在ComponentDidMount() 中尝试这个解决方案，我创建了一个rect节点来追加。

问题

当我尝试附加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");