样式表更改后，Chrome 66+ SVG不会更新颜色

Question

也许我对此的实现有点误导，因为我不是SVG专家，但在Chrome 66+更新后，我的页面上使用CSS属性设置样式的SVG不会更新颜色。

这是一个例子： Aqua Theme -> Blue Theme

标记：

<svg viewBox="0 0 100 100" preserveAspectRatio="none" class="MainMenuSwoosh">
    <path d="M100,100           L100,0            C50,25 75,100 25,100z" fill="url(#SwooshGradient)"></path>            
    <defs>
          <linearGradient id="SwooshGradient" gradientTransform="rotate(90)">
               <stop class="stopBottom" offset="0%"></stop>
           <stop class="stopTop" offset="100%"></stop>
          </linearGradient>
    </defs>
</svg>

LESS：

.MainMenuSwoosh {
    width: 4%;
    float: right;
    height: @mainMenuHeight;

    #SwooshGradient .stopBottom {
        stop-color: @altColor;
    }

    #SwooshGradient .stopTop {
        stop-color: @mainColor;
    }
}

我找到了一个不错的解决方案，可以使用Chrome 66+的浏览器检测自行更换innerHTML，但显然我不想再这样做了。 用于交换主题的JavaScript：

$("#ddCurrentTheme").change(function (e) {
  var val = $(this).val();
  $("#DefaultCss")[0].href = val;

  /* hack for emulating "stylesheet loaded event", see onerror below */
  var img = document.createElement('img');

  function styleSheetLoaded() {
    try {
      window.dispatchEvent(MyEvents.ThemeChanged);
    }
    catch (ex) {
      //custom events not supported
    }

    var v = Telerik.Web.Browser.version;
    if (Telerik.Web.Browser.chrome && v && v >= 66) {
      $(".MainMenuSwoosh").html($(".MainMenuSwoosh").html()); 
    }
  }

  img.onerror = styleSheetLoaded;

  img.src = msg.d;
}

所有这些对我来说都“有效”。我必须添加的唯一新代码是底部的innerHTML交换，但我真的希望有更好的解决方案。就我所知，这在其他浏览器中不会发生。