Figure 6-14. Translate the screw
Chapitre 6 Systèmes de coordonnées et transformations
Extrait
Translation La translation est un simple déplacement.
Syntaxe: translate(tx, ty) tx composante en x du vecteur de translation ty composante en y du vecteur de translation
Nous appliquons une translation à l'instance du groupe 'vis', plus exactement à son système local de coordonnées.
<use xlink:href="#vis" transform="translate(100,130)" />
Figure 6-14. Translate the screw
( voir
cette figure comme svg )
Facile! Vous pouvez vous demander quelle est la différence entre la translation
et l'utilisation des attributs 'x' et 'y' pour placer un objet.
Il semble bien que
<use xlink:href="#vis" transform="translate(100,130)" />
est identique à
<use xlink:href="#vis" x="100" y="130" />
Effectivement les deux donnent le même résultat. Alors pourquoi avons nous besoin des transformations? Un peu de patience, il y a d'autres transformations, nous pourrons les combiner. Cependant, voyons les effets d'une transformation et de la donnée de valeurs à 'x' et 'y'
<use xlink:href="#vis" transform="translate(100,130)" x="130" y="-160" />
Figure 6-15. Translation
et attributs x et y
( voir cette image comme svg ) L'effet que nous voyons est que la vis est d'abord déplacée par la translation, son origine vient en (100,130) et ensuite déplacée suivant les valeurs de 'x' et 'y' du vecteur (130,-160) pour avoir son origine en (230,-30). Nous ajoutons simplement les valeurs de 'x' et 'y' au vecteur de la translation.
Xlocal = tx + x ylocal = ty + y
Dans ces formules nous pouvons changer l'ordre des termes.
Xlocal =x + tx ylocal =y + ty
donnera le même résultat. Nous pouvons également échanger les valeurs de 'x' et 'y' avec les composantes du vecteur de translation:
<use xlink:href="#screw" transform="translate(130,-160)" x="100" y="130" />
Nous pouvons trouver de multiples combinaisons pour amener notre instance de la vis au même endroit:
<use xlink:href="#screw" transform="translate(130,-160) translate(100,130)" /> <use xlink:href="#screw" transform="translate(100,130) translate(130,-160)" /> <use xlink:href="#screw" transform="translate(230,-30)" /> <use xlink:href="#screw" x="230" y="-30" />
Figure 6-16. Pour
arriver au même point (230,-30)
( voir cette image comme svg )
Il est confus d'utiliser à la fois la translation et les attributs 'x' et 'y'. Il est préférable de l'éviter. Ici l'ordre des translations ne changeait pas la position finale. Avec d'autres transformations l'ordre changera la position finale, aussi que prendre en compte en premier, l'attribut 'transform' ou les attributs 'x' et 'y'? Les spécifications SVG sont claires:
L'attribut 'transform' est appliqué à un élément avant de prendre en compte tout autre coordonnée ou longueur appliquée à cet élément. L'ordre à respecter est donc Appliquer la transformation. Appliquer les attributs 'x' et 'y'.
