选项元素内的 SVG

Posted 2023-03-11

【中文标题】选项元素内的 SVG

【英文标题】：SVG inside OPTION element

【发布时间】：2018-03-17 16:47:12

【问题描述】：

我正在创建以下svg 元素和结构：

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

这会产生一排小方块。就像这样：

到目前为止一切正常。

然后我将上面的代码放在option 的select 下拉列表中，如下所示：

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

现在option的内容显示为白色空白，如下图所示：

如您所见，图像的内容是空的。但是，如果我运行调试检查器，我仍然可以在那里检测到 svg 元素。

我做错了什么？如何在选项中显示svg？谢谢。

【参考方案1】：

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

您遇到的是长期存在的“如何设置<select> 元素的样式”讨论。描述多年来提出的所有可能的黑客和解决方案远远超出了这里的答案范围，并且纯粹是基于意见的。环顾四周

试图覆盖操作系统提供的样式的 CSS hack 用于 javascript 库的 UI 模块，用于模拟 <select> 与其他元素的行为 Web 组件

自己决定吧。

【讨论】：

谢谢，但是:(