CODEWITHSUNDEEP
javascriptcsssvg
Boky
Boky

Reputation: 12064

Css class styles aren't applied to svg

I have what bigger svg image and I want to wait until it is fully loaded to show it. Thus I first show a loader and then the svg.

The html code is as follows:

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

The css is as follows:

#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;
}

And the js file is as follows:

// 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";
        });
    });

});

After the svg is loaded I'm trying to apply animation to an element. But the problem is that the styles of the class aren't applied. The class self is added to right element, but it isn't applied.

enter image description here

If I add the style directly via javascript as for example car_to_inspection.style.display = "none";, then it is applied.

Any idea what is going on?

Upvotes: 1

Views: 1584

Answers (1)

Kaddath
Kaddath

Reputation: 6151

Your <object id="svgbannerholder" ...> contains its own document (you actually access it by contentDocument). It means that it has its own CSS rules, and your class .test is not defined in your contentDocument, but in the main page.

You can add the class declaration in your .svg file, directly inserting a <style> tag in the xml (inside the <svg> tag, not outside), or apply inline styles directly without using classes. I haven't tried to insert dynamically the <style> tag to the contentDocument afterwards, but it should work too.

Upvotes: 1

Related Questions