title: Styling Subclasses in SVG with CSS
body: <p>I'm embedding SVG definitions for common icons we're using throughout our site:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none"&gt;
    &lt;symbol id="icon-1" viewbox="0 0 113.8 113.8"&gt;
      &lt;title&gt;Icon 1&lt;/title&gt;
      &lt;g&gt;
        &lt;circle class="st2 outter-circle" cx="56.9" cy="56.8" r="55" /&gt;
        &lt;line class="st1" x1="56.9" y1="71.5" x2="56.9" y2="86.3" /&gt;
      &lt;/g&gt;
    &lt;/symbol&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>(Truncated that for this example.)</p>
  
  <p>Then I'm including it in my markup as:</p>
  
  <pre><code>&lt;svg viewBox="0 0 100 100" class="campus-icon white five-eighths"&gt;
      &lt;use xlink:href="#icon-1"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The problem I'm running into is choosing a color scheme for the icon by setting a class for the SVG object.</p>
  
  <p>These are the default styles:</p>
  
  <pre><code>.st1 {
      fill:none;
      stroke:#363636;
      stroke-width:0.75;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-miterlimit:10;
  }
  
  .st2 {
      fill:none;
      stroke:#363636;
      stroke-width:2;
      stroke-miterlimit:10;
  }
  </code></pre>
  
  <p>What I tried doing is allowing the class on the SVG object help define the stroke color of the icon:</p>
  
  <pre><code>.campus-icon.white .st1,
  .campus-icon.white .st2 {
    stroke: #FFF;
  }
  </code></pre>
  
  <p>This seems to work in Firefox, but not in Chrome or Safari.</p>
  
  <p>Because my icons have two colors, this is something I really need to figure out (if it's even possible).</p>
  
  <p>From what I can tell Safari and Chrome won't allow me to use a selector on the SVG object followed by a selector within the SVG itself.</p>
  
  <p>To test this theory, I took this working example (<a href="https://stackoverflow.com/questions/40694441/svg-css-hover-styling">SVG CSS Hover Styling</a>) and created a CodePen instance (<a href="http://codepen.io/ericrovtar/pen/ZeZqRE" rel="nofollow noreferrer">http://codepen.io/ericrovtar/pen/ZeZqRE</a>).</p>
  
  <p>Anyone know if there is a way to accomplish this?</p>
  
  <p>Thanks!</p>
  
  <p>-Eric</p>