Outils pour utilisateurs

Outils du site


issue151:inkscape

Différences

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

Lien vers cette vue comparative

Prochaine révision
Révision précédente
issue151:inkscape [2019/11/30 13:48]
auntiee créée
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.+**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.**
  
-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…).+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…).
  
 By now, the right-hand side of this dialog should make some sense to you. You can see the usual collection of attributes that you would expect to find on a <​rect>,​ together with their values – including the familiar “x” and “y” attributes. By now, the right-hand side of this dialog should make some sense to you. You can see the usual collection of attributes that you would expect to find on a <​rect>,​ together with their values – including the familiar “x” and “y” attributes.
  
-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”.+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”.**
  
-You should now have these two dialogs open, together with your main Inkscape window. Arrange things so that you can easily get to the main canvas whilst seeing what happens in the XML editor. Select the rectangle in your document, then use the cursor keys to move it around a little. Notice that your “x” and “y” attributes in the XML editor change as you do so.+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...). 
 + 
 +À 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é ».  
 + 
 +**You should now have these two dialogs open, together with your main Inkscape window. Arrange things so that you can easily get to the main canvas whilst seeing what happens in the XML editor. Select the rectangle in your document, then use the cursor keys to move it around a little. Notice that your “x” and “y” attributes in the XML editor change as you do so.
  
 Now return to the Inkscape Preferences dialog and switch the “Store transformation” option to “Preserved”. Repeat the exercise of moving the rectangle around using the cursor keys, once again keeping an eye on the XML editor. Now return to the Inkscape Preferences dialog and switch the “Store transformation” option to “Preserved”. Repeat the exercise of moving the rectangle around using the cursor keys, once again keeping an eye on the XML editor.
  
-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.+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.**
  
-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 onesInstead 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 insteadwe just have to set the offset directly, simplifying our codeIt 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.+Les deux dialogues devraient être ouverts maintenant ainsi que la fenêtre principale d'​InkscapeArrangez-les pour pouvoir disposer du canevas en même temps que vous voyez ce qui se passe dans l'​éditeur XMLSélectionnez le rectangle de votre documentpuis utilisez les touches fléchées pour le déplacer un peuNotez que les attributs « » et « » changent dans l'​éditeur XML pendant que vous le faites.
  
-Another key use for the transform attribute is in combination with groups. The SVG <g> element doesn’t have its own “x” and “y” attributesso 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 animationBy setting a transform attribute on the groupyou can obtain the same effect with far less work.+Maintenantretournez 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éesen gardant à nouveau un œil sur l'​éditeur XML.
  
-So the transform attribute is a usefulif not essentialway of moving objects around in your drawingBut 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.+Vous devriez avoir noté quecette fois-ciles attributs « x » et « y » restent inchangésÀ la place, un nouvel attribut « transform ​» est ajouté, avec une valeur de la forme « translate(x,​y) ». Si vous ne déplacez votre rectangle qu'à l'​horizontale,​ votre « translate » n'aura qu'un seul paramètre - si « y » est omis, il est considéré comme valant zéro.
  
-To see how it works, revert your rectangle back to a point where there’s no transform attribute showing in the XML editorand change the Store transformation” setting back to Optimised. With the selection tool activeclick the rectangle ​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 ​appearbut this time with a value of “rotate(r)”, where “r” is the amount of rotation ​in degreesBy holding ​the Ctrl keyyou can make the value jump between the steps defined in Inkscape’s preferencesor release ​the key for free rotation of your shape.+**That’s all very interestingbut 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 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 ​transform” attribute ​insteadwe 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 animationIt also leaves ​the original coordinates untouchedso 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 objectseach with their own “x” and “y” attributes, and therefore all separately positioned, despite sharing ​the same relative movement.**
  
-Notice that rotating the object not only adds a transform() with the rotation amountbut also changes the “x” and “y” valuesOnce again, set “Store transformation” to “Preserved”Now the transform() ​function has three parametersthe rotation angle and the and coordinates of the center of rotation.+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 « » et « ») 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 foisSi, à 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 « » et « », et, par conséquent,​ positionnés séparément,​ bien qu'ils partagent le même mouvement relatif
  
