css - 悬停时从外部源更改 svg 的颜色

Question

我有一个带有 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路径的填充颜色？

标签： csssvgpathhover