Geek Answers Handbook

How to prevent objects inside an SVG drawing from being trimmed at the borders of an SVG element in chrome?

I use SVG to draw an interactive chart, which can change a lot when interacting with the user. More precisely, it can expand in any direction (including negative coordinates), as the user adds objects.

I would like to think of my SVG object as an infinite plan that can contain objects that will be drawn no matter where they are. And I use the position and transformation of this object to allow the user to scale and move the part that is currently visible on the screen. enter image description here The problem is that with a naive implementation, I get the following: enter image description here

I did a minimal jsFiddle to reproduce the problem 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 can: dynamically change the viewBox SVG and apply the offset to the svg element, but this would be rather painful refactoring, because it is old code ported from VML and there is a lot of interaction that converts the coordinates of systems. Therefore, I would like to get a solution that is not related to changing coordinate systems.

Change I forgot to mention this for the first time, but "overflow: visible" does not give the expected result: the children are still circumcised.

Q: Is there a way to make the browser draw outside the SVG element?

Note: a chrome solution just for me would be fine, even if I prefer to use a standard solution.

+4
source share
1 answer

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

+7
source

More articles:


All Articles