SVG模拟下拉选框功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37064409/article/details/80581235

由于svg标签内不支持html原生select标签。所以想要用下拉选框功能需要自己模拟。

效果图如下：

要求：

1. 点击下拉选框，显示可选菜单
2. 鼠标在可在选菜单滑动，展示不同选项。
3. 点击可选菜单，改变下拉选框的内容，同时关闭可选菜单

技术

1. 新建clipPath遮罩层，可选菜单引用遮罩层，仅展示4条可选项
2. 滑动滚轮触发mousewheel事件，每次增加/减少一个可选框的高度，当大于等于0或小于等于所有选框减去展示框（4个）时停止
3. 点击选项框做可选菜单的show() / hide() 切换
4. 用的是D3.JS。将所有svg标签append进页面
5. 代码上传到了github

展示链接

[SVG/SELECT](https://yanhappiness.github.io/Notes/svgselect/svgselect.html)

代码地址

[Github](https://github.com/YANhappiness/Notes/tree/master/svgselect)