Snap SVG - Verschieben eines geladenen Elements um

Question

Ich versuche Snap SVG library zu verwenden, um ein Element in einer SVG-Grafik um den Bildschirm zu verschieben. Dies ist der Code des Elements:

<g id="butterfly"> 
    <path id="wings" fill="#FFFFFF" stroke="#CFEA90" stroke-width="4" stroke-miterlimit="10" d="M139.741,74.038c-5.847-1.477-11.794,1.029-14.605,5.736c-0.463-5.791-5.095-10.963-11.275-12.115c-7.017-1.309-13.365,3.059-14.179,9.755c-0.654,5.381,2.469,10.622,7.36,13.155c-0.143,0.146-0.28,0.284-0.403,0.402c-3.157,3.055-2.81,7.082,0.777,8.994c3.586,1.912,9.053,0.985,12.211-2.071c0.836-0.809,1.773-2.517,2.632-4.62c-0.068,2.586,0.13,4.835,0.632,6.038c1.724,4.127,6.377,7.274,10.394,7.031c4.017-0.244,5.876-3.786,4.152-7.913c-0.067-0.16-0.14-0.343-0.215-0.538c5.45-0.264,10.315-3.753,11.775-8.957C150.814,82.459,146.669,75.79,139.741,74.038z"/> 
    <path id="body" fill="#97BD40" d="M123.467,99.008c-0.3,1.287-1.587,2.086-2.873,1.786l0,0c-1.287-0.3-2.086-1.587-1.786-2.873l5.159-22.099c0.3-1.287,1.587-2.086,2.873-1.786l0,0c1.287,0.3,2.086,1.587,1.786,2.873L123.467,99.008z"/> 
</g> 

Ich möchte auf dem Bildschirm dieses Element bewegen (zB ich mag es nach oben und dann nach links und dann wieder nach unten in die Ausgangsposition), so dass ich zuerst erstellen a Leinwand und holen Sie sich das Element. Ich benutze diesen Code:

var canvas = Snap("div#canvas"); 

Snap.load("MyImage.svg", function (image) { 

    var butterfly = image.select("g#butterfly");  
    canvas3.append(butterfly); 

    // Now I want to move the element around... 
} 

Hat jemand eine Idee?

Ich habe Informationen gefunden, einen Kreis oder ein Rechteck über das Verschieben, die Attribute wie x haben, y, cx oder cy, die leicht zu ändern sind, aber in meinem Fall kann ich nicht haben diese Attribute ...

Answer 1

Set a transform auf dem Schmetterling. Sie möchten eine Translate-Transformation, um sie zu verschieben. Z.B.

butterfly.transform("t100,100"); 

Das syntax ist das gleiche wie Raphael. Sie können aber auch ein Snap matrix

var t = new Snap.Matrix() 
t.translate(100, 100); 
butterfly.transform(t); 

Answer 2

Die SVG-Transformation verwenden Attribut legt eine Liste von Transformationen auf ein Element und es ist Kinder (hier ist ein sehr gutes Tutorial dazu: https://www.dashingd3js.com/svg-group-element-and-d3js). Sie können verschiedene Arten von Transformationen verwenden. How to manipulate translate transforms on a SVG element with javascript in chrome?: zum Beispiel, wie Totty fragt, nur um zu x = 1 und y = 1, dann würden Sie

myElement.setAttribute('transform','translate(30,100)'); 

Mehr Informationen über die in dieser Antwort verwenden zu bewegen. Sobald Sie mehr gelesen haben, bemerken Sie, dass Sie Animationen auch wirklich einfach mit Snap verwenden können:

myElement.animate({ transform:'translate(30,100)'}, 700, mina.bounce);