Question

上下文

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

为了实现最后一个功能，我将绘制的整个 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元素，即

override fun searchResult(search : String): List<Result> {

    val criteria = TextCriteria.forDefaultLanguage()
            .matchingAny(search)

    val query = TextQuery.queryText(criteria)
            .sortByScore()
            .with(PageRequest(0, 5))

    var r : List<Result> =  searchRepository.findAll(query, Result.class)
}

追加后未显示Rect

上下文

问题

代码

1 个答案: