SVG Clear组<g> </g>

Question

假设我有一个像这样的svg元素

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

我将如何清除该组中的所有内容，同时还保留组元素本身？

Answer 1

只需使用DOM方法而无需任何框架，您可以选择：

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

Answer 2

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