yesworld Posted August 6, 2020 Share Posted August 6, 2020 Hi everyone! Sorry, if the answer is already there, but I couldn't find it. I have 2 SVG tags. 1) Source SVG sprite with 2 <rect> shapes. 2) And the second SVG is pulling elements from the first SVG with <use> tag. The task is to move both shapes from the source SVG to the same point (x, y) using your library. Now they are moving together and to different points. Thanks for your attention, and any help would be greatly appreciated. Thank you! See the Pen LYNEZBE by yesworld (@yesworld) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 6, 2020 Share Posted August 6, 2020 Hey yesworld and welcome to the GreenSock forums. Do you really need to use <use> elements? They're not performant and it's substantially easier to do what you're trying to do using regular SVG elements instead. If you need to duplicate things then I recommend just duplicating the SVG itself. If things need to be dynamic you can clone it via JS. Let me know. 1 Link to comment Share on other sites More sharing options...
PointC Posted August 6, 2020 Share Posted August 6, 2020 Yep - <use> is a pain. Clone it: See the Pen 24b436be30b10bd6fc5b840c913b9db6 by PointC (@PointC) on CodePen Or create it: See the Pen ZEGNyQy by PointC (@PointC) on CodePen Much easier IMHO. Happy tweening. 3 Link to comment Share on other sites More sharing options...
yesworld Posted August 6, 2020 Author Share Posted August 6, 2020 I need to dynamically include svg files. From there I will extract the sprites. Which will then be used for drag and drop plugins. But, If I use svg copies, then when hovering over the shapes, the interaction area will be the square of the svg element, and not the silhouette of the shape. Link to comment Share on other sites More sharing options...
yesworld Posted August 6, 2020 Author Share Posted August 6, 2020 10 minutes ago, PointC said: Or create it: Maybe I’m better off getting the <g> <path> ... </g> part of the tags and building the main SVG? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 6, 2020 Share Posted August 6, 2020 34 minutes ago, yesworld said: If I use svg copies, then when hovering over the shapes, the interaction area will be the square of the svg element, and not the silhouette of the shape. No, I think you're mistaken there. If you copy an inline SVG you can still refer to the inner parts of the clone. That sounds like the way to go here (if you can't just use the original inline SVG). Link to comment Share on other sites More sharing options...
yesworld Posted August 7, 2020 Author Share Posted August 7, 2020 10 hours ago, ZachSaucier said: No, I think you're mistaken there. If you copy an inline SVG you can still refer to the inner parts of the clone. That sounds like the way to go here (if you can't just use the original inline SVG). Yes, you are right. BUT, I'm dynamically include the SVG file with sprite (example #sprite-draggable) that need to be draggable. And I have to drop this sprite into another SVG (#workspace) tag. The dropzone will not work on the second SVG tag. See the Pen gOrbGyO?editors=1010 by yesworld (@yesworld) on CodePen Link to comment Share on other sites More sharing options...
yesworld Posted August 7, 2020 Author Share Posted August 7, 2020 11 hours ago, ZachSaucier said: No, I think you're mistaken there. If you copy an inline SVG you can still refer to the inner parts of the clone. That sounds like the way to go here (if you can't just use the original inline SVG). Sorry, right now I just realized what you exactly meant, I'll try to do so. Thank! Link to comment Share on other sites More sharing options...
yesworld Posted August 7, 2020 Author Share Posted August 7, 2020 Guys thanks for the help! This is the best forum I've seen! I think that the topic can be closed. Have a nice day!🥳 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