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?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

×