廃止予定SVGの代替案pathSegList

Question

ポリライン機能を拡張するリーフレットプラグインを作成しています。私のプラグインでは、SVGPathSegListインターフェイスを使ってパスセグメントにアクセスしています。しかし、Chrome DevToolsによれば、このインターフェースはChrome 48で削除されます。私は、パスセグメントにアクセスする別の可能性を探しています。

Here's私のフィドル。

(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 > 0) { 
       for (tnIndex = textNodes.length - 1; tnIndex >= 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 < path.pathSegList.length; pathSeg += 1) { 
       if (pathSeg > 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(); 
     } 
    }); 
})(); 

Answer 1

は、新しいAPI
https://svgwg.org/specs/paths/#InterfaceSVGPathData
とその
https://github.com/jarek-foksa/path-data-polyfill.js
用ポリフィルだけでなく、古いAPIのためのポリフィルがあるでしょう
https://github.com/progers/pathseg
また公式クロムのバグを参照してください
https://code.google.com/p/chromium/issues/detail?id=539385

Answer 2

@holg非常に有用なリンクを提供します。

new APIを使用するようにjsコードを変更することができます。

たとえば、
var segs = path.pathSegListの代わりにvar pathData = path.getPathData()を使用してください。代わりに、古いpath.pathSegList.appendItem/insertItem/removeItem

のパス要素を更新する代わりに
path.pathSegList.getItem(1).x古い使用path.setPathData(pathData)の
使用pathData[1].values[4]新しいAPIをサポートしていないブラウザのpath-data-polyfill.jsを含めます。
（クローム50は依然としてgetPathDataとsetPathDataを実装していない長い道のりがあるかもしれません...。）ここ

はコードサンプルである：

//svg code: 
//... 
//<path d="M0,0 L100,50" id="mypath"></path> 
//<script xlink:href="/js/path-data-polyfill.js"></script> 
//... 

//js code: 
var path = document.getElementById('mypath'); 
var pathdata = path.getPathData(); 
console.log(pathdata); 
console.log(pathdata.length); //2 
console.log(pathdata[0].type); //"M" 
console.log(pathdata[0].values); //[0,0] 
console.log(pathdata[1].type); //"L" 
console.log(pathdata[1].values); //[100,50] 
pathdata.push({type: "C", values: [100,-50,200,150,200,50]}); //add path segment 
path.setPathData(pathdata); //set new path data 
console.log(path.getAttribute('d')); //"M0,0 L100,50 C100,-50,200,150,200,50" 

経路データポリフィル：https://github.com/jarek-foksa/path-data-polyfill.js