How to change SVG stroke color on mouse over when using an object

I am trying to make an svg image stroke color change when the mouse moves over the image. What I have now does not change the color of the stroke, and I am not sure why. If I manually change the stroke color through devtools it works fine.

I do notice that when I use an object to load an svg I get #document item in the inspector. Does that have any effect on why my color isn't changing when I mouse over the image?

<li class="nav-item">
  <a href="">
    <object data="/images/icon.svg"></object>
  </a>
</li>

.nav-item {
    svg:hover {
        path {
            stroke: #da25e7;
        }
    }
}

Solution

Looks like I can directly put the style within the svg file. The downside to this is that it is used everywhere, and places that I don't want a hover effect with the image will still have one.

<svg>
  <style>
    svg:hover path {stroke: #da25e7;}
  </style>
  <rect ...>...</rect>
</svg>

Then include the file:

<object data="/images/icon.svg"></object>