SVG не помещается в окно браузера, белая полоса внизу окна

Я пытаюсь подогнать SVG к окну браузера в электронном окне. Я установил ширину и высоту окна на 600 и 840 соответственно.

Прямо сейчас, если я дважды не щелкну серую полосу в верхней части окна, чтобы развернуть ее, внизу экрана будет белая полоса. Особенностью этой проблемы является то, что белая полоса пропускается, когда появляется, когда я уменьшаю размеры окна.

Я установил соотношение сторон и начальный размер браузера с помощью electronic, о чем свидетельствует соответствующая часть моего кода 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>

javascript html css svg electron

11.10.2018 12:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

121

Перейти к ответу Данный вопрос помечен как решенный