svgの塗りつぶし色を変更するにはjquery

Question

私はsvgの塗りつぶし色を位置に読み込んだ後に変更しようとしています。 idが "patterns-bar"の親divがあります。内部には、ベローズjqueryコードを使用してロードされたいくつかのパターンdiv（id = pattern- [n]）があります。

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

例えばパターン 1は自分のコード

とです：

<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> 

あなたが見るように彼の色は "青" & "赤" です。 塗りつぶしの色を変更するにはpatternAColor & patternBColorの値を使用して、.st0（patternAColor =＃fff）と.st1（patternBColor =＃000）を変更します。

私は間違っていますか？

HTMLコード：

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 }); 
    }); 
}); 

Answer 1

一般的に、あなたは色を設定しようとしている方法が正しいです。

あなたは、次の例で見ることができます：

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>

あなたの問題は非同期であるload機能、であるので、色を設定したコードの一部が見つかりません。関連する要素（存在しないため）まだ。
あなたができることはcomplete関数に関連するコードを入力することです

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

をスコープを保存するvar that = this;の使用に注意してください：デは AFTER負荷が行っている実行されます。私のためにいくつかの理由で