Question

当我在“对象”标签下有SVG时，“对象”标签下的任何内容都无法显示，在这种情况下，类.card_middle及其内容将不会显示:(

我在Github中拥有SVG的完整文件： https://github.com/MariuzM/SVG-Anime-Test

我需要将其用作对象标签，因为我在SVG文件中进行了动画处理。

.card_top {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card_middle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card_bottom {
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* .pic4 {
    background-image: url('pic4.svg');
    min-height: 100%;
    } */

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha256-azvvU9xKluwHFJ0Cpgtf0CYzK7zgtOznnzxV4924X1w=" crossorigin="anonymous" />
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js" integrity="sha256-K0KkaRh1fs/UYfKcnzBK9G/X7HgzuaeVI1hJPS8Sxs4=" crossorigin="anonymous"></script>
<body>
  <div class="card card_top" style="width: 18rem;">
    <div class="card-body">
      Card top
    </div>
  </div>

  <object type="image/svg+xml" data="pic4.svg">
        <div class="card card_middle" style="width: 18rem;">
          <div class="card-body">
            Card Middle
          </div>
        </div>
      </object>

  <div class="pic4" src="pic4.svg">
    <div class="card card_bottom" style="width: 18rem;">
      <div class="card-body">
        Card bottom
      </div>
    </div>
  </div>
</body>

Answer 1

仅当浏览器无法显示对象本身时，才会使用放置在<object>标记中的任何代码。

在您的情况下，您有一个SVG文件作为<object>的来源，并且在<object>标签本身中包含了一些html；因此，如果浏览器无法显示SVG文件，则<object>的内容将对用户可见。

w3.org说：

对象元素的回退内容仅对用户可用当元素加载的媒体未由用户代理呈现时...

如何修复SVG对象中隐藏的DIV？

1 个答案: