通过颜色选择器更改svg填充颜色

Question

我有以下问题。 是否可以使用选色器更改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>

Answer 1

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

通过颜色选择器更改svg填充颜色

问题描述

1 个解决方案

解决方案1
0 2018-06-20 21:46:44

通过颜色选择器更改svg填充颜色

问题描述

1 个解决方案

解决方案1 0 2018-06-20 21:46:44

解决方案1
0 2018-06-20 21:46:44