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>

他的颜色是“红色”＆amp;如你所见，“蓝色”。如何使用来自patternAColor＆amp;的值更改填充颜色.st0（patternAColor = #ffff）和.st1（patternBColor =＃000） patternBColor。

我做错了什么？

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

一般来说，尝试设置颜色的方式是正确的。

您可以在下一个示例中看到：

＆＃13;

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

＆＃13;

body{background-color:#3a3a39;}

＆＃13;

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

＆＃13;

问题在于load函数是异步的，因此设置颜色的代码部分将找不到相关元素（因为它们不存在尚未。
您可以做的是将相关代码放在complete函数中，这将确保此代码仅在加载完成后 AFTER 运行：

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;来保存范围。

如何更改由jquery加载的svg填充颜色

1 个答案: