Как вставить комментарий перед корневым элементом <svg>?

Question

Как добавить узел комментария перед корневым элементом <svg>, но после пролога xml?

Или будет менее затратным ресурс вставить комментарий с регулярным выражением в сериализованный DOM?

Answer 1

Корневой элемент (т.е. исключая прологи xml и 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) пропускают пролог изСериализованный вывод (в любом случае это необязательно).Однако узел комментария все еще присутствует после 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>