SSB Posted January 11, 2020 Share Posted January 11, 2020 Hi All, Im trying to draw an svg Path from the centre point, which uses Draggable method. On Drag im trying to generate a straight Line from a centre Dot. The centre Dot is fixed and only straight line should be generated on x axis. I see its working chrome and safari, but i see the Center Dot also moving while dragging Fire Fox Browser. I have attached code pen link with demo. Could you please check and help us what is missing 1) Generate Straight Line along xais on dragging from center DOt 2) Center Dot should be sticked and should not moved Kind Regards. Sumanth See the Pen qBEYVPV by SumanthMadey (@SumanthMadey) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 11, 2020 Share Posted January 11, 2020 Hey BSumanth and welcome. Unfortunately I don't have time to debug exactly why this behavior is happening in Firefox right now. But I did want to mention that with this sort of behavior it's often good to use a proxy/trigger element. You can set it by using the trigger property inside of the draggable call. For more info check out the docs: https://greensock.com/docs/v3/Plugins/Draggable One approach would be to use the circle as a trigger and set the line length similarly to how you're doing it currently. Link to comment Share on other sites More sharing options...
GreenSock Posted January 11, 2020 Share Posted January 11, 2020 It looks like you're trying to use nested <svg> elements with transforms, and some browsers refuse to render those correctly (totally unrelated to GSAP). Same issue in this post: I'd recommend avoiding nested <svg> elements with transforms. 1 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