SVG & DOMParser All In One

SVG & DOMParser All In One

js parse html to dom

https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser

https://davidwalsh.name/convert-html-stings-dom-nodes

https://alligator.io/js/domparser/

https://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements

Convert String to DOM Nodes

DOMParser().parseFromString

let doc = new DOMParser().parseFromString('<div><b>Hello!</b></div>', 'text/html');
let div = doc.body.firstChild;

let divs = doc.body.querySelectorAll('div');

document.createRange().createContextualFragment

let frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
console.log(frag);

/*
  #document-fragment
    <div>One</div>
    <div>Two</div>
*/

let firstChild = frag.firstChild;

let firstDiv = frag.querySelector('div');
let allDivs = frag.querySelectorAll('div');

// fragement

// Use a DocumentFragment to store and then mass inject a list of DOM nodes
var frag = document.createDocumentFragment();
for(var x = 0; x < 10; x++) {
	var li = document.createElement("li");
	li.innerHTML = "List item " + x;
	frag.appendChild(li);
}

namespace bug

<?xml version="1.0" encoding="UTF-8"?>

let str = `
<?xml version="1.0" encoding="UTF-8"?>
<svg width="847px" height="400px" viewBox="0 0 847 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
    <title>Slice 1</title>
    <desc>Created with Sketch.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle" stroke="#979797" fill="#FBD5D5" x="103.5" y="0.5" width="632" height="147"></rect>
        <text id="舞台" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
            <tspan x="402" y="81">舞台</tspan>
        </text>
        <rect id="Rectangle" stroke="#979797" fill="#5461F2" x="0.5" y="188.5" width="102" height="211"></rect>
        <text id="A区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
            <tspan x="36" y="301">A区</tspan>
        </text>
        <rect id="Rectangle" stroke="#979797" fill="#84FFEF" x="170.5" y="192.5" width="498" height="152"></rect>
        <text id="B区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
            <tspan x="405" y="275">B区</tspan>
        </text>
        <rect id="Rectangle" stroke="#979797" fill="#A25AF1" x="738.5" y="183.5" width="108" height="216"></rect>
        <text id="C区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
            <tspan x="787" y="294">C区</tspan>
        </text>
    </g>
</svg>

`;

let svgDom = new DOMParser().parseFromString(str, `image/svg+xml`);

OK

let str = `
<svg width="847px" height="400px" viewBox="0 0 847 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
    <title>Slice 1</title>
    <desc>Created with Sketch.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle" stroke="#979797" fill="#FBD5D5" x="103.5" y="0.5" width="632" height="147"></rect>
        <text id="舞台" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
            <tspan x="402" y="81">舞台</tspan>
        </text>
        <rect id="Rectangle" stroke="#979797" fill="#5461F2" x="0.5" y="188.5" width="102" height="211"></rect>
        <text id="A区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
            <tspan x="36" y="301">A区</tspan>
        </text>
        <rect id="Rectangle" stroke="#979797" fill="#84FFEF" x="170.5" y="192.5" width="498" height="152"></rect>
        <text id="B区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
            <tspan x="405" y="275">B区</tspan>
        </text>
        <rect id="Rectangle" stroke="#979797" fill="#A25AF1" x="738.5" y="183.5" width="108" height="216"></rect>
        <text id="C区" font-family="PingFangSC-Medium, PingFang SC" font-size="18" font-weight="400" fill="#000000">
            <tspan x="787" y="294">C区</tspan>
        </text>
    </g>
</svg>

`;

let svgDom = new DOMParser().parseFromString(str, `image/svg+xml`);

demos

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---