Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste :
issue148:inkscape

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
issue148:inkscape [2019/09/12 17:20] – lecastillanissue148:inkscape [2019/09/14 15:09] (Version actuelle) – d52fr
Ligne 27: Ligne 27:
 ** • textContent – This is not so common in XML. Usually, an element will contain zero or more child elements before the closing tag (the </tagName> in this example), but a few elements allow for plain text to be included. In SVG, the most common cases are <text> and <tspan> elements, where the plain text holds the text string that will be rendered. ** ** • textContent – This is not so common in XML. Usually, an element will contain zero or more child elements before the closing tag (the </tagName> in this example), but a few elements allow for plain text to be included. In SVG, the most common cases are <text> and <tspan> elements, where the plain text holds the text string that will be rendered. **
  
-• textContent - Ce n'est pas si commun en XML. Habituellement, un élément contiendra zéro ou plus d'éléments enfants avant la balise de fermeture (le </tagName> dans cet exemple), mais quelques éléments permettent d'inclure du texte brut. Dans SVG, les cas les plus courants sont <text> et <tspan> éléments, où le texte brut contient la chaîne de texte qui sera traitée.+• textContent - Ce n'est pas si commun en XML. Habituellement, un élément contiendra zéro ou plus d'éléments enfants avant la balise de fermeture (le </tagName> dans cet exemple), mais quelques éléments permettent d'inclure du texte brut. Dans SVG, les cas les plus courants sont des éléments <text> et <tspan>, où le texte brut contient la chaîne de texte qui sera traitée.
  
 ** There are also a couple of variations to be aware of. Self-closing tags take the form <tagName … />. By definition these can have no children or text content. XML documents also make use of namespaces, which are defined in the main tag for the document (e.g. the <svg> tag), and may then crop up appended to tags and attributes with a colon. You won’t see these often: usually a default namespace is declared, in which case namespaces need to be added only to tags and attributes that are from ‘foreign’ XML languages. ** ** There are also a couple of variations to be aware of. Self-closing tags take the form <tagName … />. By definition these can have no children or text content. XML documents also make use of namespaces, which are defined in the main tag for the document (e.g. the <svg> tag), and may then crop up appended to tags and attributes with a colon. You won’t see these often: usually a default namespace is declared, in which case namespaces need to be added only to tags and attributes that are from ‘foreign’ XML languages. **
  
-Il y a aussi quelques variations à prendre en compte. Les balises à fermeture automatique prennent la forme <tagName... />. Par définition, elles ne peuvent pas avoir d'enfants ou de contenu textuel. Les documents XML utilisent également des espaces de noms, qui sont définis dans la balise principale du document (par exemple la balise <svg>), et peuvent ensuite être ajoutés aux balises et attributs avec deux points. Vous ne les verrez pas souvent : en général, un espace de noms par défaut est déclaré, auquel cas les espaces de noms ne doivent être ajoutés qu'aux balises et attributs qui proviennent de langages XML "étrangers".+Il y a aussi quelques variations à prendre en compte. Les balises à fermeture automatique prennent la forme <tagName... />. Par définition, elles ne peuvent pas avoir d'enfants ou de contenu textuel. Les documents XML utilisent également des espaces de noms (namespaces), qui sont définis dans la balise principale du document (par exemple la balise <svg>), et peuvent ensuite être ajoutés aux balises et attributs avec deux points. Vous ne les verrez pas souvent : en général, un espace de noms par défaut est déclaré, auquel cas les espaces de noms ne doivent être ajoutés qu'aux balises et attributs qui proviennent de langages XML "étrangers".
  
 ** The theory is fine, but let’s see how these parts manifest themselves with yet another super-simplified SVG file: ** ** The theory is fine, but let’s see how these parts manifest themselves with yet another super-simplified SVG file: **
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.** **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).** **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 53: Ligne 53:
 **Finally the <text> tag contains a mixture of text content and a couple of <tspan> elements with IDs, which will allow us to specifically target those parts of the text via JavaScript.** **Finally the <text> tag contains a mixture of text content and a couple of <tspan> elements with IDs, which will allow us to specifically target those parts of the text via JavaScript.**
  