-There are four other functions that can be used in the transform attribute:+**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:
 scale(x, y) scale(x, y)
 skewX(a) skewX(a)
Ligne 31: Ligne 55:
 I’ve called these out separately because of the way Inkscape treats them. The scale() function simply increases or decreases the size of the object, stretching it if the x and y values are not the same. As with translate() the y parameter is optional. I’ve called these out separately because of the way Inkscape treats them. The scale() function simply increases or decreases the size of the object, stretching it if the x and y values are not the same. As with translate() the y parameter is optional.
  
-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.+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.**
  
-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.+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().
  
-Without going into too much detailthe matrix() ​function lets you supply a series of six numbers that are used to fill the first two rows in a 3×3 matrixThis is used via standard mathematical matrix ​multiplication ​to map the original coordinates of the object to the transformed coordinatesIn non-mathematical termsa single matrix can not only produce the same output as all the other transformation ​functionsbut can also produce output that is equivalent to any combination or mixture of themWant to skewrotatescale and translate all at oncematrix() ​transform will do the trick.+Sans trop rentrer dans les détailsla 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 3x3Celle-ci est utilisée ​via la multiplication ​matricielle des mathématiques pour faire correspondre les coordonnées d'​origine aux coordonnées de la transformationEn termes ​non mathématiquesune 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 ellesVoulez-vous déformertournermettre à 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().+**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().
  
 The first is simply to wrap your objects in SVG groups (the <g> element), and apply a separate transformation to each one. Here’s how an SVG file might look (top right) if we took this approach to both skew and rotate a square: The first is simply to wrap your objects in SVG groups (the <g> element), and apply a separate transformation to each one. Here’s how an SVG file might look (top right) if we took this approach to both skew and rotate a square:
  
-When loaded into Inkscape the result looks like this:+When loaded into Inkscape the result looks like this:**
  
-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 InkscapeAs soon as you make a change via the GUIhoweverthe 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 <g> doesn’t have its own x and y attributesso 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+Calculer les six nombres qui doivent être transmis à la fonction ​matrix() ​n'est pas une mince affaireIls ne correspondent pas à de simples valeurs telles que xy et la rotation. Aussibien qu'​Inkscape aime utiliser la fonction ​matrix() ​en interne, ce n'est probablement pas quelque chose que vous souhaitez manipuler avec JavaScriptHeureusementil y d'​autres manières de travailler avec les fonctions individuellesplutôt que d'​être forcé à tout combiner dans une seule matrix().
  
-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.+La première est de simplement regrouper vos objets dans des groupes SVG (l'​élément <g>et d'​appliquer une transformation différente à chacunVoici à quoi peut ressembler un fichier SVG (en haut à droite) si vous prenez cette approche pour, à la fois, déformer et tourner un carré :
  
-There is a second way to apply multiple transformations to an objectyou 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 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. ​
 +
 +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.**
 +
 +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: 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).+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.**
  
-Yet againwith this approach we face the same issue of Inkscape’s desire to convert the value into a single ​matrix(). ​This time we do have and 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 aroundUnfortunatelyeven in this case you’ll find that a matrix() ​comes along and tramples over everythingin addition to the and attributes changing.+Je me répètemais 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 ​et y (car nous travaillons directement sur le <​rect>​) ​; aussivous 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 objetMalheureusement,​ même dans ce casvous verriez qu'​une ​matrix() ​revient et remplace touten plus de la modification des attributs ​et y.
  
-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 formInstead of a composite ​matrix() ​functionyou would get a list of separate functions in the attributeMoving would add or update the translate(), ​rotating would add or update the rotate(), and so onFor anyone planning to manipulate their SVG file with code, the advantages of this approach would be huge.+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() ​compositevous pourriez avoir une liste de fonctions séparées dans l'​attributUn déplacement ajouterait ou mettrait à jour translate(), ​une rotation, ​rotate() ​et ainsi de suitePour 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 +**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.
issue151/inkscape.1575118120.txt.gz · Dernière modification: 2019/11/30 13:48 par auntiee