| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue151:inkscape [2019/12/09 14:18] – d52fr | 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 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…). | **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…). |
| 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”.** |
| |
| 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 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...). |
| |
| Aujourd'hui, 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é ». | 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 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.** |
| |
| Vous devriez avoir maintenant 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électionnez 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. | 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. |
| **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.** | **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'est-ce que nous avons réalisé ? C'est un point important que nous soyons maintenant passé de coordonnées absolues à relatives. Au lieu de règlent 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. | 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. | **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.** | 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 moins d'effort. | 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'un manière plus facile de gérer de telles tâches et l'attribut transform nous offre cette capacité. | 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. | **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.** | 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. En tenant appuyé la touche Ctrl, vous pouvez faire sauter cette valeur par pas définis dans les préférences d'Inkscape ou relacher la touche pour une rotation libre de votre forme. | 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. | 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. |
| 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. |
| When loaded into Inkscape the result looks like this:** | 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(). | 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é : | 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é : |
| 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.** | 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 fait 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. | 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(). | 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(). |
| 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 : simplement, 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) : | 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 : | 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 : |
| 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.** | 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(). Cete 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 |
| |
| À 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é » | À 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'ont 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. | 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. |
