Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue151:inkscape [2019/12/08 09:03] – d52fr
+++ issue151:inkscape [2019/12/09 17:59] (Version actuelle) – andre_domenech
@@ Ligne 1: / Ligne 1: @@
 **Over the past few months, we’ve looked at ways to manipulate SVG in a web browser, using JavaScript, culminating in some simple animation. The code we used last time let us move an object horizontally on screen by manipulating its “x” attribute. By extension, we could also do the same with the “y” attribute to move it vertically. This time we’ll look at an alternative method of moving objects up, down, left and right, using an attribute that also opens up the ability to rotate or skew the element at the same time. The attribute in question is “transform”, and it crops up all the time in Inkscape documents, so let’s start by looking at how it’s used there.**
-Dans ces derniers mois, nous avons regarder les manières de manipuler SVG dans un navigateur Web, en utilisant Javascript, jusqu'à obtenir une animation simple. Le code que nous avons utilisé la dernière fois nous permet de déplacer un objet horizontalement sur l'écran en manipulant  son attribut « x ». Par extension, nous pouvons aussi faire de même en manipulant l'attribut « y » pour un déplacement vertical.Cette fois-ci,  nous regarderons un méthode alternative pour déplacer les objets vers le haut, le bas, vers la droite, la gauche, en utilisant un attribut qui nous ouvre aussi la possibilité de tourner l'objet ou de le déplacer en diagonale en même temps. L'attribut en question, c'est « transform » et il apparaît en permanence dans les documents d'Inkscape ; aussi, commençons par regarder comme il est utilisé dans ces cas.
+Dans ces derniers mois, nous avons regardé les manières de manipuler SVG dans un navigateur Web, en utilisant JavaScript, jusqu'à obtenir une animation simple. Le code que nous avons utilisé la dernière fois nous permet de déplacer un objet horizontalement sur l'écran en manipulant son attribut « x ». Par extension, nous pouvons aussi faire de même en manipulant l'attribut « y » pour un déplacement vertical. Cette fois-ci, nous regarderons une méthode alternative pour déplacer les objets vers le haut, le bas, la droite, la gauche, en utilisant un attribut qui nous ouvre aussi la possibilité de tourner l'objet ou de le déformer en même temps. L'attribut en question, c'est « transform » et il apparaît en permanence dans les documents d'Inkscape ; aussi, commençons par regarder son utilisation là-dedans.
 **Open Inkscape, with a fresh, blank document. Draw a simple square or rectangle – it doesn’t matter about the fill and stroke at this point, though it will be useful if you can actually see and interact with it. Now open the XML Editor dialog (Edit > XML Editor…).
@@ Ligne 9: / Ligne 9: @@
 Leaving the XML editor open, you should also open the Inkscape Preferences (Edit > Preferences…). Navigate to the Behaviour > Transforms screen, and ensure that the “Store transformation” option is set to “Optimised”.**
-Ouvrez Inkscape, avec un nouveau document vierge. Dessinez un simple carré ou rectangle ; nous ne nous soucions pas du contour et de remplissage pour le moment bien bien que ce soit utile si nous voulons vraiment le voir ou interagir avec lui. Maintenant, ouvrez l'éditeur XML (Édition > Éditeur XML...).
+Ouvrez Inkscape, avec un nouveau document vierge. Dessinez un simple carré ou rectangle ; nous ne nous soucions pas du contour et du remplissage pour le moment bien que ce soit utile si nous voulons vraiment le voir ou interagir avec lui. Maintenant, ouvrez l'éditeur XML (Édition > Éditeur XML...).
-Maintenant, vous comprenez la partie droite de ce dialogue. Vous pouvez voir l'ensemble habituel des attributs que vous pouvez vous attendre à trouver pour un <rect>, avec leurs valeurs - y compris les attributs habituels « x » et « y ».
+À ce stade, vous comprenez la partie droite de ce dialogue. Vous pouvez voir l'ensemble habituel des attributs que vous pouvez vous attendre à trouver pour un <rect>, avec leurs valeurs - y compris les attributs habituels « x » et « y ».
 En laissant l'éditeur XML ouvert, vous devriez aussi ouvrir les Préférences d'Inkscape (Édition > Préférences...). Déplacez-vous vers l'écran Comportement > Transformations et assurez-vous que l'option « Enregistrement des transformations » est sur « Optimisé ».
