SVG对象从外部CSS更改颜色

Question

我在玩SVG（试图用SVG替换图标字体。）我得到它来使用对象标记渲染图像/ 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文件中，我<?xml-stylesheet type="text/css" href="../css/styles.css"?>刚刚添加了

styles.css已添加到页面。

谢谢！

Answer 1

如果您使用该方法使用 SVG，则无法直接修改填充<object>。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）使用过滤CSS属性

您可以使用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" />

这里的一个大缺点是，您需要为每种颜色（使用 this）计算它，并且不会让它显而易见它是如何工作的。此外，它不适用于具有多种颜色的 SVG。

Answer 2

据我所知，SVG-CSS 中的颜色应该用于stroke边框和fill背景：

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