Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Maelfyn

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

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 .

Link to comment
Share on other sites

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/

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×