CODEWITHSUNDEEP
javascriptsvg
Ben Connor Hansell
Ben Connor Hansell

Reputation: 188

SVG Clear group<g>

Suppose i have an svg element like so

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

how would i go about clearing everything from the that group, whilst also keeping the group element itself?

Upvotes: 0

Views: 1620

Answers (2)

Ruben Kazumov
Ruben Kazumov

Reputation: 3872

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

Upvotes: 0

altocumulus
altocumulus

Reputation: 21578

Just using DOM methods without the need for any framework you could go for:

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

Upvotes: 2

Related Questions