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 被添加到页面。

谢谢！

原文由 user3861559 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 属性

您可以使用 filter CSS 属性通过一系列操作（亮度、对比度、色调旋转……）来达到任何颜色。有一个关于这个的现有 堆栈溢出讨论。

示例：

 .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。

原文由 Shubham 发布，翻译遵循 CC BY-SA 4.0 许可协议