SVG -继承多种颜色

Question

我有这个符号和下面的用法。当<use>将其类更改为"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>

The use:

<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>

Answer 1

为了绘制窗口，我使用了一个rect id="w“。在这种情况下，不需要使用<symbol>

​

<svg version="1.1" id="Lib_buildings" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 144.6 117.1" style="enable-background:new 0 0 144.6 117.1;" xml:space="preserve">

  <style type="text/css">

    .building{fill:black;}
    .window{fill:#FFFFFF;}
    
    use{fill:#333}

    .active.r1 use{
        fill: green
    }

    .active.r2 use{
        fill: blue
    }

    .active.r3 use{
        fill: red
    }
  </style>
<defs>
  <rect id="w" width="15.7" height="15.7"  />
</defs>
<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"/>
        
<g class="r1 active">   
    <use xlink:href="#w" x="52" y="13.7" />
    <use xlink:href="#w" x="76.6" y="13.7" />
</g>
<g class="r2">   
    <use xlink:href="#w" x="52" y="38.7" />
    <use xlink:href="#w" x="76.6" y="38.7" />
</g>    
<g class="r3">   
    <use xlink:href="#w" x="52" y="63.7" />
    <use xlink:href="#w" x="76.6" y="63.7" />
</g>
</g>
</svg>

​