Листовка Полилиния - Добавлены текстовые элементы SVG не видны

Question

Я хочу создать измерительный инструмент для листовки. Поэтому я пишу плагин, который расширяет функциональность полилинии. В плагине я добавляю элементы текста SVG в группу слоя. Моя проблема в том, что добавленные элементы не видны на карте. Я попытался перерисовать слой, но это не повлияло на видимость добавленных элементов.

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(); 
     }, 

     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 + ')'; 

        textNode = document.createElement("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; 
     }, 

     _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(); 
      } 
     }, 

     _updatePath: function() { 
      __updatePath.call(this); 
      this._textRedraw(); 
     } 
    }); 
})(); 

Answer 1

Вам нужно создать элемент SVG пространства имён, используя createElementNS:

Создает элемент с заданным пространством имен URI и квалифицированное имя.

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

Переключатель:

textNode = document.createElement("text"); 

к:

textNode = document.createElementNS("http://www.w3.org/2000/svg", "text"); 

Пример: http://jsfiddle.net/w8yz18rf/1/