SVG-继承多种颜色 [英] SVG - inherit multiple colors

问题描述

我在下面有此符号及其用途.我希望在<use>的类更改为活动"时，更改窗口的颜色.

I have this symbol and the use below. I want the color of windows to change when that <use> has its class changed to "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>

用途:

<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".在这种情况下，无需使用<symbol>

To draw the window I'm using a rect id="w". In this case there is no need to use a <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>

这篇关于SVG-继承多种颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！