How do you remove an SVG element when you're done animating it?

[Maelfyn 41 Likes (Newbie)]

So I'm doing some experimentation to see if I can find a use for SVG in my web game. I can tween SVG elements without a problem, but I cannot figure out how to remove them when I'm done. The typical this.target.parentNode.removeChild(this.target) isn't working for Raphael objects... so how do you do it?

See the Pen OPJQMb by MAW (@MAW) on CodePen

[Diaco 1,999 Likes (Superhero)]

Hi Maelfyn 

 

i`m not a Raphael guy but for remove svg ; if you'r using jquery try $("element").empty(); or $("element").remove(); 

 

and for native solution try this :

var rectangle = document.getElementById('rect');
var parent    = rectangle.parentNode;
parent.removeChild(rectangle);

See the Pen OPJQMb by MAW (@MAW) on CodePen

[Maelfyn 41 Likes (Newbie)]

Oh, you know what? I was being special. I was using Raphael and the greensock plugin which I should have mentioned. I don't know what I don't know when it comes to this. In any case, I did some codepen'ing and made a fun demo for you guys. Maybe this will help someone out there. The answer is: use paper.clear() to clear the canvas.

 

See the Pen gbOvbr by maelfyn (@maelfyn) on CodePen

[Diaco 1,999 Likes (Superhero)]

Hi again

 

nice job , but seems that cause to generate empty SVG DOM elements , check the DOM and you'll see . sorry i`m not Raphael guy and can't help you in this case .

[jamiejefferson 1,200 Likes (Superhero)]

Yes I would recommend paper.remove() instead of clear() if you aren't going to be reusing the same paper, since it's leaving hundreds of SVG root nodes in the DOM.

 

Here's a slight modification that sticks to just one Raphael paper

 

See the Pen LEYdae by jamiejefferson (@jamiejefferson) on CodePen

 

Have you considered raphael's successor, snap.svg yet? Also GSAP is quite handy at tweening a lot of SVG properties without a plugin now http://css-tricks.com/svg-animation-on-css-transforms/

[Maelfyn 41 Likes (Newbie)]

Awesome! Yes, I knew there were about a thousand optimizations to be had. This is my first attempt at using this so I wasn't quite sure how everything worked. Thanks for the pointers!