Composant logiciel enfichable SVG - le Déplacement d'un élément chargé autour de

Je suis en train d'utiliser composant logiciel Enfichable SVG bibliothèque de déplacer un élément dans un SVG graphiques autour de l'écran. C'est le code de l'élément:

<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>

Je veux déplacer cet élément autour de l'écran (par exemple, je veux le déplacer vers le haut puis à gauche, puis de nouveau vers le bas à la position initiale), j'ai donc d'abord créer un toile et obtenir l'élément. J'utilise ce 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...
}

Quelqu'un a une idée?

J'ai trouvé des informations sur le déplacement d'un cercle ou un rectangle, qui ont des attributs comme x, y, cx ou cy qui sont faciles à modifier, mais dans mon cas, je n'ai pas ces attributs...

InformationsquelleAutor MikO | 2014-01-28

snap.svg svg

16

Définir une transformation sur le papillon. Vous souhaitez traduire un transformer pour le déplacer. E. g.
```
butterfly.transform("t100,100");
```
Que la syntaxe est le même que Raphaël. Mais vous pouvez également utiliser un Composant logiciel enfichable de la matrice
```
var t = new Snap.Matrix()
t.translate(100, 100);
butterfly.transform(t); 
```
- butterfly.transform("t100,100"); quoi que t avant 100 en train de faire ici ?
- t = translate = se déplacer x,y
- C'est vraiment mauvais pour moi, comment puis-je simplement x=1, y=1?
- Si vous avez une question, vous devez utiliser le Demander bouton de Question à poser.
InformationsquelleAutor Robert Longson
1

Le SVG Transformer Attribut s'applique à une liste de transformations d'un élément et c'est les enfants (voici un très bon tutoriel sur ce: https://www.dashingd3js.com/svg-group-element-and-d3js). Vous pouvez utiliser différents types de transformations, par exemple, que Totty demande, se déplacer juste pour x=1 et y=1, il vous suffit d'utiliser
```
myElement.setAttribute('transform','translate(30,100)');
```
Plus d'informations sur ce dans cette réponse: Comment manipuler traduire transforme sur un élément SVG avec javascript dans le navigateur chrome?. Une fois que vous lisez, plus vous remarquez, vous pouvez même utiliser des animations très facilement avec le composant logiciel Enfichable:
```
myElement.animate({ transform:'translate(30,100)'}, 700, mina.bounce );
```
InformationsquelleAutor anngelfra

Vous devez vous connecter pour publier un commentaire.