Question

有些日子我试图制作一个功能（没有运气），使用.png和.svg图像的组合创建一个盾牌。我的目标是创建几个改变.svg图案颜色的图像。

首次尝试使用{img}标记来实现这一目标。然后我发现使用{img}无法发生。所以我尝试了{object}标签..

这是我的svg图像的样式，.st0 {fill：＃F3082F;}。st1 {fill：＃0A48F2;}并喜欢将其更改为st0 = #fff，st1 =＃000

我是什么？做完了：

body { background-color:#282828;}
#tbl {display: table;margin:0 0 0 540px;}
.tbl-row {display: table-row;}
.shield {display: table-cell;}

<br>
<div style="position: absolute;"></div>
<div id="tbl" style="position: absolute;"> 
    <div class="tbl-row">
        <div class="myshield" style="margin-left:0px;"></div>
    </div>
</div>

然后创建了这个函数：

function drawshield(elmClass, shield, shieldPattern, shieldPatternAColor, shieldPatternBColor) {
    var Shield = '<div class="shieldContainer" style="position:relative;width:230px;height:269px;">'+
        '<div class="shieldImage" style="position: absolute;">';    

    // Add shield image
    Shield += '<img src="http://imgh.us/'+shield+'.png" style="position:absolute;z-index:100;">';
    // Add emblem pattern
var svgpath = 'http://imgh.us/'+shield+'-'+shieldPattern+'.svg';
    Shield += '<object id="myShieldObj" data="'+svgpath+'" type="image/svg+xml" height="269px" width="229px"></object>';
/* What code i must use here to change style colors ? */        
    Shield += ' </div>'+
    '</div>';
    $("." + elmClass).append(Shield);

}

并致电 drawshield （＆＃39; myshield＆＃39;，＆＃39; shield-1＆＃39;，＆＃39; pattern-1＆＃39;，＆＃39; fff＆＃39;，＆＃39; 000＆＃39;）;创建图像。

问题在于没有发生任何颜色变化...图像以他自己的颜色而不是新颜色显示。我尝试了很多东西但没有任何作用。无论如何将svg添加为内联代码（如php file_get_contents（＆＃34; xxxxx.svg＆＃34;））然后使用一些字符串函数更改 Shield var填充颜色？或者在功能中有没有其他方法可以做到这一点？

我也测试了这段代码，但似乎确实有效。

$("#myShieldObj"). load (function () {
      $("#myShieldObj").find(".st0").css({ fill: '#fff' });
      $("#myShieldObj").find(".st1").css({ fill: '#000' });
});

Samlpe代码存在于codepen

中

有什么建议吗？

更改svg填充颜色

0 个答案: