在CSS中以不同方式为图像的多个部分着色 [英] Color multiple parts of an image differently in CSS

问题描述

我遇到类似于如何更改颜色的问题使用jquery的图像，但是有一双鞋。问题是鞋子有多个部分（鞋跟，鞋跟，鞋底......），我需要让用户改变每个部分的颜色。我正在使用jQuery或一些基于Javascript的框架。

I have a problem similar to How to change color of an image using jquery, but with a shoe. The problem is the shoe has multiple parts (heel, front, sole..) and i need to let the user change the color of each part. I'm working in jQuery or some Javascript-based framework.

最好的办法是什么？
有没有办法定义图像中要独立着色的区域？
或者应该将鞋子分成多个图像并将它们与CSS一起使用？ （我不喜欢这个想法......）或者......以上都没有？ ：）

What's the best approach for this? Is there a way of defining areas in an image to be colored independently? Or should divide the shoe in multiple images and get them together with CSS? (I don't like this idea...) Or.. none of the above? :)

推荐答案

RaphaelJS 值得一看这个解决方案。看看他们的世界地图示例

RaphaelJS is worth a look for that solution. Look at their World Map example

事实上，如果您有预计算的平均值或修复您的鞋子部件并在其上设置坐标，您将能够在鞋子上方绘制和填充SVG多边形。困难的部分是知道或确定轮廓路径的坐标...

In fact, if you have a mean of precompute or fix your shoe part and set coordinates on it, you'll be able to draw and fill SVG polygons above the shoe. The difficult part is to know or determine the contour path's coordinates...

此网站使用RaphaelJS作为其重叠

This site is using RaphaelJS for its overlays

这篇关于在CSS中以不同方式为图像的多个部分着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！