SVG-继承多种颜色

我有这个符号和下面的用法。当

的类更改为“active”时，我希望窗口的颜色更改

符号

<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        id="buildings" x="0px" y="0px" viewBox="0 0 144.6 117.1">
  <style type="text/css">
    #buildings .building{fill:black;}
    #buildings .window{fill:#FFFFFF;}

    use.active row-1{
        fill: green
    }

    use.active row-2{
        fill: blue
    }

    use.active row-3{
        fill: red
    }
  </style>
  <g>
    <polygon class="building" points="39.2,0 105.6,0 105.6,117.1 80,117.1 80,91.6 64.6,91.6 64.6,117.1 39.2,117.1  "></polygon>
    <rect class="window row-1" x="52" y="13.7" transform="matrix(-1 -4.485890e-11 4.485890e-11 -1 119.6986 43.0321)" width="15.7" height="15.7"></rect>
    <rect class="window row-1" x="76.6" y="13.7" transform="matrix(-1 -4.509072e-11 4.509072e-11 -1 168.9068 43.0321)" width="15.7" height="15.7"></rect>
    <rect class="window row-2" x="52" y="38.7" transform="matrix(-1 -4.485890e-11 4.485890e-11 -1 119.6986 93.0374)" width="15.7" height="15.7"></rect>
    <rect class="window row-2" x="76.6" y="38.7" transform="matrix(-1 -4.509072e-11 4.509072e-11 -1 168.9068 93.0374)" width="15.7" height="15.7"></rect>
    <rect class="window row-3" x="52" y="63.7" transform="matrix(-1 -4.485890e-11 4.485890e-11 -1 119.6986 143.0426)" width="15.7" height="15.7"></rect>
    <rect class="window row-3" x="76.6" y="63.7" transform="matrix(-1 -4.497481e-11 4.497481e-11 -1 168.9068 143.0426)" width="15.7" height="15.7"></rect>
  </g>
</symbol>

#建筑物.建筑物{填充：黑色；}
#建筑物.窗户{fill:#FFFFFF；}
使用活动行-1{
填充：绿色
}
使用激活的第2行{
填充：蓝色
}
使用激活的第3行{
填充：红色
}

用法：

<use id="svg_2" xlink:href="#buildings" class="default-state" transform="matrix(0.4141498627386966,0,0,0.3245901632992947,-101.8071378628083,-68.52458715438843) " y="554.9999917298557" x="249.99999627470976"  ></use>

---

要绘制窗口，我正在使用rect id=“w”。在这种情况下，不需要使用

.建筑物{填充：黑色；}
.window{fill:#FFFFFF；}
使用{fill:#333}
.active.r1使用{
填充：绿色
}
.active.r2使用{
填充：蓝色
}
.active.r3使用{
填充：红色
}