ClipPath on SVG within 'use' link in IE - html

Question

I've got a four slice scaling SVG image which works great in all browsers, except when I try and include it via a use tag. Then it works fine in Chrome, Firefox and Safari but not in <=IE11.
The problem seems to be with the clip-path, is there something I'm missing to get this working in IE or is it just not supported? If not, is there a way I can achieve the same effect in an IE friendly way?
Thanks!
#box,
#use {
width: 200px;
height: 50px;
}
#use {
fill: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display: none;">
<svg id="box" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="topleft" viewBox="0 0 500 500">
<path d="M3.1,22.6c0,0.2,0,0.4,0,477.4H5C5,22.9,5,22.5,5,22.6c0-4.3,0-7.9,0.1-8.8C5.1,11.5,5,8.2,6.2,6.1
c0.4-0.6,40.8-0.8,80.2-0.9c0.5,0,413.6,0,413.6,0V3.4c0,0-413.3,0-413.6,0C47.5,3.4,8.2,3.6,6.7,4C6.5,3,6.6,2,6.5,1
C6.4,0.3,5.7-0.1,5,0c-0.7,0.1-1,0.8-1,1.4C4.2,2.2,4.2,3,4.2,3.7C3.4,3.9,2.7,4.2,1.9,4.4c-1.5,0.3-1,2.7,0.5,2.4
C2.9,6.6,3.5,6.4,4,6.3C3.5,7.8,3.5,9.7,3.4,11C3.3,12,3.1,19.8,3.1,22.6z"/>
</symbol>
<symbol id="topright" viewBox="0 0 500 500">
<use xlink:href="#topleft"/>
</symbol>
<symbol id="bottomleft" viewBox="0 0 500 500">
<path d="M5.3,494.5C5,493.1,5,484.3,5,477.4L5,0H3.1l0,477.4c-0.1,7.2,0,15.3,0.4,17.2c-0.8,0.1-1.7,0.1-2.5,0.3
c-0.6,0.2-1.1,0.7-1,1.4c0.1,0.6,0.8,1.1,1.4,1c0.6-0.2,1.3-0.2,1.9-0.2c0,0.2-0.2,1.5-0.3,1.7C3,499.4,3.7,500,4.3,500
c0.7,0,1.2-0.5,1.3-1.1c0-0.1,0.3-2.3,0.3-2.3c1.8,0.4,4.2,0.3,5.3,0.4c0.9,0.1,37.6,0.2,75.2,0.3c0.3,0,413.6,0,413.6,0v-2.1
c0,0-413.3,0-413.6,0C46.8,495.2,6,495,5.3,494.5z"/>
</symbol>
<symbol id="bottomright" viewBox="0 0 500 500">
<use xlink:href="#bottomleft"/>
</symbol>
<clipPath id="crop">
<rect class="mask" width="100%" height="100%" x="0"/>
</clipPath>
</defs>
<svg width="50%" height="50%">
<use xlink:href="#topleft" width="500" height="500" class="box_border__tl"/>
</svg>
<!-- top right: -->
<g transform="scale(-1, 1)">
<svg width="50%" height="50%" x="-100%" y="0">
<use xlink:href="#topright" width="500" height="500" class="box_border__tr"/>
</svg>
</g>
<!-- bottom left: -->
<g transform="scale(1, -1)">
<svg width="50%" height="50%" x="0" y="-100%" clip-path="url(#crop)">
<use xlink:href="#bottomleft" width="500" height="500" y="-500" transform="scale(1, -1)" class="box_border__bl"/>
</svg>
</g>
<!-- bottom right: clip-path="url(#crop)" -->
<g transform="scale(-1, -1)">
<svg width="50%" height="50%" x="-100%" y="-100%" clip-path="url(#crop)">
<use xlink:href="#bottomright" width="500" height="500" y="-500" transform="scale(1, -1)" class="box_border__br"/>
</svg>
</g>
</svg>
</div>
<svg id="use" class="box" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#box"/>
</svg>

Answer 1

The issue is happening because I'm hiding the main SVG in a container with display: none; The same also happens if I use visibility: hidden; or position: absolute; on the parent container.
It only works if the main SVG is rendered on the page. It also works if you start with the main item visible, then hide it using javascript.
It's a really obscure issue, and odd how the non-clipped elements render even when the SVG is hidden. Oh, also the main SVG must be placed above the use links otherwise Safari doesn't render it.