Css 更改地图框导航控件缩放图标颜色

我设法添加了地图导航控件，删除了指南针，并更改了缩放控件的背景和不透明度。

---

但是“+”和“-”图标呢。如果可以，如何更改图标的颜色？

由于按钮图像是通过svg文件设置的，因此CSS样式无法直接更改它们的颜色。但您可以指定指向外部图标的链接或覆盖svg中的填充颜色：

/** fill%3A%23333333 -> fill%3A%23ff0000 **/

.mapboxgl-ctrl-zoom-in {
  background-image: url(data:image/svg+xml;charset=utf8,<svg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27>%0A%20%20<path%20style%3D%27fill%3A%23ff0000%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F>%0A<%2Fsvg>%0A) !important;
}

.mapboxgl-ctrl-zoom-out {
  background-image: url(data:image/svg+xml;charset=utf8,<svg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27>%0A%20%20<path%20style%3D%27fill%3A%23ff0000%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F>%0A<%2Fsvg>%0A) !important;
}

/**填充%3A%23333333->填充%3A%23ff0000**/
.mapboxgl ctrl放大{
背景图像：url（数据：image/svg+xml；charset=utf8，%0A%20%20%0A%0A）！重要信息；
}
.mapboxgl ctrl缩小{
背景图像：url（数据：image/svg+xml；charset=utf8，%0A%20%20%0A%0A）！重要信息；
}

---

[]

css中简单且最佳的解决方案

非常适合北箭队

.mapboxgl-ctrl-group{
    border-radius: 1px;
}
.mapboxgl-ctrl-group > .mapboxgl-ctrl-icon {
    width: 24px;
    height: 24px;
}
.mapboxgl-ctrl-group > .mapboxgl-ctrl-icon > button {
    width: 24px !important;
    height: 24px !important;
    border-radius: 2px !important;
}
.mapboxgl-ctrl-compass-arrow {
    margin: 0.1em 2px !important;
}

如果要更改放大和缩小控件的图标，请修改这些类

 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABjSURBVEhLYxgFtAQOQHwRStMMtAPxfyhNMzBqCUlg1BIU4AjEHXjwcSAGWQKiscnDsD0Q4wSXgRhkCKUYlGFxApALsLkMhqniE0Jg6EQ8ITBqCUlg+FgCqxkpygejAA9gYAAASnVG42Lr1P0AAAAASUVORK5CYII=");}


 .mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAuSURBVEhLYxgFo2AUjALSwVEg/k8hPgLEOMFhIMamiRQMMmMUjIJRMAqIBwwMALVbIvDMYvl8AAAAAElFTkSuQmCC");}

---

哇！仅仅因为能够解密svg，你就应该得到很多选票。哈哈。但是你在哪里定义颜色呢？后

填充%3A%23

有效吗！您从哪里获得编码的svg？我尝试从mapboxgl ctrl全屏浏览器中复制，但无法像在您的example@GregHolst在最新版本的库中，按钮的选择器发生了更改，请参见此处：@stdob谢谢，但对我来说不能全屏工作，一般来说，我只看到默认为白色的标准控件似乎是一个错误，我把它贴在这里：