如何用Snap.svg使用Maki svg圖標？

Question

我正在試驗Snap以使用svg，並且需要能夠使用https://github.com/mapbox/maki中定義的Maki圖標。

我的計劃是加載我需要的svg，然後在一張Snap紙上爲特定圖標實例化它們。但爲了實現這一點，我需要將圖標放在紙上的特定位置，但我無法獲得翻譯工作。下面的翻譯技術都不起作用;該代碼按原樣運行，但始終將該圖標放在左上角。

我錯過了什麼？ Snap沒有足夠的文檔，我不知道問題出在Maki圖標svg定義的方式，還是我使用Snap。

var icon = Snap.load("maki/bicycle-24.svg", function(f) { 

     var g = f.select("g").clone(); 
     // var g = f.select("#layer1").clone(); // also works 

     // g.transform("t120,120"); 

     // var t = new Snap.Matrix(); 
     // t.translate(120,120); 
     // g.transform(t); 
     paper.append(g); 
    }); 

Answer 1

克隆需要在append後發生，就像在加載一個svg到Snap中它只是一個片段一樣。

所以，你需要做的是這樣......

paper.append(f); 
var element = paper.select('#someId').clone(); 
element.transform(myTransform); 

Answer 2

謝謝！這就是訣竅！由於Snap的文檔記錄很差，我將在此處插入代碼以提供一般解決方案。

 // Base set from which markers are constructed 
    var iconSet = paper.group(); 
    iconSet.attr({ class: 'hide' }); 

     // Instantiations of icons 
    var markers = paper.g(); 

     // Now, create SVG shape 
    var icon = Snap.load("maki/bicycle-24.svg", function(icon) { 
      // Add it to the icon set 
     iconSet.append(icon); 

      // Instantiate it and remove from main view 
     var element = paper.select('#svg4460');     // Copies it! 
     // var element = paper.select('#base');    // Selects something but doesn't work 
     // var element = paper.select('#layer1');    // Selects something but doesn't work 
     // var element = paper.select('#bicycle-24');   // Silent fail 
     element = element.clone(); 
     element.remove(); 

      // Clone this icon and move it 
     var t = new Snap.Matrix(); 
     t.translate(10,120); 
     element.transform(t); 

      // Insert into main document view (markers) 
     markers.add(element); 
    });