Measuring Distance in SVG layer and the Leaflet

Distance (in meters) is used to create elements. e.g. width/height of a rectangle, and radius of a circle, etc. This shows a line connected to lat/lng value(0,0), which is the SVG layer x/y point(400,200), that follows the cursor. The length of the line is shown both in pixel length in the SVG layer and its length in the map(meters).

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.) As the cursor moves over the SVG layer, its x,y values are shown. Uses svg methods createSVGPoint, getScreenCTM, and matrixTransform
8.) The cursor x,y values are then used to compute the associate map Lat/Lng values,via the map method layerPointToLatLng.
9.) A line is attached to the map lat/lng(0,0) and follows the cursor. Its pixel length and map meters length are computed.
Map distance is measured by method latLng1.distanceTo(latLng2).
10.) When the map zoom level is change the line's x1,y1 location is changed.
Note: distance computation is not effected by map zoom level.
VB x:VB y:VB w:VB h:
Cursor Location:   SVG x: SVG y:    Map lat: Map lng:
Line Length:   SVG pixels:    Map meters

SVG Source:

OK in:IE11/CH40/FF35