Не удается получить SVG-путь - Snap.svg

Question

В текущей функции init я загружаю SVG с помощью Snap.load, а затем пытаюсь получить элементы этого пути SVG. однако функция пути выводит «0» и «0» в консоли при запуске. Была установлена ​​функция тайм-аута, но, по-видимому, она не распознает элементы «пути».

Как я могу получить элементы SVG 'path' для вывода в сценарии? Ниже приведен пример текущего html и скрипта.

HTML

Перед SVG активу был загружен:

<div class="icon-svg-morph" id="icon-svg"> 
    <svg class="animate-object icon-svg"></svg> 
</div> 

После того, как загружен SVG активов:

<div class="icon-svg-morph" id="icon-svg"> 
    <svg class="animate-object icon-svg" height="150" viewBox="0 0 500 500" width="150"> 
     <desc>Created with Snap</desc> 
     <defs></defs> 
     <path 
      d="M345,230l-95-95l-95,95l-55,95l150,50l150-50L345,230z M250,334l-54.5-84L141,289 
l31-52l78-75l78,75l31,52l-54.5-39L250,334z" 
      id="icon-path" 
      style="fill: #339ed9;" 
     > 
    </path> 
    </svg> 
</div> 

JS

$.svgElement.prototype = { 
    init: function() { 
     var s = Snap('.icon-svg'); 

     Snap.load('asset/img/icon.svg', function (response) { 
      var icon = response; 
      s.append(icon); 
     }); 

     s.attr({ 
      height: 150, 
      viewBox: 0 + ' ' + 0 + ' ' + 500 + ' ' + 500, 
      width: 150 
     }); 

     this.path(); 
    }, 

    path: function() { 
     var paths = $('.icon-svg').children('path'); 

     console.log(paths.length); 

     if (! paths.length) { 
      setTimeout(function(){ 
       console.log(paths.length); 
      }, 100); 

      return; 
     } 
    } 
}; 

Click to view the current example.

Answer 1

Если вы хотите путь, я бы просто использовать защелки SelectAll

s.selectAll('path') or s.select('path') 

если вы хотите только один, возможно, потребуется, чтобы убедиться s доступно для избранных.