如果你试图使用和SVG直接在CSS与url()像这样;

a:before {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 451 451"><path d="M345.441,2...

您应该将#编码为%23，否则它将不起作用。

<svg fill="%23FFF" ...

您可以为此创建自己的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文件整洁!

现在你可以像这样在客户端实现这一点:

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

小提琴!

与这里链接的封闭式问题有关，但与这个问题没有直接关系。

如果有人需要替换src就像链接的问题一样，这里已经有答案了。此外，如果有人来自Vue, src路径是改变编译，我提出了一个不同的解决方案。

在我的例子中，父元素是一个链接，但实际上它可以是任何东西。

<a
  v-for="document in documents" :key="document.uuid"
  :href="document.url"
  target="_blank"
  class="item flex align-items-center gap-2 hover-parent"
>
  <img alt="documents" class="icon" src="../assets/PDF.svg" />
  <strong>{{ document.name }}</strong>
  <img class="itemImage ml-auto hide-on-parent-hover" src="../assets/download-circular-button.svg" />
  <img class="itemImage ml-auto show-on-parent-hover" src="../assets/download-circular-button-hover.svg" />
</a>

.hover-parent       .show-on-parent-hover { display: none }
.hover-parent       .hide-on-parent-hover { display: block }
.hover-parent:hover .show-on-parent-hover { display: block }
.hover-parent:hover .hide-on-parent-hover { display: none }

因此，这里的解决方案不是更改src属性，而是将两个<img>元素放在DOM中，并且只显示需要的那个元素。

如果你没有一个应该悬浮在上面的父元素，你可以简单地把两个图像都包装在一个div中。

<div class="hover-parent" >
  <img class="hide-on-parent-hover" src="../assets/download-circular-button.svg" />
  <img class="show-on-parent-hover" src="../assets/download-circular-button-hover.svg" />
</div>

你也可以将CSS更改为以下格式，因此.hover-parent父级必须是直接父级:

.hover-parent       > .show-on-parent-hover { display: none }
.hover-parent       > .hide-on-parent-hover { display: block }
.hover-parent:hover > .show-on-parent-hover { display: block }
.hover-parent:hover > .hide-on-parent-hover { display: none }

由于这是谷歌上的问题，尽管年龄很大，我想我不妨在看了这里的选项后，给出一个我在遥远的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。如果站点不允许你内联插入它们，或者你不喜欢字体图标等等，这就是商业成本。

实现这一点的一种方法是从某种服务器端机制提供svg。 只需创建一个资源服务器端，根据GET参数输出svg，并在某个url上提供它。

然后在css中使用这个url。

因为作为一个背景img，它不是DOM的一部分，你不能操作它。 另一种可能是定期使用它，以正常的方式将它嵌入到页面中，但绝对定位它，使它成为一个页面的全宽和高，然后使用z-index css属性将它放在页面上所有其他DOM元素的后面。