LinearGradients don't work inside symbol on Firefox

[bensampaio]

LinearGradients don't work inside symbol on Firefox

[bensampaio]

@laitine can you post an example of the current output and what would be the expected output?

[laitine]

In the current output the gradients are wrapped inside the <symbol> which does not work on Firefox.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-tail-ab-01d81" viewBox="0 0 330.36 192.15">
      <linearGradient id="tail-ab-a" x1="158.83" y1="-232.11" x2="177.44" y2="-213.93" gradientTransform="matrix(1 0 0 -1 0 -112)" gradientUnits="userSpaceOnUse">
        <stop offset=".02" stop-color="#ac1f23"/>
        <stop offset="1" stop-color="#c2323e"/>
      </linearGradient>
      <linearGradient id="tail-ab-b" x1="52.87" y1="-231.84" x2="60.53" y2="-228.58" gradientTransform="matrix(1 0 0 -1 0 -112)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#a91e23"/><stop offset=".58" stop-color="#ac1f23"/><stop offset=".86" stop-color="#ac1f23"/>
      </linearGradient>
      <path d="M330.36 192.15H81.77S.2 2.24.06 1.88-.21.53 2.94.22C6.35 0 9.3 0 9.3 0H73a20.77 20.77 0 0 1 12.38 4.33l209.46 168.76s19.78 14.73 35.52 19.06z" fill="#fff"/>
      <path d="M213.65 192.15h115.59c-15.73-4.33-35.48-19-35.48-19L84.45 4.48A20.75 20.75 0 0 0 72.08.15H37.47z" fill="url(#tail-ab-a)"/>
      <path d="M9.37.15s-3 0-6.36.22C-.13.68 0 1.67.14 2l81.65 190.15h132.8L38.41.15z" fill="url(#tail-ab-b)"/>
      <path d="M82.38 86.08a21.12 21.12 0 0 0-7.53-1.43c-10.65 0-17.85 8.64-16.08 19.29s11.85 19.29 22.5 19.29c8.37 0 14.61-5.34 16-12.8-.57-.71-1.13-1.44-1.71-2.17C91 102.4 87 94.42 82.38 86.08z" fill="#f1f0f7"/>
      <path d="M67.85 60.84a38.1 38.1 0 0 1 7.92 7.37c3.53 4.13 8.65 12.26 14.92 24 8.94 16.77 17.76 27 28 28.94a68.06 68.06 0 0 0 12.38 1.17h4.66v-.24c-8.39-1.49-17.72-13.32-24.16-24.77-.22-.4-1.48-2.78-1.78-3.29-4.65-8.48-9.09-17-14.38-24-1.1-1.47-2.25-2.84-3.43-4.13a36.17 36.17 0 0 0-4.09-3.83 23.77 23.77 0 0 0-14.16-5.19H58.45v.26c3.21.07 7.21 2.19 9.4 3.71z" fill="#f1f0f7"/>
      <path d="M69.42 163.39a82.75 82.75 0 0 0 46.39 7.87c32.86-4.36 50.59-29.59 39.6-56.36l-26.78-65.24c-11-26.77-46.53-44.94-79.39-40.58-17.08 2.27-30.07 10.17-37.07 21zM61.34 15.73c23.49-2.64 49.35 11.84 57.77 32.35l20.52 50a35.2 35.2 0 0 1 2.47 9.39 111.17 111.17 0 0 1-7.17-10.13c-1.26-2.26-2.5-4.63-2.79-5.16-4.65-8.47-8.07-15.1-13.37-22.1a56.83 56.83 0 0 0-3.42-4.13 36.41 36.41 0 0 0-4.09-3.83 23.54 23.54 0 0 0-14.07-5.19H82v.26c3.52 0 7.34 2.28 9.2 3.57a39.32 39.32 0 0 1 7.87 7.45c3.53 4.13 8.74 12.26 15 24 8.45 15.84 16.79 25.89 26.37 28.55-3.91 10.17-14 17.63-28.14 19.23-23.44 2.65-49.3-11.83-57.72-32.34l-20.52-50c-8.42-20.51 3.79-39.28 27.28-41.92z" fill="#f1f0f7"/>
      <path d="M70.54.15h1.56a20.75 20.75 0 0 1 12.37 4.33L293.76 173.1s19.76 14.71 35.48 19H315a161.06 161.06 0 0 1-18.83-12L80.28 4.34A21.81 21.81 0 0 0 70.54.15z" fill="#bab9c0"/>
    </symbol>
  </defs>
  <view id="view-icon-tail-ab-01d81" viewBox="250 150 85.96 50"></view>
  <use id="icon-tail-aa-68e9d" xlink:href="#icon-tail-aa-68e9d" width="86.22" height="50" x="150" y="150"></use><use id="icon-tail-ab-01d81" xlink:href="#icon-tail-ab-01d81" width="85.96" height="50" x="250" y="150"></use><use id="icon-tail-ay-fd268" xlink:href="#icon-tail-ay-fd268" width="85.47" height="50" x="350" y="150"></use>
</svg>

When the gradients are moved under <defs> they work.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="tail-ab-a" x1="158.83" y1="-232.11" x2="177.44" y2="-213.93" gradientTransform="matrix(1 0 0 -1 0 -112)" gradientUnits="userSpaceOnUse">
      <stop offset=".02" stop-color="#ac1f23"/>
      <stop offset="1" stop-color="#c2323e"/>
    </linearGradient>
    <linearGradient id="tail-ab-b" x1="52.87" y1="-231.84" x2="60.53" y2="-228.58" gradientTransform="matrix(1 0 0 -1 0 -112)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#a91e23"/><stop offset=".58" stop-color="#ac1f23"/><stop offset=".86" stop-color="#ac1f23"/>
    </linearGradient>
    <symbol id="icon-tail-ab-01d81" viewBox="0 0 330.36 192.15">
      <path d="M330.36 192.15H81.77S.2 2.24.06 1.88-.21.53 2.94.22C6.35 0 9.3 0 9.3 0H73a20.77 20.77 0 0 1 12.38 4.33l209.46 168.76s19.78 14.73 35.52 19.06z" fill="#fff"/>
      <path d="M213.65 192.15h115.59c-15.73-4.33-35.48-19-35.48-19L84.45 4.48A20.75 20.75 0 0 0 72.08.15H37.47z" fill="url(#tail-ab-a)"/>
      <path d="M9.37.15s-3 0-6.36.22C-.13.68 0 1.67.14 2l81.65 190.15h132.8L38.41.15z" fill="url(#tail-ab-b)"/>
      <path d="M82.38 86.08a21.12 21.12 0 0 0-7.53-1.43c-10.65 0-17.85 8.64-16.08 19.29s11.85 19.29 22.5 19.29c8.37 0 14.61-5.34 16-12.8-.57-.71-1.13-1.44-1.71-2.17C91 102.4 87 94.42 82.38 86.08z" fill="#f1f0f7"/>
      <path d="M67.85 60.84a38.1 38.1 0 0 1 7.92 7.37c3.53 4.13 8.65 12.26 14.92 24 8.94 16.77 17.76 27 28 28.94a68.06 68.06 0 0 0 12.38 1.17h4.66v-.24c-8.39-1.49-17.72-13.32-24.16-24.77-.22-.4-1.48-2.78-1.78-3.29-4.65-8.48-9.09-17-14.38-24-1.1-1.47-2.25-2.84-3.43-4.13a36.17 36.17 0 0 0-4.09-3.83 23.77 23.77 0 0 0-14.16-5.19H58.45v.26c3.21.07 7.21 2.19 9.4 3.71z" fill="#f1f0f7"/>
      <path d="M69.42 163.39a82.75 82.75 0 0 0 46.39 7.87c32.86-4.36 50.59-29.59 39.6-56.36l-26.78-65.24c-11-26.77-46.53-44.94-79.39-40.58-17.08 2.27-30.07 10.17-37.07 21zM61.34 15.73c23.49-2.64 49.35 11.84 57.77 32.35l20.52 50a35.2 35.2 0 0 1 2.47 9.39 111.17 111.17 0 0 1-7.17-10.13c-1.26-2.26-2.5-4.63-2.79-5.16-4.65-8.47-8.07-15.1-13.37-22.1a56.83 56.83 0 0 0-3.42-4.13 36.41 36.41 0 0 0-4.09-3.83 23.54 23.54 0 0 0-14.07-5.19H82v.26c3.52 0 7.34 2.28 9.2 3.57a39.32 39.32 0 0 1 7.87 7.45c3.53 4.13 8.74 12.26 15 24 8.45 15.84 16.79 25.89 26.37 28.55-3.91 10.17-14 17.63-28.14 19.23-23.44 2.65-49.3-11.83-57.72-32.34l-20.52-50c-8.42-20.51 3.79-39.28 27.28-41.92z" fill="#f1f0f7"/>
      <path d="M70.54.15h1.56a20.75 20.75 0 0 1 12.37 4.33L293.76 173.1s19.76 14.71 35.48 19H315a161.06 161.06 0 0 1-18.83-12L80.28 4.34A21.81 21.81 0 0 0 70.54.15z" fill="#bab9c0"/>
    </symbol>
  </defs>
  <view id="view-icon-tail-ab-01d81" viewBox="250 150 85.96 50"></view>
  <use id="icon-tail-aa-68e9d" xlink:href="#icon-tail-aa-68e9d" width="86.22" height="50" x="150" y="150"></use><use id="icon-tail-ab-01d81" xlink:href="#icon-tail-ab-01d81" width="85.96" height="50" x="250" y="150"></use><use id="icon-tail-ay-fd268" xlink:href="#icon-tail-ay-fd268" width="85.47" height="50" x="350" y="150"></use>
</svg>