OPTION元素中的SVG

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的{​​{1}}下拉列表中，如下所示：

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？感谢。

Answer 1

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

您遇到的是长期运行的＆＃34;如何设置<select>元素的样式＆＃34;讨论。描述这些年来提出的所有可能的黑客和解决方案远远超出了答案的范围，并且纯粹是基于意见的。看看

• 尝试覆盖操作系统提供的样式的CSS hacks
• 用于模拟<select>与其他元素
的行为的Javascript库的UI模块
• 网络组件

并自己决定。