У меня есть файл .svg, который включает в себя файл .png в кодировке base-64, который я включил в 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, который должен определять размер контейнера, такой же, как и раньше:
.site {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.svgdisplay {
width: 80%;
}
.svgdisplay {
width: 80%;
}