| Les deux révisions précédentesRévision précédente | |
| issue151:inkscape [2019/12/09 14:48] – auntiee | issue151:inkscape [2019/12/09 17:59] (Version actuelle) – andre_domenech |
|---|
| **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.** |
| |
| 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 un 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. | 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…). | **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…). |
| 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.** |
| |
| Les deux dialogues devrait ê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. | 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. | 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. |
| matrix(a, b, c, d, e, f) | matrix(a, b, c, d, e, f) |
| |
| Je les ai listé séparément du fait de la façon dont Inkscape les traite. La fonction scale() augmente ou diminue simplement la taile 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. | 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. | 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. |
| 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. | 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 ajouterais ou mettrais à jour translate(), une rotation, rotate() et ainsi de suite. Pour quelqu'un qui prévoierais de manipuler ses fichiers SVG avec du code, les avantages de cette méthode seraient énormes. | 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 | **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 |
