SVG清除組<g>

假設我有像這樣SVG清除組<g>

<svg id="svgCanvas" class="pan" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none"> 
    <g id="viewport"> 

     //Filled with an arbitrary amount of lines and cirles - examples below. 

    <line x1="632" y1="357.5" x2="682" y2="270.89745962155615" class="line" style="stroke: rgb(128, 128, 128); stroke-width: 1.3px;"></line> 

    <circle cx="82.08376766398476" cy="367.0988235405059" r="16.5" stroke="blue" fill="white" class="circle"></circle> 

    </g> 
</svg>

如何將我去有關從該組清除一切SVG元素，同時也保持組元素本身？

來源

2015-04-01 Ben Connor Hansell

只需使用DOM方法，而不需要任何框架，你可以去：

var el = document.getElementById("viewport"); 
while (el.firstChild) { 
    el.removeChild(el.firstChild); 
}

來源

2015-04-01 18:44:17 altocumulus

哦輝煌這部作品一種享受 - 排序的一側節點上，說我有這一個按鈕被點擊在畫布上繪製所有內容。按鈕被點擊，一切都被繪製，按鈕被重新點擊，然後一切都被清除並再次繪製。我知道這是脫離主題，我可以提出一個新問題。 – 2015-04-01 18:49:05

是的，請發佈一個提供一些代碼示例的新問題。 – altocumulus 2015-04-01 18:51:13

document.addEventListener('load', function(){ 
    document.getElementById("viewport").innerHTML = ""; 
});

來源

2015-04-01 18:45:46

這也適用，很好。我可以認爲這比'while循環'更快/更少的處理能力？ – 2015-04-01 18:51:37

我從未做過速度測試。這只是我知道的最短的方法。 – 2015-04-01 18:57:26

我剛剛對性能問題感到好奇，並用令人驚訝的[結果]（http://jsperf.com/svg-child-remove）進行了一次小測試：Chrome 41和FF27使用'element .removeChild（）'而不是'innerHTML =「」'。但是，IE11通過'innerHTML =「」'移除時速度要快2倍。也許你們中的一些人也可以運行測試來改善結果。 – altocumulus 2015-04-01 20:18:30

回答

相關問題