Leaflet SVG Layer

This places an SVG layer into the world map and conveniently sizes it to overlay the entire world. It uses the object initPathRoot and will be automatically sized based on the map's Div container size. Also, an SVG circle element is added and located using the map method latLngToLayerPoint. The circle is then adjusted when the map zooms, again using the map method latLngToLayerPoint

1). The map is placed into its DIV (width:800px, height:400px).
2). The map is centered at Lat/Lng (0,0) at zoom level 1.
3.) The SVG element is added via initPathRoot, creating the SVG layer
4.) An SVG rect background is added, along with circles at its center and corners.
4a.) The rect and circles show the SVG layer extent at initial loading.
6.) The svg viewBox is computed and shown. This SVG layer nicely covers the world map
7.) A circle[LL0] is set at the map's center (lat=0, lng=0)
8.) Note: LL0 gets it's cx,cy values from the map method latLngToLayerPoint
VB x:VB y:VB w:VB h:
Initial Location:    LL0 cx: LL0 cy:
9.) However, the svg element, must be moved each time the map is zoomed,
using the viewreset event. This again calls the map method latLngToLayerPoint to accomplish this.
Zoom Adjusted    LL0 cx: LL0 cy :

SVG Source:

OK in:IE11/CH40/FF35