SVG无法显示的@media打印问题 [英] @media print issue with SVG not displaying

问题描述

我想使我的网站可打印，@ media打印中SVG出现问题，问题是我打印时SVG没有显示.

I want to make printable my website, I'm having issues with SVG in @media print, the problem is that SVG are not displaying when I print.

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

有人可以帮助我吗?

推荐答案

答案已由@SaraSoueidan给出 只需将宽度和底部填充定义为100％

the answer has been given by @SaraSoueidan just need to define the width and the padding-bottom at 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;
}

这篇关于SVG无法显示的@media打印问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！