CSS-具有颜色更改功能的伪元素中的SVG

Question

主要思想是，我正在寻找将SVG添加到伪元素的最佳方法，该伪元素仍然保持其颜色变化（用于悬停）。所有这些最好没有HTML，而绝对不是JS。我正在寻找一个更简单的插件类，这是他们那种只使用CSS的解决方案。

我在这里读到了一篇讨论：有没有办法在伪元素：：before或：：after中使用SVG作为内容

在这里，人们主要谈论的是将其添加为这样的内容：

内容：url（数据：图像/svg xml，xml版本=“1.0”en…）

这里的问题在于我无法更改SVG的颜色。

解决方案只是将其添加为内容或背景也是如此。

我能找到的唯一方法是通过高度：25px；宽度：30px；

-webkit-mask-size: contain;
mask-size: contain;

-webkit-mask-position: center;
mask-position: center;

-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;

background: #fff;

-webkit-mask-image: url('button.svg');
mask-image: url('button.svg');`

这是一段需要编写的样板代码。但它允许在背景字段中悬停时更改颜色。

在现代浏览器（不包括IE11）上是否有更好的方法来做到这一点，或者我应该坚持我久经考验的掩码做事方式。

我感谢任何和所有的投入。

Answer 1

如果您翻转逻辑-而不是在悬停时添加颜色-将其视为在不悬停时删除颜色，这很容易。

使用CSS过滤器-您可以将svg转换为灰度-这意味着彩色图像/SVG呈现为黑白图像。然后在悬停时-停止过滤器/转换，您的svg将拥有其实际颜色。

请注意，这只适用于一种颜色更改—您不能让不同的路径使用不同的颜色等—但通过反转颜色逻辑，您可以得到一个黑白svg，该svg在悬停时变为彩色。

下面的div有一个边框-只是为了显示尺寸（我可能会将svg作为div的背景图像，而不是：：之前-但我按照要求保留了它。svg最初显示为黑色，悬停在div上-svg变为红色…神奇：）

div {
  height: 160px;
   width: 300px;
   border: solid 1px blue;
   position: relative
}

div::before {
  content: url('data:image/svg+xml;utf8,<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"  style="" xml:space="preserve"><path d="M150 0 L75 200 L225 200 Z" fill="red"></path></svg>');
  display: block;
    -webkit-filter: grayscale(100);
    filter: grayscale(100);
}

  
div:hover:before{
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}   

<div></div>