使用 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 链接。