CODEWITHSUNDEEP
jquerysvg
NickD
NickD

Reputation: 141

how to change svg fill color loaded by jquery

I am trying to change the fill color of an svg after loading into position. There is a parent div with id "patterns-bar". Inside there are some pattern divs (id=pattern-[n]) loaded using the bellow jquery code.

$(this).load('shields/'+shield+'-patterns/'+shield+'-'+currPattern+'.svg');

For example Pattern 1 is

and his code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 269"><style type="text/css">.st0{fill:#F3082F;}.st1{fill:#0A48F2;}</style><path class="st0" d="M5 125c0-38.7 0-77.5-0.1-116.2 0-3.1 0.7-3.8 3.8-3.8C44.8 5.1 80.9 5 117 5c0 40 0 80 0.1 120.1C79.7 125 42.4 125 5 125z"/><path class="st1" d="M117.1 125.1c0-40 0-80-0.1-120.1 35.5 0 71 0 106.5-0.1 3 0 3.6 0.6 3.6 3.6C226.9 47.3 227 86.2 227 125c-36.7 0-73.4 0-110.1-0.1L117.1 125.1z"/><path class="st1" d="M5 125c37.4 0 74.7 0 112.1 0.1 0 0-0.1-0.1-0.1-0.1 0 47 0 94 0.1 141 -1.3 0-2.7 0-4 0 -2.2-3.4-5-6.2-8.1-8.8 -8.8-7.3-19.1-11.8-29.5-16.1 -14-5.8-28.5-10.7-41.9-18 -13.2-7.2-22.7-17.3-26.2-32.4 -0.9-3.9-0.5-8-2.3-11.7C5 161 5 143 5 125z"/><path class="st0" d="M117 266c0-47 0-94-0.1-141 36.7 0 73.4 0 110.1 0.1 0 18.7 0 37.3 0 56 -1.6 0.6-0.8 1.9-1 3 -1.3 9.9-4.5 19-11.5 26.5 -9.2 9.8-20.9 15.7-33.1 20.7 -22.5 9.2-45.5 17.3-63.4 34.8C117.7 266 117.3 266 117 266z"/></svg>

His colors are "red" & "blue" as you see. How to change fill colors .st0 (patternAColor=#fff) and .st1 (patternBColor=#000 ) using values from patternAColor & patternBColor.

What i am doing wrong?

Html code:

body{background-color:#3a3a39;}
<div id="patterns-bar">
    <div id="pattern-1"></div>
    <div id="pattern-2"></div>
    <div id="pattern-3"></div>
    <div id="pattern-4"></div>
    <div id="pattern-5"></div>
    <div id="pattern-6"></div>
    <div id="pattern-7"></div>
    <div id="pattern-8"></div>
    <div id="pattern-9"></div>
    <div id="pattern-10"></div>
</div>

jquery:

jQuery(function($) {
  var shield = 'shield-1';
  var patternAColor ='fff';
  var patternBColor ='000';

  // Load patterns
  $("[id^='pattern-']").each(function(){
      var currPattern = $(this).attr('id');       
      $(this).load('shields/'+shield+'-patterns/'+shield+'-'+currPattern+'.svg');

      $(this).find(".st0").css({ fill: '#'+patternAColor });
      $(this).find(".st1").css({ fill: '#'+patternBColor });
  }); 
});

Upvotes: 2

Views: 17554

Answers (1)

Dekel
Dekel

Reputation: 62676

In general the way you are trying to set the colors is correct.

You can see in the next example:

jQuery(function($) {
  var patternAColor ='fff';
  var patternBColor ='000';

  // Load patterns
  $("svg").each(function(){
    $(this).find(".st0").css({ fill: '#'+patternAColor });
    $(this).find(".st1").css({ fill: '#'+patternBColor });
  }); 
});
body{background-color:#3a3a39;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 150px; height: 150px;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 269"><style type="text/css">.st0{fill:#F3082F;}.st1{fill:#0A48F2;}</style><path class="st0" d="M5 125c0-38.7 0-77.5-0.1-116.2 0-3.1 0.7-3.8 3.8-3.8C44.8 5.1 80.9 5 117 5c0 40 0 80 0.1 120.1C79.7 125 42.4 125 5 125z"/><path class="st1" d="M117.1 125.1c0-40 0-80-0.1-120.1 35.5 0 71 0 106.5-0.1 3 0 3.6 0.6 3.6 3.6C226.9 47.3 227 86.2 227 125c-36.7 0-73.4 0-110.1-0.1L117.1 125.1z"/><path class="st1" d="M5 125c37.4 0 74.7 0 112.1 0.1 0 0-0.1-0.1-0.1-0.1 0 47 0 94 0.1 141 -1.3 0-2.7 0-4 0 -2.2-3.4-5-6.2-8.1-8.8 -8.8-7.3-19.1-11.8-29.5-16.1 -14-5.8-28.5-10.7-41.9-18 -13.2-7.2-22.7-17.3-26.2-32.4 -0.9-3.9-0.5-8-2.3-11.7C5 161 5 143 5 125z"/><path class="st0" d="M117 266c0-47 0-94-0.1-141 36.7 0 73.4 0 110.1 0.1 0 18.7 0 37.3 0 56 -1.6 0.6-0.8 1.9-1 3 -1.3 9.9-4.5 19-11.5 26.5 -9.2 9.8-20.9 15.7-33.1 20.7 -22.5 9.2-45.5 17.3-63.4 34.8C117.7 266 117.3 266 117 266z"/></svg>
</div>

Your problem is with the load function, which is asynchronously, so the part of the code that set the colors will not find the relevant elements (since they are not exists yet.
What you can do is put the relevant code in the complete function, which will make sure this code will run only AFTER the load has done:

var that = this;
$(this).load('shields/'+shield+'-patterns/'+shield+'-'+currPattern+'.svg', function () {
    $(that).find(".st0").css({ fill: '#'+patternAColor });
    $(that).find(".st1").css({ fill: '#'+patternBColor });
});

Note the use of var that = this; to save the scope.

Upvotes: 4

Related Questions