Question

我有一个.svg，其中包含以base-64编码的.png，我将其内联到html页面中，如下所示（为简洁起见，base 64被截断了）：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Something Worth Seeing - an SVG Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body class="site">
<figure class="svgdisplay">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 1428 1870" style="enable-background:new 0 0 1428 1870;" xml:space="preserve">
<style type="text/css">
.st0{opacity:5.000000e-05;}
.st1{fill:#FFFFFF;}
.st2{opacity:5.000000e-05;fill:#FFFFFF;}
</style>
<image style="overflow:visible;" width="2310"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACQYAAAvRCAYAAACWvamgAAAABGdBTUEAALGPC/xhBQAAACBjSFJN 
</image>
<a xlink:href="../ContactForm/email2.html" target="_blank">
<g class="st0">
    <rect x="415" y="48" class="st1" width="77" height="27"/>
</g>
</a>

CSS为：

.site {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.svgdisplay {
width: 80%;
}

它确实在大约80％的查看屏幕上显示文档。但它切断了svg的顶部。为什么，为什么要显示.svg的整个高度，同时又保留80％的宽度？

为回应enxaneta的问题，现在的代码（为简洁起见，基数为64）被删除：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>

<body class="site">
<figure class="svgdisplay">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 1428 1870" style="enable-background:new 0 0 1428 1870;" xml:space="preserve">
<style type="text/css">
.st0{opacity:5.000000e-05;}
.st1{fill:#FFFFFF;}
.st2{opacity:5.000000e-05;fill:#FFFFFF;}
</style>
<image style="overflow:visible;" width="1428" height="1870" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACQYAAAvRCAYAAACWvamgAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAFDY/wEbzXDSmBUW7gAAAABJRU5ErkJggg==" transform="matrix(0.6182 0 0 0.6182 0 0)">
</image>
<a xlink:href="../ContactForm/email2.html" target="_blank">
<g class="st0">
    <rect x="415" y="48" class="st1" width="77" height="27"/>
</g>
</a>
<a xlink:href="Website_A.html" target="_blank">
<rect x="109" y="729" class="st2" width="689" height="26"/>
</a>
<a xlink:href="Website_B.html" target="_blank">
<rect x="109" y="783" class="st2" width="798" height="30"/>
</a>
<a xlink:href="Website_C.html" target="_blank">
<rect x="118" y="843" class="st2" width="705" height="23"/>
</a>
</svg>
</figure>
</body>
</html>

由CSS决定容器大小的CSS与以前相同：

        .site {
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
        }

        .svgdisplay {
        width: 80%;
        }

    .svgdisplay {
    width: 80%;
    }

CSS可以正确定向宽度，但.svgs仍会被高度截断

0 个答案: