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

您的@EqualsAndHashCode(exclude = "user") 包含自己的文档（您实际通过<object id="svgbannerholder" ...>访问它）。这意味着它有自己的CSS规则，而您的类contentDocument未在contentDocument中定义，而是在主页面中定义。

您可以在.svg文件中添加类声明，直接在xml中插入.test标记（在<style>标记内，而不是在外部），或直接应用内联样式而不使用类。我之后没有尝试动态地将<svg>标记插入到contentDocument中，但它也应该有效。