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用于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 hack
• 用于Javascript库的UI模块，用于模拟<select>其他元素的行为
• Web组件

并下定决心。