Как исправить DIV скрытый от SVG Object? - PullRequest
0 голосов
/ 23 декабря 2018

Когда у меня есть SVG под тегом Object что-либо под тегом Object, которое я не могу показать, в этом случае класс .card_middle и его содержимое не будут отображаться :(

У меня есть полные файлы с SVG в Github: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>

1 Ответ

0 голосов
/ 23 декабря 2018

Любой код, который вы поместите в тег <object>, будет использоваться только в том случае, если браузер не сможет отобразить сам объект.

В вашем случае у вас есть файл SVG в качестве источника <object> и немного html внутри самого тега <object>;поэтому, если браузер не может показать файл SVG, содержимое <object> будет видимо пользователю вместо этого.

w3.org говорит:

Резервный контент для элемента объекта доступен только пользователю, когда медиа, загруженное элементом, не отображается агентом пользователя ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...