css - @media 打印问题，SVG 不显示

Question

我想让我的网站可打印，我在@media print 中遇到 SVG 问题，问题是打印时 SVG 没有显示。

html5

<div class="svg-container">
<object type="image/svg+xml" data="{{ site.theme.link }}/asset/svg/{{ station.menu_order }}.svg" width="100%" height="100%" class="svg-content"></object>
</div>

CSS3

.svg-container {
    display: inline-block;
    position: relative;
    width: 15%;
    padding-bottom: 4%;
    vertical-align: middle;
    overflow: hidden;
}
.svg-content {
    display: inline-block;
    position: absolute;
    top: 1.25em;
    left: 0;
}

有谁能帮帮我吗？

Answer 1

@SaraSoueidan 已经给出了答案只需要将宽度和底部填充定义为 100%

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    vertical-align: middle;
    overflow: hidden;
}
.svg-content {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}