В настоящее время я пытаюсь добавить эти значки ручки SVG, которые я сделал, в электронное приложение, используя flexbox.Подвох в том, что им нужно оставаться в центре прямоугольного значка независимо от размера браузера, , например, .Поэтому в идеале, когда размеры браузера изменяются, они остаются в пределах этого прямоугольника и сохраняют свои пропорции внутри него.
Прямо сейчас, поскольку значок масштабируется от изменения размеров окна браузера, положения значков над и под стрелкой относительно поля, показано здесь.
В настоящее времяЯ установил окно браузера приложения так, чтобы оно поддерживало постоянное соотношение сторон.
Вот мой соответствующий HTML:
<body>
<div id="container" class="app-graphics">
<img src="/X/Electron/smoothiebro1/img/Rectangle 2.svg" id="blenderOutline">
<!-- Made the width = 91% for the svg below,
because it was width of the bottomBar / width
of the "blenderOutline" -->
<div id = "barDiv">
<img
src="/X/Electron/smoothiebro1/img/bottomBar.svg"
id="bottomBar"
class="container"
width="91%"
>
</div>
<div class="flexContainerKnobs">
<ul class="flexContainerKnobs">
<img src="img/Knob1.svg" id="knob1" class="knob" width="13.32%">
<img src="img/Knob1.svg" id="knob2" class="knob" width="13.32%">
<img src="img/Knob1.svg" id="knob3" class="knob" width="13.32%">
<img src="img/Knob1.svg" id="knob4" class="knob" width="13.32%">
</ul>
</div>
</div>
</body>
А вот мой CSS:
html, body {
margin: 0;
padding: 0;
overflow: hidden
}
#blenderOutline {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: none;
padding: 0;
}
#bottomBar {
position: absolute;
border: none;
margin: 0 auto;
bottom: 3%;
left: 5%;
}
#barDiv {
text-align: center;
}
.flexContainerKnobs{
width: 100%;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-top: 108%;
}
.knob{
margin: 0 auto;
}
ul {
position: absolute;
top: 8px;
left: 16px;
}
Здесь - это мой SVG, код дляэто было слишком долго, чтобы включить в пост.Важной деталью, которую я могу здесь включить, является окно просмотра SVG: 0 0 72 66,5. В приведенном выше коде я сделал ширину для изображений ~ 13%, потому что это было отношение ширины SVG кширина фона (в процентах).