title: Alternative for deprecated SVG pathSegList
body: <p>I'm writing a Leaflet plugin that extends the polyline functionality. In the my plugin I'm accessing the path segments using the SVGPathSegList interface. But according to the Chrome DevTools the interface will be removed in Chrome 48. I'm seeking for another possibility to access the the path segments.</p>
  
  <p><img src="https://i.stack.imgur.com/pR6OP.png" alt="Chrome DevTools notification"></p>
  
  <p><a href="http://jsfiddle.net/1dy6s79g/" rel="noreferrer">Here's</a> my fiddle.</p>
  
  <pre><code>(function () {
      var __onAdd = L.Polyline.prototype.onAdd,
          __onRemove = L.Polyline.prototype.onRemove,
          __updatePath = L.Polyline.prototype._updatePath,
          __bringToFront = L.Polyline.prototype.bringToFront;
  
      L.Polyline.include({
        onAdd: function (map) {
            __onAdd.call(this, map);
            this._textRedraw();
        },
  
        onRemove: function (map) {
            __onRemove.call(this, map);
        },
  
        bringToFront: function () {
            __bringToFront.call(this);
            this._textRedraw();
        },
  
        _textRedraw: function () {
              var textNodes = this._path.parentElement.getElementsByTagName('text'),
                  tnIndex;
  
                      if (textNodes.length &gt; 0) {
                  for (tnIndex = textNodes.length - 1; tnIndex &gt;= 0; tnIndex -= 1) {
                      textNodes[tnIndex].parentNode.removeChild(textNodes[tnIndex]);
                }
            }
  
            if (this.options.measurements) {
                this.setText();
            }
        },
  
        setText: function () {
              var path = this._path,
                  points = this.getLatLngs(),
                  pathSeg,
                  prevPathSeg,
                  center,
                  angle,
                  rotation,
                  textNode;
  
            /* 
             * If not in SVG mode or Polyline not added to map yet return
             * setText will be called by onAdd, using value stored in this._text
             */
            if (!L.Browser.svg || typeof this._map === 'undefined') {
                return this;
            }
  
            for (pathSeg = 0; pathSeg &lt; path.pathSegList.length; pathSeg += 1) {
                  if (pathSeg &gt; 0) {
                      prevPathSeg = path.pathSegList[pathSeg - 1];
                    center = this._calcCenter(
                        prevPathSeg.x,
                        prevPathSeg.y,
                        path.pathSegList[pathSeg].x,
                        path.pathSegList[pathSeg].y
                    );                  
                    angle = this._calcAngle(
                        prevPathSeg.x,
                        prevPathSeg.y,
                        path.pathSegList[pathSeg].x,
                        path.pathSegList[pathSeg].y
                    );
                    rotation = 'rotate(' + angle + ' ' + 
                          center.x + ',' + center.y + ')';
                    debugger;
                    textNode = document
                          .createElementNS('http://www.w3.org/2000/svg', 'text');
                    textNode.setAttribute('text-anchor', 'middle');
                    textNode.setAttribute('x', center.x);
                    textNode.setAttribute('y', center.y);
                    textNode.setAttribute('transform', rotation);
                    textNode.textContent = points[pathSeg - 1]
                          .distanceTo(points[pathSeg]);
  
                    this._path.parentElement.appendChild(textNode);
                } else {
                      continue;
                }
            }
        },
  
        _calcCenter: function (x1, y1, x2, y2) {
              return {
              x: (x1 + x2) / 2,
              y: (y1 + y2) / 2
            }
        },
  
        _calcAngle: function (x1, y1, x2, y2) {
                return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
        },
  
        _updatePath: function () {
            __updatePath.call(this);
            this._textRedraw();
        }
    });
  })();
  </code></pre>