Change svg fill color

Hello experts,

I want to change svg fill color after click (it shloud be active state for the link- classic thing). How to do that with jQuery ?

http://codepen.io/Fajer39Tests/pen/NGrEam this is the codepen with HTML and bellow is actual svg content for you to understand how it looks like.

Thank You.
LVL 1
Fajer39Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

gheistCommented:
SVG is XML, so DOM applies to it.
https://api.jquery.com/category/manipulation/
0
David S.Commented:
I'm not aware of a way to do it when loading the SVG via an <img> element. I recommend using an <object> element, although an alternative would be to embed the SVG markup directly within the HTML.

When using an <object>, you add a (JS) script within the SVG, containing a "message" event handler to make the change when postMessage is called in the parent page. You would add a "click" handler to the link to call postMessage. One unintuitive thing is that you need to absolutely position an invisible element (or pseudo-element) fully overlapping the <object> element or else clicks on the link won't register in many browsers.

P.S. You don't need the doctype or the XML prolog for SVG.
0
Slick812Commented:
greetings Fajer39, , Although the elements of an SVG image can have influences by "style" in a CSS manner. The SVG drawing in the screen is done by VECTOR drawing, so you are far better to use the SVG "stroke" and "fill" definitions like this -  

<g id="_479146752">
   <polygon id="plg1" fill="#a0ffa0" stroke="#dd0000" points="0,0 130,50 130,50 0,50 "/>
   <path id="path1" stroke="none" fill="#a00000" d="M130 50l-130 -50 130 0 0 50zm-65 -25m0 -25m65 25"/>
</g>

and ALSO you do NOT need to type in half as much code with the <style> and the other unnessary styling.

Now for the Dynamic Change for SGV images in javascript.
to change the stroke or fill color, you do NOT need jquery, you can do it like below -
<script>/* <![CDATA[ */

function changePolyColor() {
   var poly1 = document.getElementById("plg1");
   poly1.setAttribute('fill', '#d8a3ca');
}
/* ]]> */</script>

Open in new window


be sure to have the correct ID in the SVG element you need to change.

ask questions if you need more info.

//////////
also with the super simple drawing you use, , you do not need all of that junk in the SVG definition -

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="130px" height="50px" version="1.1" preserveAspectRatio="none" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 130 50"
 xmlns:xlink="http://www.w3.org/1999/xlink">

your fill-rule, and others are useless in your simple drawing mechanics

      below is an example of one that I used, BUT it is NOT for your use in this, it just shows the useful definitions -

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgRoot" width="100%" height="100%" viewBox="0 0 600 490" version="1.1">
1
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Slick812Commented:
on review of your code, you do not have an ID for the <img> of the triangleBgTab-left.svg   src. .

depending on the browser (IE is the worst) and version, you my have to get the <img> first

<img id="svg1" src="/images/triangleBgTab-left.svg" alt="triangleBg"/>

<script>/* <![CDATA[ */

function changePolyColor() {
   var img1 = document.getElementById("svg1");
   var poly1 = img1.getElementById("plg1");
   poly1.setAttribute('fill', '#d8a3ca');
}
/* ]]> */</script>

Open in new window

1
Fajer39Author Commented:
slick812- Thank You very much for your great answer. I will leave this Q open for a while because I have to finish other things before I will get to that svg color changing. I will try to do that ASAP and then let you know if it worked. Thanks.
0
Slick812Commented:
Since you are learning about the SVG, I went and tried my code in firefox desktop, and it did not work, because I did not take into your question that the svg XML image was loaded as a HTML <img> element, which as Kravimir has pointed out above removes the SVG image XML from the parent document DOM access and javascript. Since your svg is just two triangles, and you need javascript access, you can just write the <svg> element into the page HTML, and this will allow javascript to work on it's elements.

Below is HTML page code that works for me -
<!doctype html><html><head><title>Change SVG by Javascript</title>
<style>
body {font-family: arial; background: #efe;}

.but1{margin:0.9em 1.2em;}
</style>
<script>/* <![CDATA[ */

var svgDoc='a', cfill=1;

function changeSVG(clr) {
cfill("#00ee00");
svgDoc.getElementById("poly1").setAttribute('fill', "#0044b8");
}
/* ]]> */</script>
</head>
<body><h3 style="text-align: center; color: #c9c;">Change SVG by Javascript</h3>
<p style="width: 130px; height: 50px; background: #666;">
<button class="but1" onclick="changeSVG('#abcdef')"> Change SVG </button></p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  id="svgRoot" width="130px" height="50px" 
  viewBox="0 0 130 50" version="1.1" onload="initJS(evt)">
 <script type="text/ecmascript"><![CDATA[
 
 var doc = 0;
 
 function changeFill(clr) {
var ph = doc.getElementById("path1");
   ph.setAttribute('fill', clr);
}
 
 function initJS(evt){
    var tg = evt.target;
    doc = tg.ownerDocument;
     if (parent.svgDoc) {
       var pl = doc.getElementById("poly1");
       pl.setAttribute('fill', '#aa6655');
       parent.svgDoc = doc;
       parent.cfill = changeFill;
       }
  }

 ]]></script>
<polygon id="poly1" stroke="#a0b000" fill="none" onclick="changeFill('#0000cc')" points="0,0 130,50 130,50 0,50 "/>
<path id= "path1" fill="#4485F5" d="M130 50l-130 -50 130 0 0 50zm-65 -25m0 -25m65 25"/>

</svg>

</p>
</body></html>

Open in new window


I left out the unneeded svg elements like <style> and the groups like <g id="_479146752">   , , and added an onclick event to the <polygon> draw element, just to show you how that can work.

SVG images can be useful, because most all current browsers now support them, , but they have a structure and formula drawn elements that you may need to learn more about. But for this simple drawing operation, a HTML <canvas> element might work as well, and you have the javascript access for that.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Fajer39Author Commented:
Thank you all very much, especially slick, works great. Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.