svg - hide element when it exit group area, similar to css overflow hidden

Question

I need to make a box on a canvas (a ), outside witch elements contained in it are invisible.

Similar to overflow: hidden; in css.

Note: There are draggable elements inside. I need to be able to drag them but if they exit a box (something like a camera focus) I need them to not be shown (or parts of them if part is inside, part is outside), as I said exactly like overflow: hidden.

Note 2: I can't use other elements to cover the area around the box (please don't make me explain why unless is absolutely necessary (I don't know how to say it short so I'll add pictures and lots of words) :) ).

Mccollough

Have your draggable elements be children of an <svg> element and set overflow: hidden on it, or am I missing something? – Copp

I have one svg with multiple groups, I need to do something similar to what you said but use the <g> as element not the <svg>. There are many, many, many elements there and can't break it into 2 svgs... unless... can you use <svg> inside <svg>? – Mccollough

Yes, svg inside svg is possible. – Akeylah

Answer 1

Have your draggable elements be children of an <svg> element and set overflow: hidden on it. An <svg> element can be a child as well as the root element. A <g> element won't do as it has no explicit width/height and will expand to the size of the contained children.

Copp