title: How to change fill color of SVG on click when it's used as a background image?
body: <p><a href="http://codepen.io/leongaban/pen/EChLK" rel="nofollow">http://codepen.io/leongaban/pen/EChLK</a></p>
  
  <p>So unique problem here, not sure how to target and change the fill color of my SVG when it's used as a <a href="http://leongaban.com/_codepen/svg/ico_my_phone.svg" rel="nofollow">background image</a>. In my case here swapping the class myGreen to myGray on click.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="icon_phone"&gt;Phone&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#icon_phone {
      padding-left: 15px;
      height: 30px;
      font-family: Arial;
      background: url('http://leongaban.com/_codepen/svg/ico_my_phone.svg') no-repeat;
      background-size:10px 20px;
      cursor: pointer;
  }
  </code></pre>
  
  <p>current jQuery</p>
  
  <pre><code>$("#icon_phone").unbind('click').bind('click', function () {
      //$(this).css('background', 'none');
  });
  </code></pre>
  
  <p>The SVG code created by Illustrator</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="15px" height="28px" viewBox="0 0 15 28" enable-background="new 0 0 15 28" xml:space="preserve"&gt;
  
   &lt;style type="text/css" &gt;
    &lt;![CDATA[
  
      path.myGreen {
         fill: #39B54A;
      }
      path.myGray {
          fill: #e2e2e2;
      }
  
    ]]&gt;
  &lt;/style&gt;
  
  &lt;path class="myGreen" d="M12.861,0H2.144C0.965,0,0,1.03,0,2.287v22.556c0,1.259,0.965,2.287,2.144,2.287h10.717
  c1.179,0,2.144-1.029,2.144-2.287V2.287C15.005,1.03,14.04,0,12.861,0z M5.721,2.137h3.572c0.236,0,0.305,0.537,0.305,0.79
  c0,0.253-0.069,0.639-0.305,0.639H5.721c-0.236,0-0.206-0.386-0.206-0.639C5.515,2.675,5.485,2.137,5.721,2.137z M7.52,26.16
  c-0.711,0-1.287-0.614-1.287-1.373c0-0.758,0.576-1.373,1.287-1.373c0.711,0,1.287,0.615,1.287,1.373
  C8.808,25.546,8.231,26.16,7.52,26.16z M13.578,22.139H1.434V4.995h12.144V22.139z"/&gt;
  </code></pre>
  
  <p></p>
  
  <p>I found out how to add classes into the svg file here:
  <a href="http://tutorials.jenkov.com/svg/svg-and-css.html" rel="nofollow">http://tutorials.jenkov.com/svg/svg-and-css.html</a></p>