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用作背景图片时，您不能对其使用填充。您可以执行类似background-color: black;的操作。这将填充徽标中所有透明的内容。

一些棘手的解决方法是将徽标中要更改的颜色变成透明的（背景的其余部分不应透明），然后使用background-color: black;为透明部分着色。

Answer 2

将SVG从文档范围中删除后，它不再受CSS属性的影响。

一种实现此目的的方法是使用position: absolute和z-index重叠元素以在文档范围内分层元素。

如何使用CSS填充SVG

2 个答案: