以不同方式设置相同 SVG <object> 的样式

Question

新手上路，请多包涵

我想在不同颜色的页面上放置一系列相同的 SVG 文件。我知道在不膨胀代码的情况下将 SVG 放入页面，并且仍然具有外部样式的最佳方法是通过 <object> 标记。

这是我到目前为止所拥有的：

HTML

 <object type="image/svg+xml" data="images/circle.svg" class="object-circle red" >
    <!-- fallback image in CSS -->
</object>

<object type="image/svg+xml" data="images/circle.svg" class="object-circle blue" >
    <!-- fallback image in CSS -->
</object>

CSS

 .object-circle {
    height:16px;
    width:16px;
}

.red .svg-circle {
    fill:#f00;
}
.blue .svg-circle {
    fill:#00f;
}

SVG

 <?xml-stylesheet type="text/css" href="styles.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <style>
      .svg-circle {
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path class="svg-circle" d="M200,398.688A199.552,199. ..."/>
</svg>

这只是行不通。我认为将 <object> 标记用于操纵 CSS 中的 SVG fill 属性存在问题。

从样式表中取出 .red 选择器并保留 .svg-circle 选择器按预期工作 - 将圆圈变成红色，但我希望能够在页面上有几个不同的颜色。

非常感谢任何帮助！

如果我不能破解这个，我可能会求助于老式的 .png 精灵表。