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模块打开你自己的想法。