svg - 使用 css 更改 svg 颜色并加载外部精灵答案

【问题标题】：svg - change svg color with css and load external spritesvg - 使用 css 更改 svg 颜色并加载外部精灵
【发布时间】：2017-05-19 06:41:41
【问题描述】：

我这里有一个笨蛋 - https://plnkr.co/edit/yQe0otxwy6GEepITLnJD?p=preview

简单的问题，我正在尝试使用 css 更改 svg sprite 中 svg 的颜色。

我已经尝试过使用 fill 和 currentColor，就像这里解释的那样 - https://css-tricks.com/cascading-svg-fill-color/

第二个问题是当它是本地文件时我可以加载精灵，但当它是外部文件时我似乎无法加载它。就像第二个不显示的例子一样。

    /* svg{
      color: yellow;
      height: 100px;
      width: 100px;
      fill: currentColor;
    } */

    svg{
      height: 100px;
      width: 100px;
    }

    .svg{
      fill: yellow;
    }

    .star{
      fill: yellow;
    }

    h3 {
      color: blue;
    }
    svg {
      fill: currentColor;
    }

【问题讨论】：

html 文件中的 CSS 不能影响其他文件。不过你自己也发现了。你的问题到底是什么？
抱歉，我的问题是如何使用 css 更改 svg 的颜色
正如罗伯特所说，你不能。您需要有不同的 SVG 精灵，或者将不同的颜色变体添加到您的精灵 SVG。 currentColor 方法适用于“本地”<use>，但仅适用于 Chrome。 plnkr.co/edit/IpdBW31x6nDa2w7pTLxZ?p=preview

标签： css svg

【解决方案1】：

我知道这是一个老问题，但是如果您删除外部 svg 文件中的所有内联样式填充引用，您的 plunker 就可以工作。然后它将继承 CSS 中的填充集。

【讨论】：