루트 <svg> 요소 앞에 주석을 삽입하는 방법은 무엇입니까?

Question

루트 <svg> 요소 앞에 xml 프롤로그 뒤에 주석 노드를 추가하는 방법은 무엇입니까?

또는 직렬화 된 DOM에 regexp와 함께 주석을 삽입하는 것이 리소스 비용이 적게 듭니까?

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) 출력 확인하려면 : 일부 브라우저 (내가 믿는 웹킷)이 직렬화 된 출력에서 ​​프롤로그를 ommit 것

<?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> 

주 (어쨌든 선택 사항입니다). 그러나 주석 노드는 여전히 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>