how to change svg fill color loaded by jquery
<p>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.</p>

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

<p>For example <strong>Pattern</strong> 1 is <a href="https://i.stack.imgur.com/b3USX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b3USX.jpg" alt=""></a></p>

<p>and <strong>his code:</strong></p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 269"&gt;&lt;style type="text/css"&gt;.st0{fill:#F3082F;}.st1{fill:#0A48F2;}&lt;/style&gt;&lt;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"/&gt;&lt;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"/&gt;&lt;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"/&gt;&lt;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"/&gt;&lt;/svg&gt;
</code></pre>

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

<p>What i am doing wrong?</p>

<p><strong>Html code:</strong></p>

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

<p><strong>jquery:</strong></p>

<pre><code>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 });
  }); 
});
</code></pre>