Chrome 66+ SVG не обновляет цвета после изменения таблицы стилей - PullRequest
Новая
       16

Chrome 66+ SVG не обновляет цвета после изменения таблицы стилей

0 голосов
/ 15 мая 2018

Возможно, моя реализация этого немного ошибочна, так как я не эксперт SVG, но после обновления Chrome 66+ SVG на моей странице, стилизованный с использованием свойств CSS, не обновляет цвета.

Вот пример: Aqua Theme -> Blue Theme

enter image description here

Markup: 

<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>

МИНУС: 

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

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

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

Я нашел достойное решение для замены внутреннего HTML для себя, используя обнаружение браузера для Chrome 66+, но, очевидно, я больше не хочу этого делать. 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;
}

Все это "работает" для меня прямо сейчас. Единственный новый код, который я должен был добавить, - это замена внутреннего HTML внизу, но я действительно надеюсь, что есть лучшее решение для этого. Насколько я могу судить, этого не происходит в других браузерах.

...