小编Gri*_*mie的帖子

我想在页面上使用不同的颜色显示一系列相同的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的属性存在问题。

将 …