@media打印問題與SVG不顯示

Question

我想讓我的網站可打印，我在@media打印時遇到了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; 
}