Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
jakob zabala

set Z-index on morphSVG / drawSVG

Recommended Posts

I am try bring an SVG element to the front of the dom within the timeline.


At the moment all the elements animate in the order of the html.


Is there a way to bring elements to to the front?


If you uncomment the the .fromTo tween in the middle of the timeline it will become clearer what my issue is. The white drawSVG path doesn't come to the front after setting the ZIndex.



See the Pen OJWpmrv?editors=1010 by jaykobz (@jaykobz) on CodePen

Link to comment
Share on other sites

Sorry to say z-index isn't going to work on SVG child elements. You'll need to set the order when you create it with the last child being on top of the stack. You could use two separate SVGs and use z-index as needed. 


Make sense?


Happy tweening.



  • Like 1
Link to comment
Share on other sites

aaa yes! i just didn't want to add multiple similar svgs if I will be re-using elements, but not the worst, thanks for the info 

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.