I am trying to have an SVG fit the browser window in an electron window. I have set the width and height of the window to 600 and 840, respectively.
Right now, unless I double click the grey bar at the top of the window to full-size it, there is a white bar that exists at the bottom of the screen. The peculiar part about this problem is that the white bar kind of skips when it appears, as I decrease the dimensions of the window.
I've set the aspect ratio and initial browser size with electron, evidenced by the relevant part of my main.js code.
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)
On the HTML Side, I just have a div, and an 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>
Here is the CSS for my container 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;
}
And lastly, here is my "Rectangle" SVG code:
<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>
Got it to work! Perhaps somebody can explain why, but when I made the aspect ratio the reciprocal of 1.37, then it worked.
I got that number from dividing the viewbox height and width by each other.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.