SVG無法容納瀏覽器窗口，窗口底部的白條

Question

我正在嘗試使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>

這是我的容器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;
}

最后，這是我的“矩形” 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

得到它的工作！ 也許有人可以解釋為什么，但是當我將長寬比設為1.37的倒數時，它就起作用了。

我通過將視圖框的高度和寬度彼此除而得到了這個數字。

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