使用動態創建的SVG作爲選項標籤的背景圖片

Question

我試圖對選擇輸入中包含的選項標籤進行樣式設置。我想做一個「圖例選擇」所以我有一個顏色與選擇輸入中可用的每個類別相關聯。

現在，我改變了背景顏色，但是它會使文本的閱讀效果很差，這取決於圖例顏色的深度。

所以我想知道我是否可以即時創建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/

Answer 1

你不能可靠風格選擇元素，即使使用簡單的CSS。

您應該可以使用其中一個可用的自定義選擇菜單UI插件。例如，jQuery有一些。