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

Question

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

简单的问题，我试图改变svg精灵中svg的颜色使用css。

我尝试过使用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;
    }

Answer 1

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