Я пытаюсь, чтобы SVG соответствовал окну браузера в электронном окне.Я установил ширину и высоту окна на 600 и 840 соответственно.
Прямо сейчас, если только я дважды не щелкну по серой полосе вверху окна, чтобы увеличить ее размер, в нижней части экрана появится белая полоса.Особенность этой проблемы в том, что белая полоса пропускается при ее появлении, поскольку я уменьшаю размеры окна.
Я установил соотношение сторон и начальный размер браузера с помощью электрона, о чем свидетельствует соответствующая часть моего кода main.js.
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 600,
height: 840
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
mainWindow.setAspectRatio(1.37)
На стороне HTML у меня просто есть div и SMG.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="X/Electron/smoothiebro1/scripts.js" type="text/JavaScript" /></script>
</head>
<body>
<div id="container" class="svg-container">
<img src="X/Electron/smoothiebro1/img/Rectangle 2.svg" id="blenderOutline">
</div>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
Вот CSS для моего контейнера DIV:
html, body { margin:0; padding:0; overflow:hidden; height: 100%;}
svg { position:fixed; top:0; bottom:0; left:0; right:0; border: none; padding: 0; display: block;margin: 0 auto;max-height: 100%; max-width: 100%;}
div{
border: none;
padding: 0px;
margin: 0px;
}
И, наконец, вот мой SVG-код "Прямоугольник":
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560.362 769.971" preserveAspectRatio="xMidYMid meet" >
<defs>
<style>
.cls-1 {
fill: #fff;
stroke: #777;
stroke-linejoin: round;
stroke-width: 10px;
}
.cls-2 {
stroke: none;
}
.cls-3 {
fill: none;
}
</style>
</defs>
<g id="Rectangle_2" data-name="Rectangle 2" class="cls-1" transform="translate(10 10)">
<rect class="cls-2" width="540.362" height="749.971" rx="18"/>
<rect class="cls-3" x="-5" y="-5" width="550.362" height="759.971" rx="23"/>
</g>
</svg>