SVG无法容纳浏览器窗口，窗口底部的白条

Question

I am trying to have an SVG fit the browser window in an electron window. 我正在尝试使SVG适合电子窗口中的浏览器窗口。 I have set the width and height of the window to 600 and 840, respectively. 我将窗口的宽度和高度分别设置为600和840。

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. 我已经用电子设置了宽高比和初始浏览器大小，这在我的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)

On the HTML Side, I just have a div, and an SMG. 在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>

Here is the CSS for my container DIV: 这是我的容器DIV的CSS：

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代码：

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

Answer 1

Got it to work! 得到它的工作！ Perhaps somebody can explain why, but when I made the aspect ratio the reciprocal of 1.37, then it worked. 也许有人可以解释为什么，但是当我将长宽比设为1.37的倒数时，它就起作用了。

I got that number from dividing the viewbox height and width by each other. 我通过将视图框的高度和宽度彼此除而得到了这个数字。

SVG无法容纳浏览器窗口，窗口底部的白条

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-10-11 10:34:07

SVG无法容纳浏览器窗口，窗口底部的白条

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-10-11 10:34:07

解决方案1
0 已采纳 2018-10-11 10:34:07