更改 Mapbox 导航控件缩放图标颜色

Question

我设法添加了地图导航控件，移除了指南针并更改了缩放控件的背景和不透明度。 但是“+”和“-”图标呢？如果可以的话，如何更改图标颜色？

Answer 1

由于按钮图像是通过 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;
}

[http://jsfiddle.net/7251btpy/]

Answer 2

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;
}

Image

如果您想更改放大和缩小控制的图标，请修改这些类。

 .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");}

Answer 3

即使@stdob 运行良好， 我得到了一个带有默认 svg 图像和过滤器的解决方案。

.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

也适用于指南针和其他图标，但您必须将其设置在图标上而不是控件上，因为背景颜色也会被过滤。

以下来源将为您提供一种计算过滤器的方法

来源：https://css-tricks.com/change-color-of-svg-on-hover/

Answer 4

就我而言，我需要完全更改图标，如果将来有人需要，这里有一个 SASS 解决方案。

.mapboxgl-ctrl-group{
    //full screen buttom
    .mapboxgl-ctrl-fullscreen {
        .mapboxgl-ctrl-icon {
            display: none !important;
        }
        background-image: url(yourImagePath/image.svg);
        background-repeat: no-repeat;
        background-position: center;
    }
    //shrink buttom
    .mapboxgl-ctrl-shrink{
        .mapboxgl-ctrl-icon {
            display: none !important;
        }
        background-image: url(yourImagePath/image.svg);
        background-repeat: no-repeat;
        background-position: center;
    }
    //zoom in button
    .mapboxgl-ctrl-zoom-in{
        .mapboxgl-ctrl-icon {
            display: none !important;
        }
        background-image: url(yourImagePath/image.svg);
        background-repeat: no-repeat;
        background-position: center;
    }
    //zoom out
    .mapboxgl-ctrl-zoom-out {
        .mapboxgl-ctrl-icon {
            display: none !important;
        }
        background-image: url(yourImagePath/image.svg);
        background-repeat: no-repeat;
        background-position: center;
    }
}