@@ Ligne 21: / Ligne 21: @@
 You should notice that, this time, the “x” and “y” attributes remain unchanged. Instead a new “transform” attribute is added, with a value that takes the form “translate(x,y)”. If you move your rectangle only horizontally, your “translate” will have only a single parameter – if it’s omitted entirely, the “y” parameter is considered to be zero.**
-Vous avez ces deux dialogues ouverts ainsi que la fenêtre principale d'Inkscape. Arrangez-les pour pouvoir disposer du canevas en même temps que vous voyez ce qui se passe dans l'éditeur XML. Sélection le rectangle de votre document, puis utilisez les touches fléchées pour le déplacer un peu. Notez que vos attributs « x » et « y » changent dans l'éditeur XML pendant que vous le faites.
+Les deux dialogues devraient être ouverts maintenant ainsi que la fenêtre principale d'Inkscape. Arrangez-les pour pouvoir disposer du canevas en même temps que vous voyez ce qui se passe dans l'éditeur XML. Sélectionnez le rectangle de votre document, puis utilisez les touches fléchées pour le déplacer un peu. Notez que les attributs « x » et « y » changent dans l'éditeur XML pendant que vous le faites.
 Maintenant, retournez dans les Préférences d'Inkscape et commutez « Enregistrement des transformations » sur « Préservé ». Refaites l'exercice de déplacer le rectangle avec les touches fléchées, en gardant à nouveau un œil sur l'éditeur XML.
@@ Ligne 28: / Ligne 28: @@
 **That’s all very interesting, but what have we actually achieved? One important point is that we’ve now switched from using absolute coordinates to relative ones. Instead of setting absolute coordinates (“x” and “y” attributes), we’re combining an absolute starting point (the “x” and “y” attributes) together with a relative offset (the “x” and “y” parameters in the translate() function). Think back to our animation from last time: we had to keep track of the current “x” value and add our offset to it each time. By manipulating a “transform” attribute instead, we just have to set the offset directly, simplifying our code. It no longer matters what the coordinates were previously, we need to set only the translate() to the right values for the amount of time that has elapsed in our animation. It also leaves the original coordinates untouched, so moving the object back to its starting position is easier. This also makes our code more reusable: we can apply the same animation to various objects, each with their own “x” and “y” attributes, and therefore all separately positioned, despite sharing the same relative movement.**
+Tout ça est très intéressant, mais qu'avons-nous accompli ? Nous sommes maintenant passé de coordonnées absolues à relatives et cela est important. Au lieu de régler des coordonnées absolues (attributs « x » et « y »), nous combinons un point de départ en coordonnées absolues (les attributs « x » et « y ») et un décalage relatif (les paramètres « x » et « y » dans la fonction translate()). Revenez à l'animation de la dernière fois : nous avions besoin de garder une trace de la valeur courante de « x » et de lui ajouter un décalage à chaque fois. Si, à la place, nous manipulons un attribut « transform », nous devons simplement régler directement le décalage, simplifiant ainsi le code. La valeur des coordonnées précédentes n'a donc plus aucun intérêt ; nous devons seulement régler translate() aux bonnes valeurs en fonction du temps passé depuis le début de l'animation. Cela conserve aussi les coordonnées initiales, ce qui rend plus facile un retour de l'objet à son point de départ. Cela rend aussi notre code plus réutilisable : nous pouvons appliquer la même animation à plusieurs objets, chacun avec ses propres attributs « x » et « y », et, par conséquent, positionnés séparément, bien qu'ils partagent le même mouvement relatif.
 **Another key use for the transform attribute is in combination with groups. The SVG <g> element doesn’t have its own “x” and “y” attributes, so moving a group of objects (as one) would require code to update the attributes of each and every element in the group on each step of the animation. By setting a transform attribute on the group, you can obtain the same effect with far less work.
 So the transform attribute is a useful, if not essential, way of moving objects around in your drawing. But it offers more than that. Consider how you might incorporate rotation into your animation. If you’re animating a path – and you’re sufficiently mathematically astute – you could recalculate the coordinates of each node and handle in the path. But us mere mortals need an easier way to manage such tasks and the transform attribute offers that capability.**
