Différences

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

--- issue148:inkscape [2019/09/13 14:16] – auntiee
+++ issue148:inkscape [2019/09/14 15:09] (Version actuelle) – d52fr
@@ Ligne 45: / Ligne 45: @@
 **Breaking this down, we have an <svg> tag containing a <text> tag with some further content. The <svg> tag has a couple of attributes. The first defines the default namespace, and is required so that the browser knows this is a document conforming to the W3C’s SVG spec, and not some other type of file that happens to have a tag name called ‘svg’. The second attribute sets up the coordinate space we’ll be using in this file – I usually stick with "0 0 100 100" for my hand-created files, as I can then treat my values as percentages within the image.**
-En décomposant cet exemple, nous avons une balise <svg> contenant une balise <text> avec un peu plus de contenu. La balise <svg> possède quelques attributs. Le premier définit l'espace de noms par défaut et est nécessaire pour que le navigateur sache qu'il s'agit d'un document conforme aux spécifications SVG du W3C, et non d'un autre type de fichier qui a un nom de balise appelé 'svg'. Le deuxième attribut définit l'espace de coordonnées que nous utiliserons dans ce fichier - je m'en tiens généralement à "0 0 100 100 100" pour mes fichiers créés à la main, car je peux alors traiter mes valeurs en pourcentage dans l'image.
+En décomposant cet exemple, nous avons une balise <svg> contenant une balise <text> avec un peu plus de contenu. La balise <svg> possède quelques attributs. Le premier définit l'espace de noms par défaut et est nécessaire pour que le navigateur sache qu'il s'agit d'un document conforme aux spécifications SVG du W3C, et non d'un autre type de fichier qui a un nom de balise appelé 'svg'. Le deuxième attribut définit l'espace de coordonnées que nous utiliserons dans ce fichier - je m'en tiens généralement à "0 0 100 100" pour mes fichiers créés à la main, car je peux alors traiter mes valeurs en pourcentage dans l'image.
 **The <text> tag also has some attributes. The ID is self-explanatory. The others set the ‘anchor point’ for the text to the middle of the image (50, 50), and indicate that the anchor point should be in the middle of the text (i.e. the text is centered, not left- or right-aligned).**
@@ Ligne 77: / Ligne 77: @@
 **The SVG content should react as soon as you press the Enter key. Type the letter “t” again and you’ll see that the element now has a “style” attribute with the font-size property set. Notice that we set “fontSize” in JS, but the CSS in the attribute shows “font-size”. If you tried to use the latter in JavaScript, it would be interpreted as trying to subtract the “size” variable from the “font” variable, and would throw an error. As a general rule, any CSS property containing embedded hyphens is available as a JavaScript property by removing the hyphens and capitalising the first letter of all but the first word.**
-Le contenu SVG devrait réagir dès que vous appuyez sur la touche Entrée. Tapez à nouveau la lettre « t » et vous verrez que l'élément a maintenant un attribut « style » avec l'ensemble de propriétés « font-size ». Notez que nous avons défini « fontSize » dans JS, mais le CSS dans l'attribut montre « font-size ». Si vous essayez d'utiliser ce dernier en JavaScript, cela serait interprété comme une tentative de soustraire la variable "size" de la variable "font", et cela provoquerait une erreur. En règle générale, toute propriété CSS contenant des traits d'union intégrés est disponible en tant que propriété JavaScript en supprimant les traits d'union et en mettant en majuscule la première lettre de tous les mots sauf le premier.
+Le contenu SVG devrait réagir dès que vous appuyez sur la touche Entrée. Tapez à nouveau la lettre « t » et vous verrez que l'élément a maintenant un attribut « style » avec l'ensemble de propriétés « font-size ». Notez que nous avons défini « fontSize » dans JS, mais le CSS dans l'attribut montre « font-size ». Si vous essayez d'utiliser ce dernier en JavaScript, cela serait interprété comme une tentative de soustraire la variable « size » de la variable « font », et cela provoquerait une erreur. En règle générale, toute propriété CSS contenant des traits d'union intégrés est disponible en tant que propriété JavaScript en supprimant les traits d'union et en mettant en majuscule la première lettre de tous les mots sauf le premier.
 **Breaking down the line above, you know that “t” is a JavaScript representation of our XML node. The browser exposes various properties and methods (functions tied to a specific object) on that node, including the “style” property. This property, in turn, has a “fontSize” property, which we’ve set to a value of “10px”. But the browser treats the “style” property a little differently to most JavaScript properties, and instead also applies any changes to the “style” attribute in the XML. In this instance, it doesn’t matter whether you change the attribute or the property – but that’s not usually the case.**
@@ Ligne 91: / Ligne 91: @@
 **Type “t” again to see the XML, and you’ll notice the “y” attribute now has a value of “20”. We can also retrieve that value using the getAttribute() method:**
