使用 CSS 更改悬停时的 SVG 链接对象填充

我的页面上有一个 SVG 对象链接：

<a href="#" target="_blank">
        <object data="icons/email.svg" type="image/svg+xml" style="pointer-events: none;" class="icon">
                    gmail
        </object>
</a>

我正在尝试使用 SVG 文件中的以下代码更改悬停时的填充颜色：

<style>
    * {
      pointer-events: fill;
    }

    #email:hover path {
        fill:white;
    }
</style>

问题是，悬停效果仅在我删除 style="pointer-events: none;" 时才起作用。来自 HTML，但该链接仅在该代码存在时才有效。

任何帮助表示赞赏。我检查了类似的主题，但无法找到答案。

仅当链接的内容<object>标签是非交互式的，因此如果pointer-events=“none”，它们就起作用，否则就不起作用。

对于您的用例，您可能需要将链接设置为 SVG 文件的内部链接，即通过 SVG<a>SVG 文件中的标记而不是使用 HTML 文件中的 HTML 链接。