我有一个带有src属性的img标记，该标记引用了来自外部源的图标。此图标呈现为svg。我想将鼠标悬停时将图标的颜色更改为蓝色。
颜色必须恰好是＃4C8FDF，因此img上带有滤镜的技巧不起作用。我也不想将svg嵌入标记中（我有15个svg文件，因此该技术很难轻松扩展）。
HTML：
<div class="test">
<img src="https://x.svg" alt="test">
</div>
图标的SVG内容（在DOM中不可见。只有img标签在DOM中可见）
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#333" fill-rule="evenodd" d="M11.7 9.3c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3L8 8.4V18c0 .6-.4 1-1 1s-1-.4-1-1V8.4l-2.3 2.3c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l4-4c.1-.1.2-.2.3-.2.3-.1.5-.1.8 0 .1 0 .2.1.3.2l4 4zm10 4c.4.4.4 1 0 1.4l-4 4c-.1.1-.2.1-.3.2-.1.1-.3.1-.4.1-.1 0-.3 0-.4-.1-.1 0-.2-.1-.3-.2l-4-4c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l2.3 2.3V6c0-.6.4-1 1-1s1 .4 1 1v9.6l2.3-2.3c.4-.4 1-.4 1.4 0z"/>
</svg>
我尝试引用css中的图标以在悬停时对其进行更改，但这不起作用
.test img svg:hover {
fill: red;
}
是否还有其他方法可以通过css在悬停时访问svg路径的填充颜色？