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

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

i'm using svg draw interactive diagram can alter lot user interaction. more precisely, can expand in direction (including negative coordinates) user adds entities.

i think svg object infinite plan can contain objects, drawn no matter are. , utilize position , transform of object allow user zoom , move part that's visible on screen. problem naïve implementation this:

i made minimal jsfiddle reproduce issue, 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 css code

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

i know could: dynamically alter viewbox of svg, , apply offset svg element, quite painful refactoring because it's old code ported vml , there lot of interaction makes coordinates systems conversions. solution doesn't involve changing coordinates systems.

edit: forgot mention in first time, "overflow: visible" doesn't produce expected result: children still clipped.

q: there way browser draw outside bounds of svg element ?

note: chrome solution ok me, if prefer using standard solution.

the usual way add together overflow="visible" svg element

javascript html google-chrome svg