-Enfin, la balise <text> contient un mélange de contenu texte et quelques éléments <tspan> avec IDs, ce qui nous permettra de cibler spécifiquement ces parties du texte via JavaScript.+Enfin, la balise <text> contient un mélange de contenu texte et quelques éléments <tspan> avec ID, ce qui nous permettra de cibler spécifiquement ces parties du texte via JavaScript.
  
 **Save the file and load it into a web browser – preferably Firefox or Chrome, as they have better developer tools than most others. From the previous articles, you already know how to add JavaScript to your SVG file, either directly in Inkscape or by linking to an external JS file, but we won’t be doing that today. For the rest of this article, we’re going to rattle through a few ways you can affect your SVG, but we’ll do so within the browser’s developer tools. Any of these commands or techniques can be added to your own JavaScript if you want to create something less ephemeral.** **Save the file and load it into a web browser – preferably Firefox or Chrome, as they have better developer tools than most others. From the previous articles, you already know how to add JavaScript to your SVG file, either directly in Inkscape or by linking to an external JS file, but we won’t be doing that today. For the rest of this article, we’re going to rattle through a few ways you can affect your SVG, but we’ll do so within the browser’s developer tools. Any of these commands or techniques can be added to your own JavaScript if you want to create something less ephemeral.**
  
-Sauvegardez le fichier et chargez-le dans un navigateur Web - de préférence Firefox ou Chrome, car ils disposent de meilleurs outils de développement que la plupart des autres navigateurs. Dans les articles précédents, vous avez déjà vu comment ajouter JavaScript à votre fichier SVG, soit directement dans Inkscape, soit en créant un lien vers un fichier JS externe, mais nous ne le ferons pas aujourd'hui. Pour la suite de cet article, nous allons vous présenter diférentes façons d'impacter votre SVG, mais nous allons le faire avec les outils de développement du navigateur. Chacune de ces commandes (ou techniques) peut être ajoutée à votre propre JavaScript si vous voulez créer quelque chose de moins éphémère.+Sauvegardez le fichier et chargez-le dans un navigateur Web - de préférence Firefox ou Chrome, car ils disposent de meilleurs outils de développement que la plupart des autres navigateurs. Dans les articles précédents, vous avez déjà vu comment ajouter du JavaScript à votre fichier SVG, soit directement dans Inkscape, soit en créant un lien vers un fichier JS externe, mais nous ne le ferons pas aujourd'hui. Pour la suite de cet article, nous allons vous présenter diférentes façons d'impacter votre SVG, mais nous allons le faire avec les outils de développement du navigateur. Chacune de ces commandes (ou techniques) peut être ajoutée à votre propre JavaScript si vous voulez créer quelque chose de moins éphémère.
  
 **Press F12 or use the menu to open your browser’s developer tools. Somewhere along the top should be a row of tabs (though they’re not always clearly styled as such). Make sure you have the “Console” tab selected. If the panel is already filled with text, find the button in the console’s toolbar to clear it, for clarity. Click inside the console area to give it the focus, and type the following (followed by the Enter key):** **Press F12 or use the menu to open your browser’s developer tools. Somewhere along the top should be a row of tabs (though they’re not always clearly styled as such). Make sure you have the “Console” tab selected. If the panel is already filled with text, find the button in the console’s toolbar to clear it, for clarity. Click inside the console area to give it the focus, and type the following (followed by the Enter key):**
  
