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

Posted 2023-03-06

【中文标题】如何使用 CSS 填充 SVG [重复]

【英文标题】：How to Fill SVG Using CSS [duplicate]

【发布时间】：2019-10-26 10:47:55

【问题描述】：

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

当我在单独的选项卡中查看 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 似乎包含两个路径和类）。

【问题讨论】：

考虑内联 SVG。这意味着获取 SVG 的实际代码并将其与您的其他 html 内联放入您的文档中。现在您可以像任何其他 DOM 元素一样定位它。

您需要将 svg 代码嵌入到您的 html 中 - 这样 svg 标记及其 css 类是可编辑的。当您通过后台 url 链接到 svg 文件时，浏览器只会将 svg 文件视为任何其他图像文件。

我看不出它是如何复制的。其他问题的大多数答案都在讨论 CSS 传入。我已经查看并尝试了他们的方法，但似乎没有一个对我有用。部分解释可能是这个问题已经存在三年了。这在 CSS 领域是古老的。

【参考方案1】：

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

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

【参考方案2】：

当 SVG 作为背景图片时，您不能在 SVG 上使用填充。您可以执行background-color: black; 之类的操作。这将填充您徽标中的所有透明内容。

一些 hacky 解决方法是在您的徽标中将您想要更改颜色的内容设为透明（背景的其余部分不应透明）并使用 background-color: black; 为透明部分着色。

【讨论】：

是否可以选择使用img 标签？这似乎是它作为实际徽标包含在主页上的方式。