Javascript Highcharts地图-圆角缩放按钮

我正在为一个项目使用Highcharts API。一切正常，但我有一个问题。我希望放大/缩小按钮是圆形的。我尝试了50%的边界半径，更改了mapNavigation.buttonOptions.theme上的r值，但这些都不适合我

---

任何帮助都将不胜感激

使用

mapNavigation.buttonOptions.theme.r

调整边框半径

mapNavigation:{
启用：对，
按钮选项：{
主题：{
r:8，//在此处更改边界半径
},
垂直排列：“底部”
}
},

---

代码和演示：

您可以通过覆盖Highcharts.svgrender.prototype.symbols中的topbutton和bottombutton为按钮定义自己的SVG路径。下面是圆的一个示例：

(function(H) {
    function selectiveRoundedRect(x, y, w, h, r) {
        var xStart = x + w / 2 - r,
            yStart = y + h / 2 - r;

        return [
            ['M', xStart, yStart],
            // top side
            ['A', r, r, 0, 0, 0, xStart + 2 * r, yStart + 2 * r],
            // top right corner
            ['A', r, r, 0, 0, 0, xStart, yStart]
        ];
    }
    H.SVGRenderer.prototype.symbols.topbutton = function(x, y, w, h, options) {
        var r = (options && options.r) || 0;
        return selectiveRoundedRect(x - 1, y - 1, w, h, r);
    };
    H.SVGRenderer.prototype.symbols.bottombutton = function(x, y, w, h, options) {
        var r = (options && options.r) || 0;
        return selectiveRoundedRect(x - 1, y - 1, w, h, r);
    };
}(Highcharts));

---

现场演示：

---

文档：

您能分享您的代码和您迄今为止的尝试吗？谢谢您的回复。不幸的是，这给了按钮的包装一个边界半径。我需要给每个按钮一个边界半径，使它们变成圆形而不是正方形。