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

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.