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

然后在css中使用这个url。

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

你可以使用CSS掩码，使用'mask'属性，你可以创建一个应用于元素的掩码。

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

欲了解更多内容，请参阅这篇伟大的文章:https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

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

如果有人需要替换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 }

您可以将SVG存储在一个变量中。然后根据需要操作SVG字符串(即设置宽度、高度、颜色等)。然后使用结果来设置背景，例如:

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

我也做了一个演示，http://sassmeister.com/gist/4cf0265c5d0143a9e734。

这段代码对SVG做了一些假设，例如< SVG />元素没有现有的填充颜色，宽度和高度属性都没有设置。由于输入是在SCSS文档中硬编码的，因此执行这些约束非常容易。

不要担心代码复制。Gzip压缩使得这种差异可以忽略不计。

 .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);
}

代码本文章和演示

这是我最喜欢的方法，但是您的浏览器支持必须非常先进。使用mask属性可以创建应用于元素的掩码。任何地方的掩模是不透明的，或固体，底层的图像显示通过。在它是透明的地方，底层图像被掩盖或隐藏。CSS mask-image的语法类似于background-image。看看这个相互依赖的掩码