How to load HTML <object> SVG even when hidden

Question

I need to wait for a certain object to load while it is hidden. But what appears to be happening, is that it only loads without the display:none;

I'm using jQuery, and I tried putting the .load on the object to call a function when it loads, but seems that it will not load, because it's hidden.

Is there a way of 'forcing' the load of the Object, or, another way to 'hide' but still loading?

How to do it correcly:

use visibility: hidden instead of display: none

as explained here: http://www.w3.org/TR/SVG/painting.html#VisibilityProperty

When the ‘display’ property is set to none, then the given element does not become part of the rendering tree. With ‘visibility’ set to hidden, however, processing occurs as if the element were part of the rendering tree

Answer 1

How to doit correcly:

use visibility: hidden instead of display: none

as explained here: http://www.w3.org/TR/SVG/painting.html#VisibilityProperty

When the ‘display’ property is set to none, then the given element does not become part of the rendering tree. With ‘visibility’ set to hidden, however, processing occurs as if the element were part of the rendering tree

thanks to @SomeKittens

Answer 2

It seems that an SVG will not be rendered if the element is set to display:none. It's possible to load every element individually with JS as shown in this answer.

Answer 3

Load it off screen, style="position:absolute;left:100000px"