有没有一种方法可以动态更改图标的颜色？

Question

我有一个星形图标。 我想以未知数量的颜色使用此图标。

有时我需要一颗红色的星星，有时需要一颗紫色的星星。

我可以使用Web服务在服务器上动态创建图像。

我很好奇，有什么方法可以控制该图标的颜色而无需为我可能需要的每种颜色显式创建图像？

Answer 1

您应该使用字形文字或其他一些基于图标的字体： http : //twitter.github.com/bootstrap/base-css.html#icons

这是实际中基于图标的字体的示例： http : //css-tricks.com/examples/IconFont/

Answer 2

我可以想到三种方法。

1. 用所需的所有不同颜色创建一个精灵表，并偏移偏移量以更改颜色。 这有点作弊。
2. 使用Canvas动态生成图像（嗯！）
3. 使用SVG，它将通过更改DIV / SPAN上的类来响应CSS更改，类似于更改文本显示

Answer 3

使用SVG图标，您可以做任何您想做的事情:)

这是Raphael JS库的示例： http : //raphaeljs.com/icons/

Answer 4

您只能生成4个星图：1个黑色，1个红色，1个蓝色和1个绿色（如果背景不是白色，也可能是1个白色）。 然后将它们全部堆叠起来并使用其不透明性来获得所需的颜色。