How to access an svg inner id and have CSS change the fill color of that id?

Question

This is my svg file

next.svg

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
 <g class="next">
  <g>
   <polygon fill="#FFD92D" class="inner" points="20.587,5.055 78.706,48 20.587,90.945"/>
   <path fill="#FF9900" class="outer" d="M21.623,7.11L76.961,48L21.623,88.89V7.11 M19.55,3v90l60.9-45L19.55,3L19.55,3z"/>
  </g>
 </g>
</svg>

This is my basic html to display the svg

<div>
    <object id="objsvg" class="svgbtn" type="image/svg+xml" data="next.svg" onclick="changeSVGColor()"></object>    
</div>

This is my style.css file

.inner {
  fill: #000000;
}
.inner-new-color {
    fill: #ff00ff;
}

This is my basic jQuery to change the color of .inner in svg file. What am I doing wrong?

It does not even seem like the #objsvg selector has the inner class at all, since $("#objsvg").hasClass("inner")); returns false.

function changeSVGColor() {
    $("#objsvg").removeClass("inner");
    $("#objsvg").addClass("inner-new-color");
}

Check my [SVG solution](http://stackoverflow.com/questions/25002310/best-practice-for-using-svg-images/25032941#25032941) on embedded and reuse that coding. Then update SVG part and tweak the coding. — Alvin K., May 02 '16 at 19:44

chrismillah · Answer 1 · 2016-05-02T20:15:48.397

0

The ID will not work on the parent or 'object', you will need to open your SVG with something like sublime text, and add an id="objsvg" for whatever path you are trying to manipulate.

e.g..

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
 <g class="next">
  <g>
   <polygon fill="#FFD92D" class="inner" points="20.587,5.055 78.706,48 20.587,90.945"/>
   <path id="objsvg" fill="#FF9900" class="outer" d="M21.623,7.11L76.961,48L21.623,88.89V7.11 M19.55,3v90l60.9-45L19.55,3L19.55,3z"/>
  </g>
 </g>
</svg>

see updated js fiddle, pop open your console too jsfiddle.net/xaLkvc27/12

edited May 02 '16 at 20:15

answered May 02 '16 at 18:38

chrismillah

3,704
2
14
20

I added the id="objsvg" to the svg file, but $("#objsvg").hasClass("outer")); returns false when running. Is there a way to access the svg element somehow using jQuery? This $("#objsvg") I believe it getting me access to the object, but I am interested in getting the svg inside of the object using jQuery. – user1729409 May 02 '16 at 18:52
If you were getting false, make sure you added that ID to your HTML or SVG markup, I have updated the jsfiddle, This should make this a bit more clear, lemme know if you have more questions https://jsfiddle.net/xaLkvc27/12/ – chrismillah May 02 '16 at 19:48
Hi, thanks for your comment and fiddle. I am trying to access the svg using the – user1729409 May 02 '16 at 20:38

score 0 · Accepted Answer · answered May 02 '16 at 19:04

0

Select the portion you want to change by class. $(".inner")

$(".inner").removeClass("inner").addClass("inner-new-color");

Example Fiddle

answered May 02 '16 at 19:04

Hoopson2

126
6

Hi, thanks for the Fiddle. Is there a way to do this using the – user1729409 May 02 '16 at 20:35
I am not entirely positive on how to do it from an external svg file. You may want to check out [this answer](http://stackoverflow.com/a/31129363/5774702) from another thread. He gives a few options and links to examples. Hopefully something there can help you. – Hoopson2 May 02 '16 at 21:07
Thanks for the help. I am going to accept this answer as it has gotten me the closest to solving this. – user1729409 May 02 '16 at 22:28

How to access an svg inner id and have CSS change the fill color of that id?

2 Answers2