title: SVG symbol called via use attribute not rendering in Firefox
body: <p>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.</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>(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.)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper" style="height: 978px;"&gt;
         &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu"&gt;
          &lt;g id="symbolsContainer"&gt;
           &lt;symbol class="icon" id="icon-procurement-desktop" viewBox="0 0 39 39"&gt;
            &lt;g&gt;
             &lt;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"&gt;&lt;/path&gt;
             &lt;path stroke="#1a1302" stroke-width="1.5" class="st2" d="M101.1,107.6"&gt;&lt;/path&gt;
             
             &lt;rect stroke="#1a1302" stroke-width="1.5" x="31.9" y="51.1" width="0.8" height="50.7"&gt;&lt;/rect&gt;
             
             &lt;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"&gt;&lt;/path&gt;
             &lt;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"&gt;&lt;/path&gt;
             &lt;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"&gt;&lt;/path&gt;
      
             &lt;rect stroke="#1a1302" stroke-width="1.5" x="32.2" y="113.4" width="108" height="0.8"&gt;&lt;/rect&gt;
             &lt;rect stroke="#1a1302" stroke-width="1.5" x="42.8" y="119.1" width="97.4" height="0.8"&gt;&lt;/rect&gt; 
            &lt;/g&gt;
           &lt;/symbol&gt;
      
          &lt;/g&gt;
          
          &lt;g id="itemsContainer"&gt; 
           &lt;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"&gt;
            &lt;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"&gt;&lt;/path&gt;
            &lt;use xlink:href="#icon-procurement-desktop" width="21" height="21" x="370.12713623046875" y="92.61793518066406" transform="rotate(-90 413.62713623046875 131.11793518066406)"&gt;&lt;/use&gt;
           &lt;/a&gt;  
          &lt;/g&gt;
                  
         &lt;/svg&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper" style="height: 978px;"&gt;
   &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu"&gt;
    &lt;g id="symbolsContainer"&gt;
     &lt;symbol class="icon" id="icon-procurement-desktop" viewBox="0 0 19 15.81"&gt;
                  &lt;g&gt;
                      &lt;g&gt;
                          &lt;rect stroke="#1a1302" stroke-width="1.5" x="1.2" y="1.4" width="3" height="0.1"/&gt;
                          &lt;rect stroke="#1a1302" stroke-width="1.5" x="1.2" y="2.4" width="4.6" height="0.1"/&gt;
                          &lt;path stroke="#1a1302" stroke-width="1.5" stroke-miterlimit="10" d="M8.5,5"/&gt;
                      &lt;/g&gt;
                      &lt;g&gt;
                          &lt;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"/&gt;
                          &lt;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"/&gt;
                      &lt;/g&gt;
                  &lt;/g&gt;
     &lt;/symbol&gt;
  
    &lt;/g&gt;
    
    &lt;g id="itemsContainer"&gt; 
     &lt;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"&gt;
      &lt;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"&gt;&lt;/path&gt;
      &lt;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)" /&gt;
     &lt;/a&gt;  
    &lt;/g&gt;
   &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>