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

问题描述：

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

I have an SVG object link on my page:

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

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

I'm trying to change the fill color on hover using this code in my SVG file:

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

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

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

The problem is that the hover effect only works when I remove the style="pointer-events: none;" from the HTML, but the link only works when that code is there.

感谢任何帮助.我检查了类似的主题，但无法找到答案.

Any help is appreciated. I checked similar topics and wasn't able to find an answer to this.

答

链接仅在 <object> 标签的内容是非交互式时才有效，因此如果 pointer-events="无"，否则不会.

Links only work when the contents of an <object> tag is non-interactive hence they work if pointer-events="none" and not otherwise.

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

For your use case you probably need to make the link internal to the SVG file i.e. via an SVG <a> tag in the SVG file rather than using an HTML link in the HTML file.

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

相关推荐