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

Posted 2023-03-28

【中文标题】svg - 使用 css 更改 svg 颜色并加载外部精灵

【英文标题】：svg - change svg color with css and load external sprite

【发布时间】：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

【参考方案1】：

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