通过colorpicker更改svg填充颜色

时间:2017-12-03 12:58:27

标签: javascript jquery svg

我有以下问题。是否可以使用colorpicker更改svg文件的填充颜色。到目前为止,我已经到了可以改变背景颜色的时刻,但最好是改变图形的颜色,就像它是背景或前景一样。我非常感谢你的帮助,因为我是一个刚刚学习jquery编程但并不了解所有内容的人。在下面我附上我的代码。使用按钮更改放置在女主角中的图片,以便动态更改。再一次,我将非常感谢你的帮助。

<style>
.inner1
{
width: 500px;
height: 500px;
margin:0 auto;
position: absolute;
margin-bottom:0;  
border:solid 2px black;
overflown:none;
}
</style>
<html>
<div id="Image-Holder-fg" class="inner1 "  >  
<img  class="popart1" src ="img/DCIM/Animal/animal5.svg" style="width: 
1425px; height: 1425px;" />
<img  class="popart2" src ="img/DCIM/Animal/animal6.svg" style="width: 
1425px; height: 1425px;" />
<img  class="popart3" src ="img/DCIM/Animal/animal7.svg" style="width: 
1425px; height: 1425px;" />  
<img  class="popart4" src ="img/DCIM/Animal/animal8.svg" style="width: 
1425px; height: 1425px;" />
</div>
<div id="picker-fg"></div>
</html>

<script>
$('#picker-fg').colpick({
    flat:true,
    layout:'hex',
    submit:0,
    colorScheme:'dark',
    onChange:function(hsb,hex,rgb,el,bySetColor) {
    $("#Image-Holder-fg").css('background-color','#'+hex);

    if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
</script>

1 个答案:

答案 0 :(得分:0)

使用SVG内联,这样您可以选择特定的节点并使用JS设置填充。