1415180 - linearGradient not show when using symbol

Status: RESOLVED DUPLICATE of bug 353575

(Core :: SVG, defect)

Description

[peter.mouland]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Steps to reproduce:

CodePen with Demo:
Under heading `SVG Reuse w/ Linear Gradients`:

https://codepen.io/peter-mouland/pen/JErvZY



Actual results:

LinearGradient defined within a <symbol> is not found when being referenced via css fill property


Expected results:

The gradient fill should be applied

Comment 1

[peter.mouland]

**SVG Reuse w/ Linear Gradients**
  
Gradient should show. Works in Chrome, Safari, Edge 14+, IE Opera (not in Firefox).

Moving the Gradient outside the <code>symbol</code> Works in all browsers

  
<svg width="35" height="20" class="sr-only">
  <symbol id="fast-track" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 587.1 287.3" class="icon icon--fast-track">
    <style type="text/css">
      .fast-track-icon__gradient{fill:url(#fast-track-icon__gradient);}
    </style>
    <g>
  <linearGradient id="fast-track-icon__gradient" gradientUnits="userSpaceOnUse" x1="460.6738" y1="285.375" x2="460.6738" y2="1.9141" gradientTransform="matrix(1 0 -0.3719 1 -119.0996 0)"><stop offset="0" style="stop-color:#751A02"></stop><stop offset="2.873510e-002" style="stop-color:#891D08"></stop><stop offset="7.119306e-002" style="stop-color:#9F210F"></stop><stop offset="0.1214" style="stop-color:#B02414"></stop><stop offset="0.1834" style="stop-color:#BB2617"></stop><stop offset="0.2705" style="stop-color:#C22819"></stop><stop offset="0.5123" style="stop-color:#C4281A"></stop><stop offset="0.7425" style="stop-color:#C22819"></stop><stop offset="0.8254" style="stop-color:#BB2617"></stop><stop offset="0.8845" style="stop-color:#B02414"></stop><stop offset="0.9322" style="stop-color:#9F210F"></stop><stop offset="0.9726" style="stop-color:#891D08"></stop><stop offset="1" style="stop-color:#751A02"></stop></linearGradient>
    
  </g>
    <g><path class="fast-track-icon__gradient" d="M292,68.4h43l-5.2,133.8h-37.5l9-91l-52,91h-39.1L292,68.4z M372.4,68.4L375,1.9h-33.5l-6.6,66.4H372.4z M292,68.4l37.9-66.4h-36.4l-40.6,66.4H292z M249.3,202.1l-50.9,83.2h37.1l23.1-40.5l-4,40.5H289l3.3-83.2H249.3z"></path>
      <path d="M190.9,59.2h40.4L214.1,87h-33.4l-18.1,48.7H130L179.8,1.9h88L249,29.6h-46.9L190.9,59.2z"></path>
      <path class="fast-track-icon__text" d="M475.6,46.8l-1.4,3.8h-32.5l1.4-3.8c5-13.6,1-19.1-8.4-19.1c-9.4,0-14.3,4.8-16.4,10.5 c-8.9,23.5,58,9.6,39.4,59.2c-9.5,25.8-35.7,40.1-62.8,40.1c-27.1,0-43-13.4-30.5-46.8l0.7-1.9h32.5l-0.7,1.9 c-5.1,13.6-0.3,19.1,9.1,19.1c9.4,0,15.8-3.6,18.4-10.5c8.6-23.1-57.4-10.9-39.4-59.2C394.6,14.3,418,0,445.2,0 C472.3,0,488,13.4,475.6,46.8z"></path>
      <path d="M72.1,179.3L32.5,285.4H0l39.5-106.1H13.1l10.4-27.7H111l-17.4,27.7H72.1z"></path>
      <path d="M173.8,151.6c27.1,0,40.4,10.5,31.5,34.4l-3.7,9.6c-4.7,12.6-13.9,22.4-28,27.1c6.3,4.6,8.2,13.2,5,27.3 l-7.6,35.4h-32.4l7.4-32.7c2.8-12.4-0.6-15.1-9.3-15.1h-12.1l-17.9,47.8H74.3l49.8-133.8H173.8z M146.2,179.3L135,209.9h17.2 c8.5,0,13.8-5.5,16.7-13.4l1.4-3.8c2.9-7.8,1.7-13.4-6.8-13.4H146.2z"></path>
      <path d="M437.4,196.5l-33.9,3.8l1.4-3.8c5-13.6,1-19.1-8.4-19.1c-9.4,0-17.4,5.5-22.4,19.1l-16.3,44 c-5.1,13.6-1.2,19.1,8.2,19.1c9.4,0,17.4-5.5,22.6-19.1l0.7-1.9h32.5l-0.7,1.9c-12.5,33.4-38.2,46.8-65.3,46.8 c-27.1,0-42.6-14.3-30.2-47.8l15.6-42c12.5-33.4,38.7-47.8,65.8-47.8C434,149.7,449.7,163.1,437.4,196.5z"></path>
      <path d="M528.9,285.4h-39.2l-15-58.7l-21.7,58.7h-32.5l49.8-133.8h32.5l-21.3,57.1l58-57.1h37.4l-68.3,64.2 L528.9,285.4z"></path>
      <path class="fast-track-icon__text" d="M548.1,29.6l-39.5,106.1h-32.5l39.5-106.1h-26.4l10.4-27.7h87.5l-17.4,27.7H548.1z"></path>
        </symbol></svg>


  <svg width="35" height="20"><use xlink:href="#fast-track"></use></svg>

Comment 2

[peter.mouland]

I've created a separate demo which contains only the above code if that makes things easier:

https://codepen.io/peter-mouland/pen/vWxGOG