I am in the process of incorporating my custom SVG knob icons into an electron application using flexbox. The challenge lies in keeping them centered within the rectangle icon regardless of browser size, as shown here. Ideally, the icons should adjust their positioning and proportions relative to the rectangle as the browser dimensions change.
Currently, when the browser window is resized, the icons tend to shift beyond or within the box, creating a misalignment issue as illustrated in this example.
As a solution, I have set a fixed aspect ratio for the app's window.
Below is the relevant HTML code snippet:
<body>
<div id="container" class="app-graphics">
<img src="/X/Electron/smoothiebro1/img/Rectangle 2.svg" id="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>
Here is the CSS involved:
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;
}
You can view my SVG file here, since the code was too lengthy to include. One important detail to note is the SVG's viewbox which is defined as "0 0 72 66.5". In the code snippets provided above, the image widths are adjusted to around 13% based on the ratio between the SVG width and the background container.