-Appuyez sur F12 ou utilisez le menu pour ouvrir les outils de développement de votre navigateur. Quelque part en haut de l’écran, il devrait y avoir une rangée d'onglets (bien qu'ils ne soient pas toujours clairement stylisés comme tels). Assurez-vous d'avoir sélectionné l'onglet "Console". Si le panneau est déjà rempli de texte, trouvez le bouton dans la barre d'outils de la console pour l'effacer, pour plus de clarté. Cliquez à l'intérieur de la console pour lui donner le focus, et tapez ce qui suit (suivi de la touche Entrée) :+Appuyez sur F12 ou utilisez le menu pour ouvrir les outils de développement de votre navigateur. Quelque part en haut de l’écran, il devrait y avoir une rangée d'onglets (bien qu'ils ne soient pas toujours clairement stylisés comme tels). Assurez-vous d'avoir sélectionné l'onglet « Console ». Si le panneau est déjà rempli de texte, trouvez le bouton dans la barre d'outils de la console pour l'effacer, pour plus de clarté. Cliquez à l'intérieur de la console pour lui donner le focus, et tapez ce qui suit (suivi de la touche Entrée) :
  
 var t = document.querySelector("#text"); var t = document.querySelector("#text");
    
 **The console will display the string “undefined” at this point. That’s nothing to worry about, it just indicates that the line you entered didn’t return a value. But what it has done is find the element with an ID of “text” and assign it to the variable “t”. You can confirm that by typing the letter “t” on its own, then pressing Enter. The console should show a representation of the <text> element, looking something like that shown above.** **The console will display the string “undefined” at this point. That’s nothing to worry about, it just indicates that the line you entered didn’t return a value. But what it has done is find the element with an ID of “text” and assign it to the variable “t”. You can confirm that by typing the letter “t” on its own, then pressing Enter. The console should show a representation of the <text> element, looking something like that shown above.**
- +  
-La console affichera la chaîne de caractères "undefined" à ce point. Il n'y a pas de quoi s'inquiéter, cela indique simplement que la ligne que vous avez saisie n'a pas retourné de valeur. Mais ce qu'il a fait, c'est de trouver l'élément avec un ID "text" et de l'affecter à la variable "t". Vous pouvez le confirmer en tapant la lettre "t", puis en appuyant sur Entrée. La console doit afficher une représentation de l'élément <text>, ressemblant à celle illustrée ci-dessus.+La console affichera la chaîne de caractères « undefined » à ce point. Il n'y a pas de quoi s'inquiéter, cela indique simplement que la ligne que vous avez saisie n'a pas retourné de valeur. Mais ce qu'il a fait, c'est de trouver l'élément avec un ID « text » et de l'affecter à la variable « t ». Vous pouvez le confirmer en tapant la lettre « t », puis en appuyant sur Entrée. La console doit afficher une représentation de l'élément <text>, ressemblant à celle illustrée ci-dessus.
  
 **Let’s use some JavaScript we already know to reduce the size of the font a little. Type this into the console:** **Let’s use some JavaScript we already know to reduce the size of the font a little. Type this into the console:**
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.** **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 doit 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 la première lettre en majuscule 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.** **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.**
  
-En décomposant la ligne ci-dessus, vous savez que "t" est une représentation JavaScript de notre noeud XML. Le navigateur expose diverses propriétés et méthodes (fonctions liées à un objet spécifique) sur ce nœud, dont la propriété "style". Cette propriété, à son tour, a une propriété "fontSize", que nous avons mis à une valeur de "10px". Mais le navigateur traite la propriété "style" un peu différemment de la plupart des propriétés JavaScript, et applique à la place tout changement à l'attribut "style" dans le XML. Dans ce cas, peu importe que vous changiez l'attribut ou la propriété - mais ce n'est généralement pas le cas.+En décomposant la ligne ci-dessus, vous savez que « t » est une représentation JavaScript de notre nœud XML. Le navigateur expose diverses propriétés et méthodes (fonctions liées à un objet spécifique) sur ce nœud, dont la propriété « style ». Cette propriété, à son tour, a une propriété « fontSize », que nous avons réglée à une valeur de « 10px ». Mais le navigateur traite la propriété « style » un peu différemment de la plupart des propriétés JavaScript, et applique à la place tout changement à l'attribut « style » dans le XML. Dans ce cas, peu importe que vous changiez l'attribut ou la propriété, mais ce n'est généralement pas le cas.
  
 **To change most attributes, therefore, you can’t just set a correspondingly named JavaScript property. Instead, you have to use the setAttribute() method that we’ve looked at previously. Here’s how we might move the text up a little:** **To change most attributes, therefore, you can’t just set a correspondingly named JavaScript property. Instead, you have to use the setAttribute() method that we’ve looked at previously. Here’s how we might move the text up a little:**
  
-Pour changer la plupart des attributs, vous ne pouvez donc pas simplement définir une propriété JavaScript nommée en conséquence. Au lieu de ça, vous devez utiliser la méthode setAttribute() que nous avons examinée précédemment. Voilà comment on pourrait remonter un peu le texte :+Pour changer la plupart des attributs, vous ne pouvez donc pas simplement définir une propriété JavaScript nommée en conséquence. Au lieu de ça, vous devez utiliser la méthode setAttribute() que nous avons examinée précédemment. Voici comment on pourrait remonter un peu le texte :
  
 t.setAttribute("y", 20); t.setAttribute("y", 20);
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:** **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"); t.getAttribute("y");
Ligne 105: Ligne 105:
 **Gah! Where did the text go!? Actually it’s still there, but it’s been positioned so far down in the image that it’s dropped out of the 100x100 viewBox, so isn’t visible. But why is that, when we just wanted to adjust the value from 20 to 30?** **Gah! Where did the text go!? Actually it’s still there, but it’s been positioned so far down in the image that it’s dropped out of the 100x100 viewBox, so isn’t visible. But why is that, when we just wanted to adjust the value from 20 to 30?**
  
-Bah ! Où est passé le texte ? En fait, il est toujours là, mais il a été positionné si bas dans l'image qu'il est sorti de la viewBox 100x100, il n'est donc pas visible. Mais pourquoi cela, alors que nous voulions simplement ajuster la valeur de 20 à 30 ?+Bah ! Où est passé le texte ? En fait, il est toujours là, mais il a été positionné si bas dans l'image qu'il est sorti de la viewBox 100x100 et n'est donc pas visible. Mais pourquoi cela, alors que nous voulions simplement ajuster la valeur de 20 à 30 ?
  
 **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!** **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(), donc 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:** **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:**
  
-Nous pouvons corriger cela en convertissant la valeur retournée par getAttribute() en nombre. Nous voulons seulement une valeur entière, donc la fonction parseInt() est celle à utiliser - mais il y a aussi un parseFloat() si vous avez besoin de traiter des fractions décimales. parseInt() a un second paramètre pour la base de nombres que vous devriez toujours fournir (avec une valeur de 10 pour une conversion décimale) pour éviter certains bugs (cas rares, mais étranges), quand vous convertissez certaines chaînes. Le fait de saisir les lignes suivantes dans la console devrait nous donner le résultat que nous recherchons :+Nous pouvons corriger cela en convertissant la valeur retournée par getAttribute() en nombre. Nous voulons seulement une valeur entière, donc la fonction parseInt() est celle à utiliser, mais il y a aussi un parseFloat() si vous avez besoin de traiter des fractions décimales. parseInt() a un second paramètre pour la base de nombres que vous devriez toujours fournir (avec une valeur de 10 pour une conversion décimale) pour éviter certains bugs (cas rares, mais étranges), quand vous convertissez certaines chaînes. Le fait de saisir les lignes suivantes dans la console devrait nous donner le résultat que nous recherchons :
  
 t.setAttribute("y", 20); t.setAttribute("y", 20);
Ligne 152: Ligne 152:
 **Being able to change the text content via JavaScript opens up a world of possibilities, including images with descriptions that can be switched between different languages, or ones that populate with data requested from a server somewhere such as live graphs and stock tickers. That degree of sophistication is a little beyond this series, but here’s a trivial example that prompts the user to enter their name, then updates the text on the page accordingly:** **Being able to change the text content via JavaScript opens up a world of possibilities, including images with descriptions that can be switched between different languages, or ones that populate with data requested from a server somewhere such as live graphs and stock tickers. That degree of sophistication is a little beyond this series, but here’s a trivial example that prompts the user to enter their name, then updates the text on the page accordingly:**
  
-La possibilité de modifier le contenu du texte via JavaScript ouvre un monde de possibilités, y compris des images avec des descriptions qui peuvent être permutées entre différentes langues, ou des images qui contiennent des données demandées à un serveur, comme des graphiques en direct et des cotations boursières. Ce degré de sophistication va un peu au-delà de cet article, mais voici un exemple trivial qui invite l'utilisateur à entrer son nom, puis met à jour le texte sur la page en conséquence :+Être capable de modifier le contenu du texte via JavaScript ouvre un monde de possibilités, y compris des images avec des descriptions qui peuvent être permutées entre différentes langues, ou des images qui contiennent des données demandées à un serveur, comme des graphiques en direct et des cotations boursières. Ce degré de sophistication va un peu au-delà de cette rubrique, mais voici un exemple trivial qui invite l'utilisateur à entrer son nom, puis met à jour le texte sur la page en conséquence :
  
 ts1.textContent = prompt("What is your name?") + "'s"; ts1.textContent = prompt("What is your name?") + "'s";
Ligne 168: Ligne 168:
 **Adding a new element to the page can be trivially easy, or it can be rather convoluted. Let’s start with the easy method, by adding another <tspan> to the <text> element, which is still assigned to our “t” variable:** **Adding a new element to the page can be trivially easy, or it can be rather convoluted. Let’s start with the easy method, by adding another <tspan> to the <text> element, which is still assigned to our “t” variable:**
  
-Ajouter un nouvel élément à la page peut être facile ou plutôt compliqué. Commençons par la méthode facile, en ajoutant un autre <tspan> à l'élément <text>, qui est toujours affecté à notre variable "t" :+Ajouter un nouvel élément à la page peut être vraiment facile ou plutôt compliqué. Commençons par la méthode facile, en ajoutant un autre <tspan> à l'élément <text>, qui est toujours affecté à notre variable « t » :
  
 t.innerHTML += '<tspan id="ts3" style="fill: red;">!!!</tspan>'; t.innerHTML += '<tspan id="ts3" style="fill: red;">!!!</tspan>';
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.** **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". Ceci 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. L'opérateur "+=" récupère essentiellement 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…** **Let’s do something similar, but with a more complex approach…**
Ligne 193: Ligne 193:
 **• We set up a variable, “ns”, that will hold our SVG namespace. Usually this is done once at the top of the JavaScript so you can use it in multiple places.** **• We set up a variable, “ns”, that will hold our SVG namespace. Usually this is done once at the top of the JavaScript so you can use it in multiple places.**
  
-• Nous avons mis en place une variable, "ns", qui contiendra notre espace de nommage SVG. Habituellement, cela se fait une fois en haut du JavaScript pour que vous puissiez l'utiliser à plusieurs endroits.+• Nous avons mis en place une variable, « ns », qui contiendra notre espace de noms SVG. Habituellement, cela se fait une fois en haut du JavaScript pour que vous puissiez l'utiliser à plusieurs endroits.
  
 **• We create a new <tspan> element. If you’ve ever done this in HTML, you might be familiar with document.createElement(), but, in the XML world, we need to use a namespace-aware equivalent, createElementNS(), and pass the namespace as the first parameter.** **• We create a new <tspan> element. If you’ve ever done this in HTML, you might be familiar with document.createElement(), but, in the XML world, we need to use a namespace-aware equivalent, createElementNS(), and pass the namespace as the first parameter.**
Ligne 201: Ligne 201:
 **• We give the element an ID to make it easier to get hold of later. We could have used setAttribute() for this, but the browser has an implicit mapping between the property and attribute in this case, in the same manner as we saw earlier with the ‘style’ property.** **• We give the element an ID to make it easier to get hold of later. We could have used setAttribute() for this, but the browser has an implicit mapping between the property and attribute in this case, in the same manner as we saw earlier with the ‘style’ property.**
  
-• Nous donnons à l'élément un ID pour qu'il soit plus facile à récupérer plus tard. Nous aurions pu utiliser setAttribute() pour cela, mais le navigateur a une correspondance implicite entre la propriété et l'attribut dans ce cas, de la même manière que nous l'avons vu précédemment avec la propriété 'style'.+• Nous donnons à l'élément un ID pour qu'il soit plus facile à récupérer plus tard. Nous aurions pu utiliser setAttribute() pour cela, mais le navigateur a une correspondance implicite entre la propriété et l'attribut dans ce cas, de la même manière que nous l'avons vu précédemment avec la propriété « style ».
  
 **• Now we can set an attribute on the new element. We would need to repeat a line like this for each attribute we wish to set.** **• Now we can set an attribute on the new element. We would need to repeat a line like this for each attribute we wish to set.**
Ligne 221: Ligne 221:
 **Consider trying to plot a graph using SVG. Each point on the graph might be represented by a <circle> requiring several attributes: x, y, r and fill, for example. These values will be determined by some data source, and may need to be manipulated to get them into the right format for SVG. All of that is a little easier to arrange, and can lead to clearer code, if you deal with each attribute separately. Certainly it can be done with the “innerHTML” approach, but as the code and SVG content become more complex, an approach that relies on building and manipulating strings can become harder to follow, and less robust.** **Consider trying to plot a graph using SVG. Each point on the graph might be represented by a <circle> requiring several attributes: x, y, r and fill, for example. These values will be determined by some data source, and may need to be manipulated to get them into the right format for SVG. All of that is a little easier to arrange, and can lead to clearer code, if you deal with each attribute separately. Certainly it can be done with the “innerHTML” approach, but as the code and SVG content become more complex, an approach that relies on building and manipulating strings can become harder to follow, and less robust.**
  
-Et si vous tentiez de tracer un graphique à l'aide de SVG ? Chaque point du graphique peut être représenté par un <cercle> nécessitant plusieurs attributs : x, y, r et fill, par exemple. Ces valeurs seront déterminées par une source de données, et peuvent avoir besoin d'être manipulées pour les mettre dans le bon format pour SVG. Tout cela est un peu plus facile à organiser, et peut conduire à un code plus clair, si vous traitez chaque attribut séparément. Certes, cela peut se faire avec l'approche "innerHTML", mais à mesure que le code et le contenu SVG deviennent plus complexes, une approche qui repose sur la construction et la manipulation de chaînes de caractères peut devenir plus difficile à suivre, et moins robuste.+Et si vous tentiez de tracer un graphique à l'aide de SVG ? Chaque point du graphique peut être représenté par un <cercle> nécessitant plusieurs attributs : x, y, r et fill, par exemple. Ces valeurs seront déterminées par une source de données, et doivent être manipulées peut-être pour qu'elles soient dans le bon format pour SVG. Tout cela est un peu plus facile à organiser, et peut conduire à un code plus clair, si vous traitez chaque attribut séparément. Certes, cela peut se faire avec l'approche « innerHTML », mais à mesure que le code et le contenu SVG deviennent plus complexes, une approche qui repose sur la construction et la manipulation de chaînes de caractères peut devenir plus difficile à suivre, et moins robuste.
  
 **Next time, we’ll build on the techniques used in this instalment, to further investigate ways to manipulate the individual elements in an SVG document through JavaScript.** **Next time, we’ll build on the techniques used in this instalment, to further investigate ways to manipulate the individual elements in an SVG document through JavaScript.**
issue148/inkscape.1568301657.txt.gz · Dernière modification : 2019/09/12 17:20 de lecastillan