外部CSS如何改变SVG对象的颜色

Question

我正在尝试使用SVG替代图标字体。我用object标签渲染了image/svg，但是无法通过CSS更改颜色。假设我想从CSS中着色，那么在使用嵌入SVG的同时有方法可以实现吗？

   <object class="partnerLogo" type="image/svg+xml" data="assets/logos/sample.svg">
           Your browser does not support SVG
   </object>

CSS，我迄今为止尝试过的：

.partnerLogo {
    width: 100%;
    height: 100px;
    color: red;
    color-fill: red;
}

在sample.svg文件中，我在</p>标签之前添加了<?xml-stylesheet type="text/css" href="../css/styles.css"?>。

styles.css将被添加到页面中。

谢谢！

- user3861559

Answer 1

如果您使用 <object> 方法嵌入SVG，则无法直接修改其填充内容。SVG被包含在对象标签内作为文档片段，因此您的属性不会被传递，如这张图片所示。

但是，有两种方法可以修改外部SVG的颜色。

1）使用JavaScript（推荐）

使用JavaScript，您可以通过XHR获取SVG内容，然后将其注入为内联SVG。由于它是内联SVG，因此您可以修改填充颜色。我编写了一个库（svg-loader），使这个过程变得非常容易。

您只需包含库并使用data-src属性加载SVG即可。

示例： 在此处，我已经包含了三种不同格式的徽标，并修改了填充颜色。

<script type="text/javascript" src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js" async></script>

<div style="display:flex;">
    <div style="background:black;">
        <svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="yellow"></svg>
    </div>
    <div style="background:purple;">
        <svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="white"></svg>
    </div>
    <div style="background:green;">
        <svg data-src="https://s2.svgbox.net/assets/logo-white.svg" fill="red"></svg>
    </div>
</div>

2）使用filterCSS属性

您可以使用filterCSS属性来使用一系列操作（亮度，对比度，色相旋转等）来达到任何颜色。关于这个问题，有一个现有的堆栈溢出讨论。

示例：

.red {
    filter: invert(20%) sepia(97%) saturate(4013%) hue-rotate(353deg) brightness(93%) contrast(127%);
}

<img src="https://s2.svgbox.net/assets/logo-white.svg" class="red" />

这里的主要缺点是你需要针对每个颜色进行计算(使用此方法)，而且这并不明显它是如何工作的。此外，它对于具有多个颜色的SVG不起作用。

- Shubham

---

谢谢，第二个选项起作用了。我只需要找到我需要的颜色的十六进制代码。 - MikhailRatner

Answer 2

我知道这是一个老问题了 - 但这是给未来想用纯CSS为他们的SVG着色而不必使用JS的读者。与其他方法相比，我发现这种方法非常方便 - 甚至可以用渐变等方式着色你的SVG！

我只需创建一个包含我的SVG的div并给它一个类。

HTML：

<div class="colourful-svg"></div>

接下来，你可以使用CSS中的遮罩和背景颜色来完成颜色设置。

CSS：

.colourful-svg {
    mask-image: url("path/to/your/svg-file.svg");
    background: green;
    // Make sure you define dimensions for your div otherwise it won't show up
    height: 500px;
    width: 500px;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
  }

这将使您的SVG填充您创建的div，因此它将成为所需的大小。然后使用蒙版来仅通过使用url()函数链接到的SVG显示您的背景颜色。

目前，蒙版已经得到了很好的支持（大约全球94％，根据caniuse.com在撰写本文时），因此我认为这是一种实现彩色SVG的简单易行的方法 - 希望有人会发现这很有用！

- Lushawn

Answer 3

据我所知，在SVG-CSS中，边框应使用stroke来表示颜色，而背景应使用fill来表示颜色。

.partnerLogo {
  width: 100%;
  height: 100px;
  stroke: red;
  fill: red;
}

- Javier Rey

---

对于我来说，在Firefox 69上这没有任何影响。 - Tigerware

这是答案，如果SVG嵌入到HTML中，但问题是如何更改作为HTML元素CSS背景图像的SVG的填充颜色。正确答案由@lushawn在上面给出。 - Joshua Robison

Answer 4

你不能使用外部CSS类来为在元素中调用的SVG设置样式，尽管许多博客文章都说可以与之交互，但这对于这种特定情况是误导性的。必须将格式设置嵌入到实际SVG内部。

如果您需要从主CSS文件访问和更改SVG的实际对象和路径，则必须使用

以下是一篇涵盖所有内容的文章： https://vecta.io/blog/best-way-to-embed-svg

- Szakacs Botond

Answer 5

使用JavaScript来改变对象的SVG颜色。

var svgElement = document.querySelector("#SELECTOR");
svgElement.contentDocument.querySelector('svg').style.fill = '#ff0000';

希望这个方法能够有所帮助。

- Prasanna T