I have a svg with many rect element inside it and has been added to html using object tag. I need to write external css (just to change color on hover of rect elements) for all the rect elements. Able to achieve this if I write styles inside svg. But how to achieve the same with external css ?

sample.html

<object class="svg" id="show-svg" data="sample.svg" type="image/svg+xml"/>

sample.svg

<svg>
<style>
rect:hover {stroke: red !important}
</style>
<g>
<rect style=stroke:white width="82.020828"
         height="134.9375"
         x="13.229176"
         y="135.60417"
/>
<rect style=stroke:white width="82.020828"
         height="134.9375"
         x="13.229176"
         y="135.60417"
/>
</g>
</svg>

The above has css written inside svg and works fine. But would like to achieve the same by writing external css outside svg, how to do it ?