SVG fill / stroke - html

Question

Need some help with filling my svg with color on hover.
On the left I have my test svg, on the right - the result I want on hover.
How to fill with color on hover only gray lines and let the space inside be transparent (empty)?
(that's strange that space inside is fillinbg with color, because there is no svg content there)
.container {
width: 50%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background: gray;
padding: 20px;
}
svg:hover {
fill: #40bfff;
stroke:#40bfff;
}
<div class="container">
<div>
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.188 19a.562.562 0 100-1.125.562.562 0 000 1.125zM15.063 19a.562.562 0 100-1.125.562.562 0 000 1.125z" fill="#9098B1" stroke="#9098B1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 1h2.25L5.5 14.5h11.25L19 4.375H4.375" stroke="#9098B1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<!-- changing stroke and fill to color i need -->
<div>
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.188 19a.562.562 0 100-1.125.562.562 0 000 1.125zM15.063 19a.562.562 0 100-1.125.562.562 0 000 1.125z" fill="#40bfff" stroke="#40bfff" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 1h2.25L5.5 14.5h11.25L19 4.375H4.375" stroke="#40bfff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>

Answer 1

All you have to do to change the wheel fill colour is add a second rule targetting the wheels.
Note: The SVG below is exactly the same as your original one. Except that I have reformatted it a little, and added a viewBox so that we can scale it up to see the wheels. I wanted to show that you can style the SVG how you want without having to change the SVG.
svg {
/* just here to make the svg large enough to see the wheel centres */
width: 200px;
height: 200px;
}
svg:hover path {
stroke: #40bfff;
}
/* Target the first path (the wheels) */
svg:hover path:nth-child(1) {
fill: #40bfff;
}
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.188 19a.562.562 0 100-1.125.562.562 0 000 1.125zM15.063 19a.562.562 0 100-1.125.562.562 0 000 1.125z"
fill="#9098B1" stroke="#9098B1"
stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 1h2.25L5.5 14.5h11.25L19 4.375H4.375"
stroke="#9098B1"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Answer 2

try this:
.container {
width: 50%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background: gray;
padding: 20px;
}
svg:hover path {
stroke: #40bfff;
}
<div class="container">
<div>
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.188 19a.562.562 0 100-1.125.562.562 0 000 1.125zM15.063 19a.562.562 0 100-1.125.562.562 0 000 1.125z" fill="#9098B1" stroke="#9098B1" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 1h2.25L5.5 14.5h11.25L19 4.375H4.375" stroke="#9098B1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<!-- changing stroke and fill to color i need -->
<div>
<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.188 19a.562.562 0 100-1.125.562.562 0 000 1.125zM15.063 19a.562.562 0 100-1.125.562.562 0 000 1.125z" fill="#40bfff" stroke="#40bfff" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 1h2.25L5.5 14.5h11.25L19 4.375H4.375" stroke="#40bfff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
</div>

Answer 3

Put all your stroke & fill attributes into the svg element since that's where your hover is set.
.container {
width: 50%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background: gray;
padding: 20px;
}
svg:hover {
fill: none;
stroke: #40bfff;
}
<div class="container">
<div>
<svg width="20" height="20" stroke="#9098B1" fill-opacity="0" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
<path d="M7.188 19a.562.562 0 100-1.125.562.562 0 000 1.125zM15.063 19a.562.562 0 100-1.125.562.562 0 000 1.125z" />
<path d="M1 1h2.25L5.5 14.5h11.25L19 4.375H4.375"/>
</svg>
</div>