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 个答案: