1

http://codepen.io/leongaban/pen/EChLK

So unique problem here, not sure how to target and change the fill color of my SVG when it's used as a background image. In my case here swapping the class myGreen to myGray on click.

html

<div id="icon_phone">Phone</div>

CSS

#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;
}

current jQuery

$("#icon_phone").unbind('click').bind('click', function () {
    //$(this).css('background', 'none');
});

The SVG code created by Illustrator

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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">

 <style type="text/css" >
  <![CDATA[

    path.myGreen {
       fill: #39B54A;
    }
    path.myGray {
        fill: #e2e2e2;
    }

  ]]>
</style>

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

I found out how to add classes into the svg file here: http://tutorials.jenkov.com/svg/svg-and-css.html

Leon Gaban
  • 36,509
  • 115
  • 332
  • 529

2 Answers2

1

Create a grey background image file and onclick change the background URL to point to the alternate image.

Images cannot be manipulated by the host document. Think of SVG when used as an image as being like a scalable bitmap.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Ah thanks exact answer... I'm building a web mobile app to keeping down the number of files and requests are crucial. I found some other solutions to changing the SVG's fill color here http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement?codekitCB=404756038.416562 and here http://stackoverflow.com/questions/5638431/modify-a-svg-file-using-jquery?lq=1 However I will have to use the SVG inside of an img tag inside of as a background image. – Leon Gaban Oct 29 '13 at 16:32
  • image tags have the same restrictions as background images. You'd need an ` – Robert Longson Oct 29 '13 at 16:43
0

Or if you want to do it in the browser try :

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<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="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

Fiddle Here

tnt-rox
  • 5,400
  • 2
  • 38
  • 52