-Tapez à nouveau « t » pour voir le XML, et vous remarquerez que l'attribut "y" a maintenant une valeur de « 20 ». Nous pouvons aussi récupérer cette valeur en utilisant la méthode getAttribute() :
+Tapez à nouveau « t » pour voir le XML, et vous remarquerez que l'attribut « y » a maintenant une valeur de « 20 ». Nous pouvons aussi récupérer cette valeur en utilisant la méthode getAttribute() :
 t.getAttribute("y");
@@ Ligne 109: / Ligne 109: @@
 **The problem is that XML is a text-based system, and doesn’t really have a concept of different data types. All attributes are therefore text strings, regardless of the value you put in, so our call to getAttribute() returns the string “20”, not the number 20. JavaScript then tries to be ‘helpful’ by determining that we’re trying to ‘add’ the number 10 to the string “20”. Since you can’t add a number to a string, it automatically converts the number into a string (“10”), then concatenates the two, to give a result of “2010”. That’s the value we end up putting into the attribute in our setAttribute() call, so our text ends up being moved to a y-position of 2010 units!**
-Le problème est que XML est un système basé sur le texte, et n'a pas vraiment un concept de différents types de données. Tous les attributs sont donc des chaînes de texte, quelle que soit la valeur que vous entrez, donc notre appel à getAttribute() renvoie la chaîne "20", pas le nombre 20. JavaScript essaie alors de se rendre « utile » en déterminant que nous essayons d'ajouter le chiffre 10 à la chaîne "20". Comme vous ne pouvez pas ajouter un nombre à une chaîne, il convertit automatiquement le nombre en une chaîne ("10"), puis concatène les deux, pour donner un résultat de "2010". C'est la valeur que nous finissons par mettre dans l'attribut dans notre appel setAttribute() et notre texte finit par être déplacé vers une position y avec une valeur égale à 2010 !
+Le problème est que XML est un système basé sur le texte, et n'a pas vraiment un concept de différents types de données. Tous les attributs sont donc des chaînes de texte, quelle que soit la valeur que vous entrez, donc notre appel à getAttribute() renvoie la chaîne « 20 », pas le nombre 20. JavaScript essaie alors de se rendre « utile » en déterminant que nous essayons d'ajouter le chiffre 10 à la chaîne « 20 ». Comme vous ne pouvez pas ajouter un nombre à une chaîne, il convertit automatiquement le nombre en une chaîne (« 10 »), puis concatène les deux, pour donner un résultat de « 2010 ». C'est la valeur que nous finissons par mettre dans l'attribut dans notre appel setAttribute() et notre texte finit par être déplacé vers une position y avec une valeur égale à 2010 !
 **We can fix this by converting the value returned from getAttribute() into a number. We only want an integer value, so the parseInt() function is the tool to use – but there is also a parseFloat() if you need to deal with decimal fractions. parseInt() has a second parameter for the number base that you should always provide (with a value of 10 for a decimal conversion) to avoid some rare-but-odd corner case bugs when converting certain strings. Entering the following lines into the console should get us the result we were looking for:**
@@ Ligne 174: / Ligne 174: @@
 **Even though we’re working on an SVG file, which is a form of XML document, we still have to use the “innerHTML” property. This returns all the descendants of the specified node as a string – basically a string of HTML (or XML in this case) much like the ones you type into a text editor. The “+=” operator essentially retrieves a value, adds or concatenates something to it, and puts the result back into the same place. In our case it has the effect of appending a new <tspan> to the end of the existing content.**
-Même si nous travaillons sur un fichier SVG, qui est une forme de document XML, nous devons quand même utiliser la propriété "innerHTML". Cela retourne tous les descendants du nœud spécifié sous la forme d'une chaîne de caractères - essentiellement une chaîne de caractères HTML (ou XML dans ce cas-ci) comme celles que vous tapez dans un éditeur de texte. Essentiellement, l'opérateur "+=" récupère une valeur, lui ajoute ou concatène quelque chose, et remet le résultat au même endroit. Dans notre cas, cela a pour effet d'ajouter un nouveau <tspan> à la fin du contenu existant.
+Même si nous travaillons sur un fichier SVG, qui est une forme de document XML, nous devons quand même utiliser la propriété « innerHTML ». Cela retourne tous les descendants du nœud spécifié sous la forme d'une chaîne de caractères - essentiellement une chaîne de caractères HTML (ou XML dans ce cas-ci) comme celles que vous tapez dans un éditeur de texte. Essentiellement, l'opérateur « += » récupère une valeur, lui ajoute ou concatène quelque chose, et remet le résultat au même endroit. Dans notre cas, cela a pour effet d'ajouter un nouveau <tspan> à la fin du contenu existant.
 **Let’s do something similar, but with a more complex approach…**