Question

我制作了一个颜色选择器，我希望用户更改颜色通过将所选颜色拖动到SVG元素来获取我的SVG元素。 - 是有可能吗？

Answer 1

$('#colorSelector').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
    $(colpkr).fadeIn(500);
    return false;
},
onHide: function (colpkr) {
    $(colpkr).fadeOut(500);
    return false;
},
onChange: function (hsb, hex, rgb) {
// here you can change your SVG style 
    $('#colorSelector div').css('backgroundColor', '#' + hex);
}});

并链接COLOR PICKER - JQUERY PLUGIN

Answer 2

以下是使用jquery更改SVG颜色的HTML5输入颜色选择器的示例：

HTML SVG：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 150 150" style="enable-background:new 0 0 150 149.7;" xml:space="preserve" height="200px" width="200px">
<path class="shirt-darker" d="M72.2,81.1C32.3,81.1,0,111.8,0,149.7h144.4C144.4,111.8,112.1,81.1,72.2,81.1z"/>
<path class="shirt-darker" d="M77.8,81.1c-39.9,0-72.2,30.7-72.2,68.6H150C150,111.8,117.7,81.1,77.8,81.1z"/>
<path class="shirt-lighter" d="M147.4,149.7c0-0.1,0-0.1,0-0.2c0-37.9-32.3-68.6-72.2-68.6S3,111.7,3,149.6c0,0.1,0,0.1,0,0.2H147.4z"/>
<polygon class="tie-darker" points="83.9,90 76.4,102.3 68.9,90 "/>
<polygon class="tie-darker" points="83.9,139.4 76.4,149.1 68.9,139.4 "/>
<polygon class="tie-darker" points="68.9,139.4 76.4,97.4 83.9,139.4 "/>
<polygon class="tie-lighter" points="82.8,90 75.3,102.3 67.8,90 "/>
<polygon class="tie-lighter" points="82.8,139.4 75.3,147.7 67.8,139.4 "/>
<polygon class="tie-lighter" points="67.8,139.4 75.3,97.4 82.8,139.4 "/>
<ellipse class="face-darker" cx="75.2" cy="49.1" rx="37.8" ry="42"/>
<ellipse class="face-lighter" cx="74.3" cy="48.1" rx="37" ry="41"/>
<path class="hair-darker" d="M77.1,1C56.9,1,40.6,7.9,40.6,16.3c0,0,0,0,0,0c-0.1,0-0.2,0-0.3,0c-5.5,0-10,8.4-10,18.8
    c0,10.4,4.5,18.8,10,18.8c5.5,0,10-8.4,10-18.8c0-3.3-0.4-6.3-1.2-9c6.7,3.4,16.8,5.5,28,5.5c20.1,0,36.5-6.8,36.5-15.3
    C113.5,7.9,97.2,1,77.1,1z"/>
<path class="hair-lighter" d="M76-0.3C55.9-0.3,39.6,6.6,39.6,15c0,0,0,0,0,0c-0.1,0-0.2,0-0.3,0c-5.5,0-10,8.4-10,18.8
    c0,10.4,4.5,18.8,10,18.8c5.5,0,10-8.4,10-18.8c0-3.3-0.4-6.3-1.2-9c6.7,3.4,16.8,5.5,28,5.5c20.1,0,36.5-6.8,36.5-15.3
    C112.5,6.6,96.2-0.3,76-0.3z"/>
</svg>

HTML输入：

<input id="hair_color" type="color" value="#BE1E2D">

CSS：

.shirt-darker{fill:#2385BD;}
.shirt-lighter{fill:#3B96D2;}
.tie-darker{fill:#89539A;}
.tie-lighter{fill:#9D68AC;}
.face-darker{fill:#E8CBB4;}
.face-lighter{fill:#FEE3CC;}
.hair-darker{fill:#9E2131;}
.hair-lighter{fill:#BE1E2D;}

JQuery的：

$('input#hair_color').change(function(){
    var colored = $(this).val();
    $('.hair-lighter').css({ fill: colored });
});

您可以在此处查看演示：http://jsfiddle.net/nozola/j93asgt2/1/

如何通过jQuery更改SVG元素的颜色（拖动所选颜色）

2 个答案: