Question

如何在根<svg>元素之前但在xml prolog之后添加注释节点？

或者在序列化DOM上插入带有正则表达式的注释会降低资源成本吗？

Answer 1

根元素（即不包括xml prolog和DTD）位于documentElement中。您可以使用insertBefore：

var s = '<?xml version="1.0" encoding="ISO-8859-1"?>\n' +
        '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"\n' + 
        '    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
        '<svg width="100%" height="100%" version="1.1" ' +
        '     xmlns="http://www.w3.org/2000/svg">\n' +
        '  <circle cx="100" cy="50" r="40" stroke="black" ' +
        '          stroke-width="2" fill="red"/>\n' +
        '</svg>',
    doc = new DOMParser().parseFromString(s, 'text/xml');

// insert a comment node before the root node
doc.insertBefore(doc.createComment('foo'), doc.documentElement);

要检查new XMLSerializer().serializeToString(doc)输出：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--foo-->
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

请注意，某些浏览器（我相信的WebKit）会从序列化输出中省略prolog（无论如何都是可选的）。但是，在DTD之后，注释节点仍然存在。

哪个更便宜，我不确定。如果您不需要DOM形式的字符串用于除此之外的任何其他内容，则可能不值得通过DOM解析器（特别是仅将其序列化为字符串）。

Answer 2

如下所示？

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- sample comment in SVG file 
     can be multi-line
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="100" cy="110" r="40" style="fill: #FF0"/>
  <circle cx="100" cy="210" r="30" style="fill: none; stroke: #F00; stroke-width: 2px"/>
</svg>

如何在根<svg>元素之前插入注释？</svg>

2 个答案: