唯一的方法，我发现这是跨浏览器(又名防弹)，是渲染SVG与PHP和传递查询字符串来设置颜色。

SVG，这里叫做arrow。php

<?php
$fill = filter_input(INPUT_GET, 'fill');
$fill = strtolower($fill);
$fill = preg_replace("/[^a-z0-9]/", '', $fill);
if(empty($fill)) $fill = "000000";
header('Content-type: image/svg+xml');
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<svg xmlns="http://www.w3.org/2000/svg" width="7.4" height="12" viewBox="0 0 7.4 12">
    <g>
        <path d="M8.6,7.4,10,6l6,6-6,6L8.6,16.6,13.2,12Z" transform="translate(-8.6 -6)" fill="#<?php echo htmlspecialchars($fill); ?>" fill-rule="evenodd"/>
    </g>
</svg>

然后像这样调用图像

.cssclass{ background-image: url(arrow.php?fill=112233); }

仅适用于PHP。记住，每次你改变颜色值，你的浏览器将加载一个新的图像。

由于这是谷歌上的问题，尽管年龄很大，我想我不妨在看了这里的选项后，给出一个我在遥远的2022年使用的解决方案。

这实际上只是之前的遮罩解决方案，但在一个伪元素上。

.icon {
    height: 1.5rem;
    width: 1.5rem;
}
.icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url("path/to/svg/icon.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url("path/to/svg/icon.svg");
}

这在今天的所有主流浏览器中都有效，尽管显然您不能使用它来拥有具有多种颜色的SVG。如果站点不允许你内联插入它们，或者你不喜欢字体图标等等，这就是商业成本。

我需要一些类似的东西，并想坚持使用CSS。这里有LESS和SCSS mixins以及普通的CSS，可以帮助你做到这一点。不幸的是，它的浏览器支持有点松懈。有关浏览器支持的详细信息，请参见下面。

更少的混合:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

更少的使用方法:

.element-color(#fff);

SCSS混合:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS用法:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

这里有更多关于将完整的SVG代码嵌入到CSS文件中的信息。它还提到浏览器兼容性有点太小，这是一个可行的选择。

您可以使用亮度过滤器，任何大于1的值使元素更亮，任何小于1的值使元素更暗。因此，我们可以将这些浅色SVG设为深色，反之亦然，例如，这将使SVG变暗:

filter: brightness(0);

为了改变颜色和亮度级别，我们可以使用暗色滤镜和色调旋转，亮度，例如:

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

代码本文章和演示

您可以为此创建自己的SCSS函数。将以下内容添加到配置中。rb文件。

require 'sass'
require 'cgi'

module Sass::Script::Functions

  def inline_svg_image(path, fill)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    svg.gsub! '{color}', fill.value
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

然后你可以在你的CSS中使用它:

.icon {
  background-image: inline-svg-image('icons/icon.svg', '#555');
}

您需要编辑SVG文件，并将标记中的任何填充属性替换为fill="{color}"

图标路径总是相对于相同配置中的images_dir参数。rb文件。

类似于其他一些解决方案，但这是非常干净的，并保持您的SCSS文件整洁!