SVG symbol called via use attribute not rendering in Firefox - html

Question

I'm in the process of creating a circular menu using SVG. There's going to be five parts in total, with each piece being built using an SVG path element. I also have an icon generated via a use attribute. It calls a symbol attribute that defines the SVG icon.
The issue I'm running into is that Firefox (v45.0.1, latest version as today for me) for some reason isn't rendering the icon at all. I noticed that if I inspect the SVG element, the symbol section is grayed out in Firefox (whereas in Chrome, it's not).
On the second example I've posted, I noticed that when inspecting the use element, it's not rotated like it should be, almost as if Firefox is ignoring the rotation attribute entirely.
The first example is built off the original code where I first noticed the issue. The second one mentioned earlier is a variation where I modified the SVG code to be a specific size, as the original dimensions I was handed over by a designer wasn't in the 0,0 coordinates --- not sure if this is an issue since it didn't cause an issue in any other browsers besides Firefox.
Any ideas what the cause may be? I have the examples collapsed since the code is a bit long with both of them visible at once (let me know if you guys would prefer one to be made visible and I can update it).
(Note that due to how it's setup, you'll need to scroll some to the left and the right to see the segment I have visible, depending on your screen settings.)
.wrapper {
padding: 80px;
position: relative;
text-align: center;
width: 100%;
}
.wrapper svg {
display: inline-block;
height: 100%;
touch-action: none;
transform: matrix3d(0.59051, -0.80703, 0, 0, 0.80703, 0.59051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-origin: 50% 50% 0;
-webkit-transform: matrix3d(0.59051, -0.80703, 0, 0, 0.80703, 0.59051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-origin: 50% 50% 0;
-webkit-user-select: none;
}
.wrapper svg symbol {
overflow: visible;
}
.wrapper svg a {
cursor: pointer;
outline: none;
}
.wrapper svg #item-procurement .sector {
fill: #f8ba10;
stroke: #f8ba10;
}
<div class="wrapper" style="height: 978px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu">
<g id="symbolsContainer">
<symbol class="icon" id="icon-procurement-desktop" viewBox="0 0 39 39">
<g>
<path stroke="#1a1302" stroke-width="1.5" d="M25.9,44.8v63.1h111h3.1V44.8H25.9z M139.3,107.2h-2.4H26.6V45.6h112.7V107.2z"></path>
<path stroke="#1a1302" stroke-width="1.5" class="st2" d="M101.1,107.6"></path>
<rect stroke="#1a1302" stroke-width="1.5" x="31.9" y="51.1" width="0.8" height="50.7"></rect>
<path stroke="#1a1302" stroke-width="1.5" d="M115.7,49.6H50.2v0.8h27.9c-6.5,2-11.1,8.1-11.1,15.2v21.2c0,7.1,4.7,13.2,11.1,15.2H50.2v0.8h65.4V102H87.8c6.5-2,11.1-8.1,11.1-15.2V65.5c0-7.1-4.7-13.2-11.1-15.2h27.9C115.7,50.3,115.7,49.6,115.7,49.6z M98.2,65.5v21.2c0,8.4-6.8,15.2-15.2,15.2s-15.2-6.8-15.2-15.2V65.5c0-8.4,6.8-15.2,15.2-15.2C91.3,50.3,98.2,57.1,98.2,65.5z"></path>
<path stroke="#1a1302" stroke-width="1.5" d="M36.3,59.4L36.3,59.4v-0.8c0,0,3.4,0,5.8-2.4c1.7-1.6,2.5-4.1,2.5-7.2h0.8c0,3.3-0.9,5.9-2.8,7.7C40.1,59.3,36.8,59.4,36.3,59.4z"></path>
<path stroke="#1a1302" stroke-width="1.5" d="M45.4,103.8h-0.8c0-3.1-0.9-5.5-2.5-7.2c-2.4-2.4-5.8-2.4-5.8-2.4v-0.8c0.1,0,3.7,0,6.4,2.6C44.5,97.9,45.4,100.5,45.4,103.8z"></path>
<rect stroke="#1a1302" stroke-width="1.5" x="32.2" y="113.4" width="108" height="0.8"></rect>
<rect stroke="#1a1302" stroke-width="1.5" x="42.8" y="119.1" width="97.4" height="0.8"></rect>
</g>
</symbol>
</g>
<g id="itemsContainer">
<a class="item" id="item-procurement" role="link" tabindex="0" transform="matrix(-0.80901,0.58778,-0.58778,-0.80901,599.2005616668552,305.30793552061857)" data-svg-origin="250 250">
<path d="M415,250 l85,0 A250,250 0 0,0 327.25424859373686,12.235870926211618 l-26.26644452187054,80.83980388508806 A165,165 0 0,1 415,250" class="sector"></path>
<use xlink:href="#icon-procurement-desktop" width="21" height="21" x="370.12713623046875" y="92.61793518066406" transform="rotate(-90 413.62713623046875 131.11793518066406)"></use>
</a>
</g>
</svg>
</div>
.wrapper {
padding: 80px;
position: relative;
text-align: center;
width: 100%;
}
.wrapper svg {
display: inline-block;
height: 100%;
touch-action: none;
transform: matrix3d(0.59051, -0.80703, 0, 0, 0.80703, 0.59051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-origin: 50% 50% 0;
-webkit-transform: matrix3d(0.59051, -0.80703, 0, 0, 0.80703, 0.59051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-origin: 50% 50% 0;
-webkit-user-select: none;
}
.wrapper svg symbol {
overflow: visible;
}
.wrapper svg a {
cursor: pointer;
outline: none;
}
.wrapper svg #item-procurement .sector {
fill: #f8ba10;
stroke: #f8ba10;
}
<div class="wrapper" style="height: 978px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu">
<g id="symbolsContainer">
<symbol class="icon" id="icon-procurement-desktop" viewBox="0 0 19 15.81">
<g>
<g>
<rect stroke="#1a1302" stroke-width="1.5" x="1.2" y="1.4" width="3" height="0.1"/>
<rect stroke="#1a1302" stroke-width="1.5" x="1.2" y="2.4" width="4.6" height="0.1"/>
<path stroke="#1a1302" stroke-width="1.5" stroke-miterlimit="10" d="M8.5,5"/>
</g>
<g>
<path stroke="#1a1302" stroke-width="1.5" d="M17,6.4V0H0v13.5h12.5L11,15.8h8V3.3L17,6.4z M0.1,13.4V0.1h16.8v6.4l-1.1,1.6V2.4H8.4v3.1H1.3v6h7.3v-0.9h5.8l-1.8,2.8
H0.1z M8.4,7.3v4.1h-7V5.6H6v3.2H2.9V9h3.2V5.6h2.4V2.5h3.8v6h2.8V8.3h-2.7V2.5h1.8v3h0.1v-3h1.4v3h-0.6v0.1h0.6v2.8h0l-1.3,2.1
H8.6V7.3H8.4z M18.9,5.7h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4
h-0.6v0.1h0.6v0.8h-7.7l7.7-11.9V5.7z"/>
<path stroke="#1a1302" stroke-width="1.5" d="M17,10.2v3.7h-2.4L17,10.2L17,10.2z M17.1,9.8L14.4,14h2.7V9.8L17.1,9.8z"/>
</g>
</g>
</symbol>
</g>
<g id="itemsContainer">
<a class="item" id="item-procurement" role="link" tabindex="0" transform="matrix(-0.80901,0.58778,-0.58778,-0.80901,599.2005616668552,305.30793552061857)" data-svg-origin="250 250">
<path d="M415,250 l85,0 A250,250 0 0,0 327.25424859373686,12.235870926211618 l-26.26644452187054,80.83980388508806 A165,165 0 0,1 415,250" class="sector"></path>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-procurement-desktop" width="19" height="15.81" x="413.12713623046875" y="131.61793518066406" transform="rotate(-90 413.62713623046875 131.11793518066406)" />
</a>
</g>
</svg>
</div>