更改SVG填充颜色：在CSS之前或：之后 [英] Change SVG fill color in :before or :after CSS

问题描述

我有一个SVG图形如下：

I have a SVG graphic put like this:

a::before { content: url(filename.svg); }

当我将鼠标悬停在标签上时，我真的希望SVG更改填充颜色，一个新的SVG文件，如我现在：

When I hover over the tag, I really want the SVG to change the fill color, without loading a new SVG file, as I have now:

a:hover::before { content: url(filename_white.svg); }

这是可能实现使用JavaScript，jQuery还是纯粹的CSS，我不知道？

Is this possible to achieve using JavaScript, jQuery or just pure CSS that I am not aware of?

感谢。

推荐答案

content 属性生成功能上与< img元素中的svg等价的（未曝光的）标记。

Using the content property generates (non-exposed) markup functionally equvialent to an svg in an <img> element.

您不能将样式应用于svg文档中的元素，因为：

You cannot apply style to elements inside the svg document because:

1. 样式在使用< img>（或 content 或任何引用svg的css image属性）时，不允许跨文档级联


2. 由于安全问题，浏览器不会公开svg文档

1. styles are not allowed to cascade across documents
2. when using <img> (or content, or any css image property that references svg) the svg document is not exposed by the browsers due to security concerns

类似问题，但 background-image 此处和此处 a>。

Similar questions, but for background-image here and here.

所以，要做你想要的，你必须绕过上述两点。有很多选项，例如使用inline svg，使用过滤器（应用于< img>）或生成不同的svg文件（或数据URI）。

So, to do what you want you must get around the two points above somehow. There are various options for doing that, e.g using inline svg, using filters (applied to the <img>) or generating different svg files (or data URIs), as in your question.

这篇关于更改SVG填充颜色：在CSS之前或：之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！