javascript - 追加后矩形不可视化

Question

上下文

我正在使用 react js和 svg.draw.js对于在 div 中绘制 svg 元素，用户可以绘制 rect 或其他形状，他可以看到在先例 session 中绘制的形状。

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

问题

当我尝试附加 rect 元素时，它没有显示出来，但它存在于根元素中。

This is what I see in console, the rect element is what I have to append .

代码

这就是 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");