CSS sur un SVG distant avec :hover

Bonjour à tous,

Pour le site que je suis en train de réaliser, j'utilise des images vectorielles au format .svg qui sont incluses dans une balise <object>. Dans mon css, j'utilise l'attribut "fill" pour modifier la couleur du vectoriel au passage de la souris avec :hover.
Le changement de couleur fonctionne parfaitement quand le code svg est inclus dans le html (li1). Par contre, avec la balise <object> le svg est hébergé dans un autre fichier que le html et le changement de couleur ne marche plus (li2). Existe-t-il une piste pour ne pas utiliser de javascript ?

Voici le code html :

<li >
     <a href="" title="Chaudière 1">
          <object class="img" type="umage/svg+xml" data="IC-nav-chaudiere.svg"></object>
          <div class="txt">Chaudière 1</div>
     </a>
</li>
<li>
     <a href="" title="Chaudière 2">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Chaudiere" class="img" x="0" y="0" viewBox="0 0 30 30" xml:space="preserve">
               <path d="M28 14c0-7.2-5.8-13-13-13C7.8 1 2 6.8 2 14c0 3.2 1.1 6 3 8.3v3.9c0 2.1 1.7 3.8 5 3.8v-3.8V26c1.5 0.6 3.2 1 5 1 1.8 0 3.5-0.4 5-1v4h5v-7.7C26.9 20 28 17.2 28 14zM6 14c0-5 4-9 9-9 5 0 9 4 9 9 0 5-4 9-9 9C10 23 6 19 6 14z"/>
          </svg>
          <div class="txt">Chaudière 2</div>
     </a>
</li>

Voici le code css :

header nav ul li ul li a 		{display:flex; justify-content:center; color:#FFF; fill:#FFFFFF;}
header nav ul li ul li a:hover 	{color:#0076da; fill:#0076da;}
.img 				{width: 25px; fill:inherit;}

Curiosity_U5832 a écrit :
Par contre, avec la balise &lt;object&gt; le svg est hébergé dans un autre fichier que le html et le changement de couleur ne marche plus (li2). Existe-t-il une piste pour ne pas utiliser de javascript ?

Je pense que le javascript va être obligatoire.