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

【问题标题】：Use dynamically created SVG as background image for an option tag使用动态创建的 SVG 作为选项标签的背景图像
【发布时间】：2013-05-21 04:27:13
【问题描述】：

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

现在，我更改了背景颜色，但根据图例颜色的深浅，它会使文本的阅读效果很差。

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

我是在做梦还是可以实现？

顺便说一句：我在我的项目中使用 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/

【问题讨论】：

标签： jquery css svg jquery-svg

【解决方案1】：

即使使用简单的 CSS，您也无法可靠地设置选择元素的样式。

您应该能够使用可用的自定义选择菜单 UI 插件之一来做到这一点。例如有几个用于 jQuery。

【讨论】：