如何通過jQuery更改SVG元素的顏色（拖動選中的顏色）

Question

我製作了一個colorpicker，並且我希望用戶通過將所選顏色拖動到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/