I'm trying to use some css to manipulate elements in a symbol. Specifically hide or display certain elements based an attribute. for example attribute sv_type can be set to top/bottom/left/right and based on that 3 of the for groups are hidden. It all works fine until I try to put it into a symbol and reuse, trying to manipulate each one for each use instance.

I'm looking to do something like

   <use href="#sv" class="sv" sv_type="right"/>

   <use href="#sv" class="sv" sv_type="left"/>

<symbol id="sv">
  <g class="sv" sv_type="top">
         <g orientation="top"/>
         <g orientation="left"/>
         <g orientation="right"/>
         <g orientation="bottom"/>
  </g>
</symbol>

/* hide be defaut */
.sv g[orientation] {
    display:  hidden;
}

/* show the right one */
.sv[sv_type="top"] g[orientation="top"],
.sv[sv_type="right"] g[orientation="right"],
.sv[sv_type="left"] g[orientation="left"],
.sv[sv_type="bottom"] g[orientation="bottom"]
{
    display: inline !important;
}

Any help or insight appreciated! I hope this ok and not too generic an svg/css question...