I’m adding svg logos to my portfolio and one has a couple <linearGradient> elements in it. The logo shows up perfectly in Firefox but in Chrome, Edge and Opera the portions with a linear gradient don’t display. I define the logo as a <symbol> like this

<symbol id="cypress_logo" width="297.863159px" height="120.045601px" viewBox="0 0 297.863159 120.045601">
    <style type="text/css">
      .cy_st0{fill:url(#cypress_x5F_gradient_x5F_03_2_);}
        .cy_st1{fill:var(--cy_color01);}
        .cy_st2{fill:url(#cypress_x5F_gradient_x5F_01_2_);}
        .cy_st3{fill:var(--cy_color02);}
        .cy_st4{fill:url(#cypress_x5F_gradient_x5F_03_3_);}
        .cy_st5{fill:url(#cypress_x5F_gradient_x5F_01_3_);}
    </style>
    <linearGradient id="cypress_x5F_gradient_x5F_03_2_" gradientUnits="userSpaceOnUse" x1="160.038849" y1="182.399033" x2="205.718689" y2="231.221817" gradientTransform="matrix(1 0 0 1 -106 -186.390198)">
      <stop offset="0.0939" style="stop-color:var(--cy_color01); stop-opacity: 1;"/>
      <stop offset="0.9883" style="stop-color:var(--cy_color01); stop-opacity:0"/>
    </linearGradient>

    <path id="cypress_x5F_gradient_x5F_03_1_" class="cy_st0" d="M106.290375,36.263775
      C97.286957,19.007219,79.530205,8.253134,60.272896,8.253134c-6.752567,0-13.505131,1.250476-19.757504,4.001521L37.264156,4.50171
      C44.516914,1.50057,52.269859,0,60.272896,0c22.508545,0,43.01635,12.504749,53.520325,32.262253L106.290375,36.263775z"/>
    
    <path id="cypress_x5F_gradient_x5F_02_1_" class="cy_st1" d="M2.250855,76.028877C0.750285,70.776878,0,65.524887,0,60.0228
      c0-24.509312,15.505889-47.01786,38.514629-56.021282l3.001141,7.752945C21.758265,19.50741,8.253135,38.764725,8.253135,60.0228
      c0,4.751804,0.50019,9.253513,1.750666,13.755222L2.250855,76.028877z"/>
    
    <linearGradient id="cypress_x5F_gradient_x5F_01_2_" gradientUnits="userSpaceOnUse" x1="105.350082" y1="273.759186" x2="192.619492" y2="296.987274" gradientTransform="matrix(1 0 0 1 -106 -186.390198)">
      <stop offset="0.0774" style="stop-color:var(--cy_color01);"/>
      <stop offset="0.7617" style="stop-color:var(--cy_color02);"/>
    </linearGradient>

    <path id="cypress_x5F_gradient_x5F_01_1_" class="cy_st2" d="M66.525269,105.039902l-2.000755,5.0019
      c-0.500191,1.000381-1.250477,1.750664-2.250854,1.750664c-0.750282,0-1.500572,0-2.000759,0
      c-24.009121,0-45.267197-17.006454-50.519192-40.265297L1.500574,73.27784
      c3.00114,13.004936,10.253895,25.009499,20.757885,33.512726c10.75408,8.503227,24.009115,13.255035,37.764343,13.255035l0,0
      c0.750282,0,1.500568,0,2.50095,0c4.251617-0.250092,8.253136-2.751045,9.7537-6.752571l2.751045-6.502464L66.525269,105.039902z"/>
    
    <path id="cypress_x5F_wordmark_1_" class="cy_st3" d="M42.266052,47.518047c4.751804,0,8.753326,2.50095,10.754089,7.002659
      l0.250095,0.250095l8.253132-2.751045l-0.250095-0.500191c-3.251232-7.752945-10.50399-12.504749-19.007221-12.504749
      c-6.002277,0-11.004177,2.000755-15.005699,6.002277s-6.002277,9.003422-6.002277,14.755604s2.000759,10.754082,6.002277,14.755608
      c4.001522,4.001518,9.003422,6.002274,15.005699,6.002274c8.503231,0,15.755989-4.751801,19.007221-12.504745l0.250095-0.500191
      l-8.253132-2.751045l-0.250095,0.250092c-1.750668,4.501709-5.752182,7.002655-10.754082,7.002655
      c-3.501331,0-6.252377-1.250473-8.503231-3.501328s-3.501328-5.251995-3.501328-8.753323s1.250475-6.502472,3.501328-9.003422
      C36.01368,48.768524,38.764725,47.518047,42.266052,47.518047z M142.804245,45.267197
      c-3.751434-4.001522-8.503235-6.002281-14.005325-6.002281s-10.003792,2.000759-13.505127,5.752182v-5.0019h-8.753326v55.020905
      h8.753326V74.778404c3.501335,3.751427,8.003036,5.75219,13.505127,5.75219s10.253891-2.000763,14.005325-6.002281
      c3.751419-4.001518,5.50209-8.753326,5.50209-14.505512S146.555664,49.268715,142.804245,45.267197z M135.801575,68.776123
      c-2.250854,2.250854-5.001892,3.501328-8.503227,3.501328s-6.252373-1.250473-8.503235-3.501328
      c-2.250854-2.250854-3.501335-5.251995-3.501335-8.753323c0-3.501331,1.250481-6.502472,3.501335-9.003422
      c2.250862-2.250854,5.0019-3.501331,8.503235-3.501331s6.252373,1.250477,8.503227,3.501331
      c2.25087,2.250854,3.251236,5.251995,3.251236,9.003422C139.302917,63.524128,138.052444,66.525269,135.801575,68.776123z
       M162.561752,45.017097v-4.751801h-8.753326v39.515007h8.753326V57.521851c0-3.501331,1.500565-6.252377,4.251602-8.253136
      c2.751038-1.750668,6.25238-2.250854,10.253891-1.000378l0.500183,0.250095v-8.503235h0.000015
      C171.815262,38.514629,166.313171,40.515392,162.561752,45.017097z M200.826294,39.515011
      c-5.752197,0-10.754089,2.000759-14.755615,6.002281c-4.001511,3.751423-6.002274,8.753323-6.002274,14.505508
      c0,5.752178,2.000763,10.754078,6.002274,14.755604c4.001526,4.001518,9.003418,6.002281,15.005707,6.002281
      c8.253143,0,15.255783-4.251617,18.757126-11.004181l0.250092-0.500191l-7.502853-3.251236l-0.250092,0.250099
      c-2.250854,4.251617-6.25238,6.752563-11.004181,6.752563c-6.25238,0-11.004181-3.751427-12.254669-9.753704h32.012177v-0.500191
      c0.75029-6.502472-1.000381-12.004562-5.001907-16.506271C212.330658,41.765865,207.078659,39.515011,200.826294,39.515011z
       M189.321899,56.021278c1.50058-5.50209,6.002289-8.753326,11.254288-8.753326c5.502075,0,10.003799,3.501331,11.504364,8.753326
      H189.321899z M244.592911,56.271374c-4.751801-1.000378-9.003418-1.750668-9.003418-5.0019
      c0-2.751045,2.751053-4.501709,6.752563-4.501709c4.501724,0,7.00267,2.000759,7.502853,5.752186v0.500191l8.753326-1.750668
      v-0.500191c-1.250488-7.002659-7.502853-11.254276-16.25618-11.254276c-4.501724,0-8.253143,1.250477-11.254272,3.501328
      c-3.001129,2.250854-4.501724,5.251999-4.501724,8.753326c0,5.251995,3.251251,9.003422,8.753326,10.253895
      c1.500565,0.250095,3.001129,0.500195,4.501724,0.750286c5.502075,1.000378,10.503983,2.000755,10.503983,5.50209
      c0,2.751045-3.251251,4.751801-8.003036,4.751801c-4.751801,0-7.502853-2.000755-8.003036-5.752182V66.77536l-8.753326,1.750671
      v0.500191c1.250488,7.002655,7.502853,11.254265,17.00647,11.254265c4.751816,0,8.753326-1.250473,12.004578-3.501328
      s5.001892-5.251991,5.001892-8.753326C259.348511,59.022419,251.345474,57.521851,244.592911,56.271374z M282.857452,56.271374
      c-4.751831-1.000378-9.003418-1.750668-9.003418-5.0019c0-2.751045,2.751038-4.501709,6.752533-4.501709
      c4.50174,0,7.002686,2.000759,7.502869,5.752186v0.500191l8.753326-1.750668v-0.500191
      c-1.250488-7.002659-7.502869-11.254276-16.256195-11.254276c-4.501709,0-8.253143,1.250477-11.254272,3.501328
      c-3.001129,2.250854-4.501709,5.251999-4.501709,8.753326c0,5.251995,3.251251,9.003422,8.753326,10.253895
      c1.50058,0.250095,3.001129,0.500195,4.501709,0.750286c5.502106,1.000378,10.503998,2.000755,10.503998,5.50209
      c0,2.751045-3.251251,4.751801-8.003052,4.751801s-7.502838-2.000755-8.003021-5.752182V66.77536l-8.753326,1.750671v0.500191
      c1.250488,7.002655,7.502838,11.254265,17.00647,11.254265c4.751801,0,8.753326-1.250473,12.004578-3.501328
      c3.251221-2.250854,5.001892-5.251991,5.001892-8.753326C297.613037,59.022419,289.359894,57.521851,282.857452,56.271374z
       M93.285431,40.265297L81.781067,69.776505L70.026596,40.265297h-9.503605l16.506268,40.265297l-12.004562,28.010635
      l8.253136,1.750671l28.760925-70.026596C102.038757,40.265301,93.285431,40.265301,93.285431,40.265297z"/>
  </symbol>

Then in my HTML I use it like this

<svg viewBox="0 0 297.863159 120.045601" class="techLogo">
    <use href="#cypress_logo" style="--cy_color01: hsl(var(--gray-300), 1); --cy_color02: 
    hsl(var(--gray-500), 1);" />
</svg>

I came across other articles on here where someone was having the same problem however the issues people had revolved around case sensitivity like doing <lineargradient> instead of <linearGradient>. I exported the SVG from Illustrator and noticed it created a couple extra classes that aren’t used so I’m wondering if it did something else strange that prevents it from working. Can someone shed light on why this is happening?