SVG shapes positioning with <USE> tag

[yesworld]

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

[ZachSaucier]

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.

[PointC]

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.

[yesworld]

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.

[yesworld]

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?

[ZachSaucier]

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

[yesworld]

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

[yesworld]

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!

[yesworld]

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!🥳