如何使用CSS填充SVG[重复]

Question

我目前正在尝试将网站上使用的徽标应用于打印页面上的某个位置。这样做，我想以不同的方式填充它。然而，填充效果似乎不起作用。

当我在单独的选项卡中查看logo.svg并检查它时，我可以成功地用新颜色填充它的两个组件中的每一个。

但是，当我将它作为背景图像带入打印页面上的DIV时，填充不再起作用。有人能告诉我这是什么原因吗？

<div class="print-logo">
</div>

.print-logo {
  background: url(../img/logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 180px;
  width: 200px;
  background-position: center center;
  margin: auto;
  fill: black; 
}

在SVG页面上，我可以成功地完成以下操作。

.fil0 {
    fill: green;
}

.fil1 {
    fill: red;
}

（正如我前面提到的，SVG似乎由两个路径和类组成）。

Answer 1

一旦从文档范围中删除了SVG，它就不再受CSS属性的影响。

实现这一点的一种方法是使用位置：绝对和z-index重叠元素，以在文档范围内对元素进行分层。

Answer 2

当SVG是背景图片时，不能对其使用填充。您可以执行类似背景色的操作：黑色 。这将填充您徽标中的所有透明内容。

一些hacky变通方法是在您的徽标中使透明只是您想要更改颜色的东西（背景的其余部分不应是透明的）并使用backder-Color： Black；为透明部分着色。