使用动态创建的SVG作为选项标记的背景图像

时间:2013-05-17 06:00:45

标签: jquery css css3 svg jquery-svg

我正在尝试设置选择输入中包含的选项标签的样式。我想做一个“图例选择”所以我有一个颜色与选择输入中可用的每个类别相关联。

现在,我改变了背景颜色,但是根据图例颜色的深度,它会使文本的读取非常糟糕。

所以我想知道我是否可以动态创建SVG图像,并将其链接为每个选项的背景图像。只是一个简单的彩色正方形或圆形,我会左右对齐,不重复。

我梦想还是可以实现的目标?

BTW:我在我的项目中使用JQuery + D3,以防有用。

编辑: 我找到了以下示例,但它似乎不适用于选项:

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>");

来自:http://jsfiddle.net/estelle/SJjJb/

1 个答案:

答案 0 :(得分:0)

即使使用简单的CSS,也无法确定选择元素的样式。

您应该可以使用其中一个可用的自定义选择菜单UI插件。例如,jQuery有一些。