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-CSS中的颜色对于边框应为stroke，对于背景应为fill：

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

Answer 2

如果您通过 <object> 方法使用 SVG，则无法直接修改填充。 SVG 作为文档片段包含在对象标签内，因此您的属性不会像您在 this image 中看到的那样传递。

但是，有两种方法可以修改外部 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 属性

您可以使用 filter CSS 属性通过一系列操作（亮度、对比度、色调旋转......）来达到任何颜色。有一个现有的 stack overflow discussion。

示例：

.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" />

这里的最大缺点是您需要为每种颜色 (using this) 计算此值，并且无法清楚地了解它的工作原理。此外，它不适用于具有多种颜色的 SVG。

Answer 3

您不能使用外部 CSS 类来设置