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;
}

@media打印问题，SVG无法显示

1 个答案: