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

Question

我的页面上有一个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，但该链接仅在该代码存在时才有效。

感谢任何帮助。我检查了类似的主题，但未能找到答案。

Answer 1

链接仅在<object>标记的内容非交互时才起作用，因此如果pointer-events =“none”则不起作用，否则无效。

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