我制作了一个colorpicker,并且我希望用户通过将所选颜色拖动到SVG元素来更改我的SVG元素的 的颜色。 - 是 有可能吗?如何通过jQuery更改SVG元素的颜色(拖动选中的颜色)
2
A
回答
0
$('#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);
}});
0
这里是使用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/
相关问题
- 1. 通过颜色选项更改颜色
- 2. 如何通过JQuery更改CSS中的伪元素的颜色?
- 3. 更改部分SVG元素的颜色
- 4. 更改SVG颜色
- 5. 更改通过CSS SVG色彩,SVG颜色不会改变
- 6. 想不通的SVG元素的颜色
- 7. 如何更改MFMessageComposeViewController元素的颜色?
- 8. 如何通过元素的宽度更改背景颜色?
- 9. 如何更改svg的颜色?
- 10. 如何更改SVG的路径颜色?
- 11. 动态更改元素li的颜色不会更改子弹点的颜色
- 12. 如何通过css改变单色.svg文件的颜色?
- 13. 将颜色更改为所选元素
- 14. 如何更改元素样式颜色
- 15. 更改svg对象颜色?
- 16. 如何动态更改GTK中SVG图像中元素的颜色?
- 17. 更改任何svg文件上所有元素的颜色
- 18. 更改SVG文本元素中单个字符的颜色
- 19. 更改svg元素中的图像颜色
- 20. 更改组中其他svg元素的颜色
- 21. Android:如何更改DatePicker元素中选定日期的颜色?
- 22. jQuery在更改时动态更改颜色/背景颜色
- 23. 我无法更改SVG中的颜色
- 24. jquery移动更改复选框颜色
- 25. 更改像素的颜色
- 26. 如何通过点击按钮来改变SVG元素的颜色?
- 27. 通过命令行更改svg文件中的颜色(inkscape)
- 28. 更改元素的颜色Chrome扩展
- 29. 更改UserControl元素的颜色
- 30. 更改每n元素的颜色
笏HV没有做代码? –
以及与asp.net相关的问题是什么方式? OO –