SVG下appendChild(node)在浏览器中不显示的问题

最新推荐文章于 2022-03-31 17:19:36 发布

const伐伐

最新推荐文章于 2022-03-31 17:19:36 发布

阅读量3.8k

点赞数 1

分类专栏： SVG

本文链接：https://blog.csdn.net/u013905744/article/details/50560364

版权

SVG 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

stackoverflow上有两个问题

问题1：

SVG fragments are mistakenly parsed as HTMLUnknownElement

点击打开链接

我便遇到了问题1描述的情况

这是HTML文件

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <svg id="s" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg" οnlοad="init(evt)">
        <rect x="200" y="200" width="100" height="50" style="stroke-width:1; stroke:black;fill:black" οnclick="node2string(evt)" />
        <rect x="100" y="100" width="100" height="50" style="stroke-width:1; stroke:red;fill:red" οnclick="string2node()" />
        <script type="application/javascript" xlink:href="12-16.js"></script>
    </svg>
</body>
</html>

这是js文件

function init(evt) {
    svgdoc = evt.target.ownerDocument;
}

function node2string(evt) {
    node = evt.target;
    string = printNode(node);
    alert(string);
}

function string2node() {
    string = "<circle cx='20' cy='20' r='10' fill='#FFFFFF' stroke='#000000' />";
    var parser = new DOMParser();
    var doc = parser.parseFromString(string, "image/svg+xml");    
    svgdoc.getElementById('s').appendChild(doc.children[0]);
    alert(1);
}

直接appendChild(node)在浏览器上并不显示，尽管chrome bug element上有相应的html element

纠结了一天，在stackoverflow上找到另一个问题

Add SVG element to existing SVG using DOM

点击打开链接

function string2node() {
    //string = "<circle cx='20' cy='20' r='10' fill='#FFFFFF' stroke='#000000' />";
    //var parser = new DOMParser();
    //var doc = parser.parseFromString(string, "image/svg+xml");    
    //var oo = svgdoc.getElementById('s').appendChild("circle");
    //alert(1);

    var svg = document.getElementsByTagName('svg')[0]; //Get svg element
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a path in SVG's namespace
    newElement.setAttribute("cx", "20"); //Set path's data
    newElement.setAttribute("cy", "20");
    newElement.setAttribute("r", "10");
    newElement.setAttribute("fill", "#FFFFFF");
    newElement.style.stroke = "#000000"; //Set stroke colour
    newElement.style.strokeWidth = "5px"; //Set stroke width
    svg.appendChild(newElement);
}

这样问题搞定

const伐伐

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SVG下appendChild(node)在浏览器中不显示的问题

直接appendChild(node)在浏览器上并不显示SVG fragments are mistakenly parsed as HTMLUnknownElementAdd SVG element to existing SVG using DOM
复制链接

扫一扫

专栏目录