使用css在页面中设置SVG样式

我在一个文件中有一个svg，它代表一个工作流——即一堆框，框之间有行——所以假设我有四个矩形。

在应用程序中，我有一个模式——我希望根据模式选择适当的矩形。所以我想做一个css，比如：

#workflow rect {background-color:white}
.mode_1 #workflow rect:nth-child(1) {fill:red}
.mode_2 #workflow rect:nth-child(2) {fill:orange}
.mode_3 #workflow rect:nth-child(2) {fill:yellow}

// etc

如果我有内联svg，它就可以正常工作。然而，工作流图是相当复杂和长的。我需要能够在一个单独的文件中存储和编辑它，这样我就可以使用svg编辑器等，但我找不到任何方式从父页面对其进行样式设置。我试过：

<img src="workflow.svg"/>

浏览器根本不认为它是碎片

<object data="workflow.svg"/>

它就像iframe，不响应页面的css

<svg>
    <use xlink:href="workflow.svg#diagram">
</svg>

svg看起来像某种“阴影对象”——但仍然不响应css。我在同一个领域，所以跨网站问题不应该是个问题。

我可以通过使用javascript或使用多个svg文件来获得我想要的效果——但是有没有办法只用css和svg来实现呢？