Стили класса Css не применяются к SVG

Question

У меня есть изображение SVG большего размера, и я хочу подождать, пока оно полностью загрузится, чтобы показать его.Таким образом, я сначала показываю загрузчик, а затем svg.

HTML-код выглядит следующим образом:

<section id="top-banner">
    <div id="spinner"><object data="/assets/img/spinner.svg" type="image/svg+xml"></object> </div>
    <object id="svgbannerholder" data="/assets/img/banner.svg" type="image/svg+xml"></object>
</section>

CSS выглядит следующим образом:

#svgbannerholder {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

#spinner {
  position: absolute;
  left: 0;
  right: 0;
  background-color: #fafafa;
  height: 623px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.test{
  display: none !important;
}

ИФайл js выглядит следующим образом:

// wait until DOM is ready
$(document).ready(function () {
    // wait until window is loaded - all images, styles-sheets, fonts, links, and other media assets
    $(window).on("load", function () {
        var spinner = $("#spinner");
        var svgholder = $("#svgbannerholder");
        var car_to_inspection = document.getElementById("svgbannerholder").contentDocument.getElementById("i10");

        svgholder.load("image/svg+xml", function () {
            spinner.addClass("hidden"); // hide spinner
            svgholder.css("opacity", 1); // show svg with fadein animation


            car_to_inspection.classList.add("test");
            // car_to_inspection.style.display = "none";
        });
    });

});

После загрузки svg я пытаюсь применить анимацию к элементу.Но проблема в том, что стили класса не применяются.Класс self добавляется к правому элементу, но он не применяется.

Если я добавлю стиль напрямую через JavaScript, как, например, car_to_inspection.style.display = "none";, затем он применяется.

Есть идеи, что происходит?

Answer 1

Ваш <object id="svgbannerholder" ...> содержит свой собственный документ (вы на самом деле получаете к нему доступ contentDocument).Это означает, что у него есть свои собственные правила CSS, и ваш класс .test определен не в вашем contentDocument, а на главной странице.

Вы можете добавить объявление класса в свой файл .svg, вставив непосредственно<style> в xml (внутри тега <svg>, а не снаружи) или применяйте встроенные стили напрямую, без использования классов.Я не пытался динамически вставить тег <style> в contentDocument после этого, но он тоже должен работать.