How to prevent objects inside an SVG drawing to be clipped at the bounds of the SVG element in chrome?

Question

I'm using SVG to draw an interactive diagram which can change a lot with user interaction. More precisely, is can expand in any direction (including negative coordinates) as the user adds entities.

I would like to think about my SVG object like an infinite plan that can contain objects, that would be drawn no matter where they are. And I use the position and the transform of this object to allow the user to zoom and move the part that's currently visible on the screen. The problem is that with a naïve implementation I get this:

I made a minimal jsFiddle to reproduce the issue, with this SVG code

<svg>
    <rect x="-10" y="35" width="40" height="40"
    style="stroke: black; fill: none;"/>
    <!-- roof -->
    <polyline points="-10 35, 10 7.68, 30 35" 
    style="stroke:black; fill: none;"/>
    <!-- door -->
    <polyline points="10 75, 10 55, 20 55, 20 75"
    style="stroke:black; fill: none;"/>
</svg>

and this css code

svg {
    border: 1px solid blue;
    position: absolute; top: 30px; left: 30px;
}

I know that I could: dynamically change the viewBox of the SVG, and apply an offset to the svg element, but that would be quite a painful refactoring because it's an old code ported from VML and there is a lot of interaction that makes coordinates systems conversions. So I would like a solution that doesn't involve changing the coordinates systems.

Edit: I forgot to mention it in the first time, but "overflow: visible" doesn't produce the expected result: children are still clipped.

Q: Is there a way to get the browser to draw outside the bounds of the SVG element ?

Note: a chrome only solution would be OK for me, even if I prefer using a standard solution.

Answer 1

The usual way would be to add overflow="visible" to the svg element