+Un autre usage fondamental de l'attribut transform est en combinaison avec des groupes. L'élément <g> du SVG ne possède pas ses propres attributs « x » et « y » de sorte que le déplacement d'un groupe d'objets (comme d'un seul) nécessitera une mise à jour individuelle des attributs de chaque élément du groupe à chaque pas de l'animation. En paramétrant un attribut transform pour le groupe, vous pouvez obtenir le même effet avec nettement moins d'effort.
+Aussi, l'attribut transform est une façon utile, voire indispensable, de déplacer des objets sur votre dessin. Mais il offre plus que ça. Imaginez que vous puissiez introduire la rotation dans votre dessin. Si vous animez un chemin - et que vous êtes suffisamment astucieux en mathématiques - vous pouvez recalculer les coordonnées de chaque nœud et poignée du chemin. Mais nous autres, pauvres mortels, avons besoin d'une manière plus facile de gérer de telles tâches et l'attribut transform nous offre cette capacité.
 **To see how it works, revert your rectangle back to a point where there’s no transform attribute showing in the XML editor, and change the “Store transformation” setting back to “Optimised”. With the selection tool active, click the rectangle a second time to switch to the rotate and skew handles. Use the corner arrows to rotate the rectangle and you should see a transform attribute appear, but this time with a value of “rotate(r)”, where “r” is the amount of rotation in degrees. By holding the Ctrl key, you can make the value jump between the steps defined in Inkscape’s preferences, or release the key for free rotation of your shape.
 Notice that rotating the object not only adds a transform() with the rotation amount, but also changes the “x” and “y” values. Once again, set “Store transformation” to “Preserved”. Now the transform() function has three parameters: the rotation angle and the x and y coordinates of the center of rotation.**
+Pour voir comment il fonctionne, ramenez votre rectangle au point où l'attribut transform n'est plus visible dans l'éditeur XML et replacez le paramètre « Enregistrement de la transformation » sur « Optimisé ». Avec l'outil de sélection actif, cliquez une seconde fois sur le rectangle pour passer sur des poignées de rotation et de glissement en biais. Utilisez les flèches d'angle pour faire tourner le rectangle et vous devriez voir apparaître un attribut transform, mais, cette fois, avec une valeur « rotate(r) » où « r » est la quantité de rotation en degrés. Tout en appuyant sur la touche Ctrl, vous pouvez faire sauter cette valeur par pas définis dans les préférences d'Inkscape ou relâcher la touche pour une rotation libre de votre forme.
+Notez que la rotation de votre objet, non seulement ajoute un transform () avec la valeur de la rotation, mais aussi modifie les valeurs « x » et « y ». Une fois encore, réglez « Enregistrement de la transformation » sur « Préservé ». Maintenant, la fonction transform() a trois paramètres : l'angle de rotation et les coordonnées x et y du centre de rotation.
 **There are four other functions that can be used in the transform attribute:
@@ Ligne 46: / Ligne 56: @@
 skewX() and skewY() transform your element in the same way as the skew handles in the Inkscape UI. They each take a value, in degrees, that specifies the angle of skew.**
+Quatre autres fonctions peuvent être utilisées dans l'attribut transform :
+scale(x, y)
+skewX(a)
+skewY(a)
+matrix(a, b, c, d, e, f)
+Je les ai listés séparément du fait de la façon dont Inkscape les traite. La fonction scale() augmente ou diminue simplement la taille de l'objet, le déformant si les valeurs x et y ne sont pas les mêmes. Comme pour translate(), le paramètre y est optionel.
+skewX() et skewY() transforment votre élément de la même manière que les poignées de déformation dans l'interface graphique d'Inkscape. Ils utilisent l'un et l'autre une valeur, en degrés, qui spécifie l'angle de déformation.
 **These three functions map fairly obviously to the select tool in Inkscape, which can be used to stretch, scale and skew an object. So you might expect to see these functions appear in the XML editor as you manipulate your object. Instead you’ll get the matrix() function appearing.
 Without going into too much detail, the matrix() function lets you supply a series of six numbers that are used to fill the first two rows in a 3×3 matrix. This is used via standard mathematical matrix multiplication to map the original coordinates of the object to the transformed coordinates. In non-mathematical terms, a single matrix can not only produce the same output as all the other transformation functions, but can also produce output that is equivalent to any combination or mixture of them. Want to skew, rotate, scale and translate all at once? A matrix() transform will do the trick.**
+Ces trois fonctions cadrent plutôt bien avec l'outil de sélection d'Inkscape, qui peut être utilisé pour étirer, mettre à l'échelle ou déformer un objet. Aussi, vous pourriez espérer voir ces trois fonctions apparaître dans l'éditeur XML quand vous manipulez votre objet. Au lieu de ça, vous voyez apparaître la fonction matrix().
+Sans trop rentrer dans les détails, la fonction matrix() vous permet de fournir une série de 6 nombres qui sont utilisés pour remplir les deux premières lignes d'une matrice 3x3. Celle-ci est utilisée via la multiplication matricielle des mathématiques pour faire correspondre les coordonnées d'origine aux coordonnées de la transformation. En termes non mathématiques, une simple matrice peut non seulement produire le même résultat que toutes les autres fonctions de transformation, mais peut aussi produire un résultat équivalent à n'importe quelle combinaison et mélange d'entre elles. Voulez-vous déformer, tourner, mettre à l'échelle et translater d'un seul coup ? Une transformation avec matrix() fera l'affaire.
 **Working out the six numbers that need to be passed to the matrix() function is not for the faint-hearted. They don’t correspond to simple values such as x, y and rotation. So although Inkscape likes to use the matrix() function internally, it’s probably not something you want to be manipulating in JavaScript. Fortunately there are a couple of ways to work with the individual functions, rather than being forced to combine everything into a single matrix().
@@ Ligne 56: / Ligne 80: @@
 When loaded into Inkscape the result looks like this:**
+Calculer les six nombres qui doivent être transmis à la fonction matrix() n'est pas une mince affaire. Ils ne correspondent pas à de simples valeurs telles que x, y et la rotation. Aussi, bien qu'Inkscape aime utiliser la fonction matrix() en interne, ce n'est probablement pas quelque chose que vous souhaitez manipuler avec JavaScript. Heureusement, il y a d'autres manières de travailler avec les fonctions individuelles, plutôt que d'être forcé à tout combiner dans une seule matrix().
+La première est de simplement regrouper vos objets dans des groupes SVG (l'élément <g>) et d'appliquer une transformation différente à chacun. Voici à quoi peut ressembler un fichier SVG (en haut à droite) si vous prenez cette approche pour, à la fois, déformer et tourner un carré :
+Quand il est chargé dans Inkscape, le résultat ressemble à cela :
 **Opening the XML editor shows that the transform on the outer group remains intact – it’s still a skewX() and doesn’t get automatically converted to a matrix() when loading it into Inkscape. As soon as you make a change via the GUI, however, the transform’s value will be replaced with a matrix(). If you just want to change the value in the existing function (eg. changing the angle of skew in this case), then you can make the modification in the XML editor. But remember that a <g> doesn’t have its own x and y attributes, so even something as trivial as moving the object slightly will mean Inkscape converts the attribute to a matrix() that combines the skew with the translate.
@@ Ligne 61: / Ligne 91: @@
 This is an important thing to be aware of. It’s easy to set up a file for animation with some nicely hand-coded transform attributes, then absent-mindedly open it in Inkscape to make a minor change, only to find that your hand-coded values have all been replaced with matrix() functions instead.**
-**There is a second way to apply multiple transformations to an object: you just list them all in a single transform() element. Here’s a version of the previous file, but this time there’s no need for the <g> elements, since the transformation can be applied directly to the square (below).
+Quand l'éditeur XML est ouvert, il montre que la transformation du groupe extérieur reste intacte - il reste un skewX() et il n'est pas automatiquement converti en matrix() quand il est chargé dans Inkscape. Cependant, dès que vous faites une modification via l'interface graphique, la valeur de la transformation sera remplacée par une matrix(). Si vous ne voulez changer que la valeur d'une fonction existante (par ex., dans ce cas, modifier l'angle de déformation), alors vous pouvez faire la modification dans l'éditeur XML. Mais souvenez-vous qu'un <g> n'a pas d'attributs x et y en propre ; aussi, une chose aussi triviale que de déplacer légèrement l'objet signifiera qu'Inkscape convertira l'attribut en une matrix() qui combinera la déformation avec la translation.
+C'est une chose importante à laquelle il faut être attentif. C'est facile de paramètrer un fichier pour une animation avec quelques attributs transform codés à la main, puis, sans plus réfléchir, de l'ouvrir dans Inkscape pour une modification mineure, pour s'apercevoir alors que les valeurs codées à la main ont été remplacées par des fonctions matrix().
+**There is a second way to apply multiple transformations to an object: you just list them all in a single transform() element. Here’s a version of the previous file, but this time there’s no need for the <g> elements, since the transformation can be applied directly to the square (below).
 Note that the transform attribute is now a list of transformations to apply. The white-space isn’t important: I’ve listed the functions one-per-line for clarity, but you could just put them onto a single line with a space character between them. When viewed in Inkscape, they appear in the XML editor on a single line, with every space and tab included between them, but none of the carriage returns:
 Once again, there’s no real surprise with the appearance of the file when it’s loaded into Inkscape (see above).**
+Une seconde façon existe d'appliquer des transformations multiples à un objet : vous les listez toutes dans un seul élément transform. Voici une version du fichier précédent, mais, cette fois, sans la nécessité d'un élément <g>, car la transformation peut être appliquée directement au carré (ci-dessous) :
+Notez que l'attribut transform est maintenant une liste de transformations à appliquer. L'espace blanc n'est pas important : j'ai listé les fonctions ligne par ligne pour la clarté, mais vous pourriez simplement les mettre sur une seule ligne avec un caractère d'espacement entre chaque. Vu dans Inkscape, elles apparaissent dans l'éditeur XML sur une seule ligne, avec une espace et une tabulation entre chaque, mais sans retour à la ligne :
+Encore une fois, il n'ya pas de grande surprise dans l'apparence du fichier quand il est chargé dans Inkscape (voir ci-dessus).
 **Yet again, with this approach we face the same issue of Inkscape’s desire to convert the value into a single matrix(). This time we do have x and y attributes (since we’re working on the <rect> itself), so you might think that a “Store transformation” setting of “Optimised” might leave the transform untouched and just update the coordinates when you move the object around. Unfortunately, even in this case you’ll find that a matrix() comes along and tramples over everything, in addition to the x and y attributes changing.
 It’s annoying that Inkscape doesn’t offer a third option beyond “Optimised” and “Preserved”. A “Verbose” option that stores transforms in a more human-friendly form. Instead of a composite matrix() function, you would get a list of separate functions in the attribute. Moving would add or update the translate(), rotating would add or update the rotate(), and so on. For anyone planning to manipulate their SVG file with code, the advantages of this approach would be huge.**
+Je me répète, mais avec cette approche, nous faisons face au même problème du souhait d'Inkscape de convertir la valeur dans une seule matrix(). Cette fois, nous avons vraiment des attributs x et y (car nous travaillons directement sur le <rect>) ; aussi, vous pourriez penser que, si le paramètre « Enregistrement de la transformation » était sur « Optimisé », transform serait conservée et que les coordonnées seraient juste mises à jour quand vous bougez votre objet. Malheureusement, même dans ce cas, vous verriez qu'une matrix() revient et remplace tout, en plus de la modification des attributs x et y.
+C'est ennuyeux qu'Inkscape n'offre pas de troisième option en plus de « Optimisé » et « Préservé ». Une option « Verbose » (bavard) qui enregistrerait les transformations dans une forme plus lisible pour l'être humain. À la place d'une fonction matrix() composite, vous pourriez avoir une liste de fonctions séparées dans l'attribut. Un déplacement ajouterait ou mettrait à jour translate(), une rotation, rotate() et ainsi de suite. Pour quelqu'un qui prévoierait de manipuler ses fichiers SVG avec du code, les avantages de cette méthode seraient énormes.
 **As it stands, for most Inkscape users the internal details of how objects are moved, rotated, scaled and skewed is irrelevant. “Preserved” or “Optimised” has no bearing on how you work with elements in the GUI, or how the image is rendered in a web browser. If you do wish to alter the transform attribute using JavaScript, then there’s a slight advantage to “Preserved” – but only if the x and y attributes are set correctly in the first
 **
+À ce qu'il semble, pour la plupart des utilisateurs d'Inkscape, les détails internes de ce qui se passe en déplaçant, tournant, adaptant l'échelle et déformant des objets est sans intérêt. « Préservé » ou « Optimisé »
+n'a aucune incidence sur la manière dont fonctionnent les éléments dans l'interface graphique ou comment l'image est rendue dans un navigateur Web. Si vous souhaitez vraiment modifier l'attribut transform en utilisant JavaScript, il y a alors un léger avantage pour « Préservé » - mais seulement si les attributs « x » et « y » sont d'abord paramétrés correctement.