在Leaflet.js顶部看不到SVG控件

Question

我正在使用Leaflet 0.7.1并希望使用d3在顶部绘制一个放射状菜单（如openstreetmap的iD编辑器）。 我找到的一些例子使用Leaflet的overlayPane将svg元素附加到：

var svgContainer= d3.select(map.getPanes().overlayPane).append("svg");

在鼠标点击上，我添加菜单并将其重新定位到屏幕xy coords：

map.on('contextmenu', function(e) {
    console.log('contextmenu()');
    var tooltip;
    var center = [e.layerPoint.x, e.layerPoint.y];
    var menu = svgContainer.append('g')
        .attr("class", 'leaflet-zoom-hide')
        .attr('class', 'radial-menu')
        .attr('transform', 'translate(' + center + ')')
        .attr('opacity', 0);
        menu.transition()
            .attr('opacity', 1);

        menu.append('path')
            .attr('class', 'radial-menu-background')
            .attr('d', 'M' + r * Math.sin(a0) + ',' +
                             r * Math.cos(a0) +
                      ' A' + r + ',' + r + ' 0 ' + 0 + ',0 ' +
                             (r * Math.sin(a1) + 1e-3) + ',' +
                             (r * Math.cos(a1) + 1e-3)) // Force positive-length path (#1305)
            .attr('stroke-width', 50)
            .attr('stroke-linecap', 'round');
    });

不知何故，SVG路径被绘制（这在Chrome Inspector中可见）但是在地图对象后面。 当我在Inspector中拖动正文标签下方的SVG元素时，我可以看到圆形路径。

关于如何在Leaflet上绘制SVG'菜单'元素的任何想法？

谢谢！

有关演示，请参阅this fiddle。右键单击或按住以添加不可见元素。

PS。我也问this question on gis.stackexchange.com。

Answer 1

解决。一位同事指出SVG容器没有尺寸。给它适当的宽度和高度证明了答案：

    svgContainer.attr("width", width).attr("height", height)