Share Posted September 18, 2018 Hi there, I got a weird issue. Somehow, my SVG path is appearing outside the SVG scope. Could be my messy javascript (if anyone has tips on how to do it cleaner, please). The SVG in the yellow box should be right in the center. Anyone know how to fix this? Thanks! See the Pen OoaNmz by wiljeonline (@wiljeonline) on CodePen Link to comment Share on other sites More sharing options...
Share Posted September 18, 2018 HI @WiljeOnline Welcome to the forum. Your SVG is centered in that block, but your path is drawn far outside the bounds. I added a simple rectangle to the second SVG to show that it is indeed centered as it should be. To solve the path problem I just added this line: TweenMax.set("#path3", {x:-348, y:-215}); Here's a fork of your pen. See the Pen VGVExP by PointC (@PointC) on CodePen Hopefully that helps. Happy tweening and welcome aboard. 4 Link to comment Share on other sites More sharing options...
Share Posted September 18, 2018 PS Since you're a Club member, I'd also recommend using DrawSVG for this effect rather than calculating the path length and animating the dashoffset manually like that. It'll make your life a whole lot easier. Happy tweening. 3 Link to comment Share on other sites More sharing options...
Author Share Posted September 19, 2018 7 hours ago, PointC said: PS Since you're a Club member, I'd also recommend using DrawSVG for this effect rather than calculating the path length and animating the dashoffset manually like that. It'll make your life a whole lot easier. Happy tweening. You're actually right. I still have to dive into DrawSVG, so I might do that right now. Thanks a lot! 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now