SVG OPTION元素

Question

我創建了以下svg元素和結構內：

<svg width="135" height="15"> 
    <rect width="15" height="15" fill="#ffffe5" x="0" y="0"></rect> 
    <rect width="15" height="15" fill="#f7fcb9" x="15" y="0"></rect> 
    <rect width="15" height="15" fill="#d9f0a3" x="30" y="0"></rect> 
    <rect width="15" height="15" fill="#addd8e" x="45" y="0"></rect> 
    <rect width="15" height="15" fill="#78c679" x="60" y="0"></rect> 
    <rect width="15" height="15" fill="#41ab5d" x="75" y="0"></rect> 
    <rect width="15" height="15" fill="#238443" x="90" y="0"></rect> 
    <rect width="15" height="15" fill="#006837" x="105" y="0"></rect> 
    <rect width="15" height="15" fill="#004529" x="120" y="0"></rect> 
</svg> 

將會產生小廣場的一排。就像這樣：

到目前爲止，一切正常。

然後我將代碼上方的option爲select下拉內，如下所示：

<select id="data-color-scheme"> 
    <option id="YlGn"> 
     <div> 
      <svg width="135" height="15"> 
       <rect width="15" height="15" fill="#ffffe5" x="0" y="0"></rect> 
       <rect width="15" height="15" fill="#f7fcb9" x="15" y="0"></rect> 
       <rect width="15" height="15" fill="#d9f0a3" x="30" y="0"></rect> 
       <rect width="15" height="15" fill="#addd8e" x="45" y="0"></rect> 
       <rect width="15" height="15" fill="#78c679" x="60" y="0"></rect> 
       <rect width="15" height="15" fill="#41ab5d" x="75" y="0"></rect> 
       <rect width="15" height="15" fill="#238443" x="90" y="0"></rect> 
       <rect width="15" height="15" fill="#006837" x="105" y="0"></rect> 
       <rect width="15" height="15" fill="#004529" x="120" y="0"></rect> 
      </svg> 
     </div> 
    </option> 
</select> 

現在option的內容被顯示爲白色空白，如下面的圖像中：

正如你所看到的圖像的內容是空的。但是，如果我運行調試檢查器，則仍然可以在那裏檢測到svg元素。

我在做什麼錯？如何在選項內顯示svg？謝謝。

Answer 1

HTML <option>元素只能包含純文本。

你所遇到的是長期運行的「如何設計一個<select>元素」的討論。描述這些年來提出的所有可能的黑客和解決方案都遠遠超出了答案的範圍，並且純粹是基於意見的。環顧四周

• CSS黑客試圖重寫獲得仿真的<select>行爲與其他元素
• Web組件

，使JavaScript庫操作系統提供的造型

UI模塊打開你自己的想法。