样式相同的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>标签定位为操作fillCSS中SVG的属性存在问题。

将.red选择器从样式表上移开，然后将.svg-circle选择器留在原处，可以按预期工作-将圆圈变成红色，但我希望页面上可以有几种不同的颜色。

任何帮助，不胜感激！

如果我不能破解，我可能会诉诸于老式的.png精灵表。

Answer 1

请参阅https://css-tricks.com/using-svg/，“使用 SVG 作为<object>” 部分：

[...] 如果你想让 CSS 的东西工作，你不能使用外部样式表或<style>在文档上，你需要使用<style>SVG 文件本身内部的元素。

因此，似乎不可能object通过 CSS 从对象的“外部”设置SVG 元素的样式。