Когда у меня есть 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>