SVG 对象从外部 CSS 更改颜色

Posted 2023-03-28

【中文标题】SVG 对象从外部 CSS 更改颜色

【英文标题】：SVG object change color from external CSS

【发布时间】：2017-09-04 20:10:22

【问题描述】：

我在玩 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 正在添加到页面中。

谢谢！

【参考方案1】：

如果您通过<object> 方法使用SVG，则无法直接修改填充。 SVG 作为文档片段包含在 object 标记中，因此您的属性不会被传递，正如您在 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。

【讨论】：

谢谢，第二个选项有效。只需要找出我需要的颜色的十六进制代码。

【参考方案2】：

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

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

【讨论】：

这对 Firefox 69 没有影响。

【参考方案3】：

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

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

这是一个涵盖所有内容的帖子： https://vecta.io/blog/best-way-to-embed-svg

【参考方案4】：

我知道这是一个老问题了 - 但这是为那些希望用纯 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 的一种非常简单易行的方法 - 我希望有人觉得这很有用！