CODEWITHSUNDEEP
javascriptjquerycsssvg
Leon Gaban
Leon Gaban

Reputation: 39018

How to change fill color of SVG on click when it's used as a background image?

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

Upvotes: 1

Views: 3572

Answers (2)

tnt-rox
tnt-rox

Reputation: 5548

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

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124049

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.

Upvotes: 1

Related Questions