| Les deux révisions précédentesRévision précédente | |
| issue156:inkscape [2020/05/05 09:29] – auntiee | issue156:inkscape [2020/05/05 15:32] (Version actuelle) – andre_domenech |
|---|
| ••Dessinez un bouton. Utilisez plusieurs objets et du texte comme vous le voulez. | ••Dessinez un bouton. Utilisez plusieurs objets et du texte comme vous le voulez. |
| ••Mettez tout le contenu du bouton dans un seul groupe. C'est là que nous attacherons le gestionnaire de clic. | ••Mettez tout le contenu du bouton dans un seul groupe. C'est là que nous attacherons le gestionnaire de clic. |
| ••Faîtes un clic droit sur le groupe et sélectionnez « Propriétés de l'objet ». | ••Faites un clic droit sur le groupe et sélectionnez « Propriétés de l'objet ». |
| ••Agrandissez la section Interactivité, si nécessaire. | ••Agrandissez la section Interactivité, si nécessaire. |
| ••Dans le champ « onclick », ajoutez le code JS suivant : | ••Dans le champ « onclick », ajoutez le code JS suivant : |
| Vous noterez probablement ce que vous n'avez pas eu en prime avec cette approche : il n'y a pas de changement de style du bouton quand vous le survolez avec la souris, et le pointeur de la souris reste une flèche plutôt que de se changer en un « doigt tendu » qui est habituellement utilisé pour indiquer une cible cliquable. Ces deux défauts peuvent être résolus avec un peu de CSS, mais il existe déjà un bout de code pour l'ajouter manuellement à votre fichier SVG (Le FCM n° 145 vous aidera pour ça). | Vous noterez probablement ce que vous n'avez pas eu en prime avec cette approche : il n'y a pas de changement de style du bouton quand vous le survolez avec la souris, et le pointeur de la souris reste une flèche plutôt que de se changer en un « doigt tendu » qui est habituellement utilisé pour indiquer une cible cliquable. Ces deux défauts peuvent être résolus avec un peu de CSS, mais il existe déjà un bout de code pour l'ajouter manuellement à votre fichier SVG (Le FCM n° 145 vous aidera pour ça). |
| |
| Cependant, si tout ce que vous voulez est un lien vers une autre URL, il n'y a pas du tout besoin de s'embêter avec du JavaScript (bien que vous puissiez avoir encore besoin du CSS). Inkscape fournit une façon plus simple de transformer un objet en lien cliquable - et c'est cette partie de l'interface utilisateur que j'ai négligé dans mes articles précédents. Il n'y a rien de plus simple que de faire un clic droit sur l'objet et de sélectionner « Créer un lien » pour ouvrir le dialogue appelé génériquement « Attributs de l'objet ». | Cependant, si tout ce que vous voulez est un lien vers une autre URL, il n'y a pas du tout besoin de s'embêter avec du JavaScript (bien que vous puissiez avoir encore besoin du CSS). Inkscape fournit une façon plus simple de transformer un objet en lien cliquable - et c'est cette partie de l'interface utilisateur que j'ai négligée dans mes articles précédents. Il n'y a rien de plus simple que de faire un clic droit sur l'objet et de sélectionner « Créer un lien » pour ouvrir le dialogue appelé génériquement « Attributs de l'objet ». |
| |
| **That’s a lot of fields for a simple link. The reason for this is that Inkscape creates an SVG 1.1 version link, which is actually implemented via an XML standard called XLink. It dates from the time when the W3C was trying to create a wide ranging collection of XML-based standards, with the idea being that a single file might use elements from across multiple specifications, allowing each spec to focus on doing one thing well. XLink, therefore, is a standard that deals with nothing but links between documents – but in trying to include numerous use-cases for links it has a whole load of optional attributes that most people will never need. Hence all the fields. | **That’s a lot of fields for a simple link. The reason for this is that Inkscape creates an SVG 1.1 version link, which is actually implemented via an XML standard called XLink. It dates from the time when the W3C was trying to create a wide ranging collection of XML-based standards, with the idea being that a single file might use elements from across multiple specifications, allowing each spec to focus on doing one thing well. XLink, therefore, is a standard that deals with nothing but links between documents – but in trying to include numerous use-cases for links it has a whole load of optional attributes that most people will never need. Hence all the fields. |
| comme vous pouvez le voir, il est possible d'entrer des valeurs en conflit dans « Cible » et « Afficher ». L'expérience montre, au moins pour Firefox, que « Cible » a la priorité. Une raison de plus pour laisser le champ « Afficher » vierge. | comme vous pouvez le voir, il est possible d'entrer des valeurs en conflit dans « Cible » et « Afficher ». L'expérience montre, au moins pour Firefox, que « Cible » a la priorité. Une raison de plus pour laisser le champ « Afficher » vierge. |
| |
| Et voilà : il y a un dialogue avec huit champs, dont vous n'avez besoin que d'un (Href), où vous pourriez en utiliser deux si vous voulez avoir une info-bulle (Herf, Titre), ou allez jusqu'à trois si vous voulez forcer les liens à s'ouvrir dans un nouvel onglet (Href, Titre, Cible). Les champs restants devraient toujours rester vides, sauf si vous savez vraiment ce que vous faîtes ou si vous êtes une sorte d'expert de XML/XLink. Mais, dans ce cas et sans aucun doute, vous modifieriez le contenu XML, soit à la main, soit via un autre traitement basé sur XML. En aucun cas, ce dialogue ne sera d'une quelconque utilité pour vous. | Et voilà : il y a un dialogue avec huit champs, dont vous n'avez besoin que d'un (Href), où vous pourriez en utiliser deux si vous voulez avoir une info-bulle (Herf, Titre), ou aller jusqu'à trois si vous voulez forcer les liens à s'ouvrir dans un nouvel onglet (Href, Titre, Cible). Les champs restants devraient toujours rester vides, sauf si vous savez vraiment ce que vous faites ou si vous êtes une sorte d'expert de XML/XLink. Mais, dans ce cas et sans aucun doute, vous modifieriez le contenu XML, soit à la main, soit via un autre traitement basé sur XML. En aucun cas, ce dialogue ne sera d'une quelconque utilité pour vous. |
| |
| **There’s one large elephant in the room, however: the use of XLink at all. As I mentioned earlier, this dialog creates an SVG v1.1 link. But since version 2.0 of the SVG spec there’s been no need for XLink. The “href” attribute has been promoted to the SVG standard, together with the “target” attribute. Oddly, however, the “title” attribute has not been promoted, though the “xlink:title” version has been deprecated. The recommendation now is to use a <title> child element instead, which seems a little overkill for a simple tooltip. | **There’s one large elephant in the room, however: the use of XLink at all. As I mentioned earlier, this dialog creates an SVG v1.1 link. But since version 2.0 of the SVG spec there’s been no need for XLink. The “href” attribute has been promoted to the SVG standard, together with the “target” attribute. Oddly, however, the “title” attribute has not been promoted, though the “xlink:title” version has been deprecated. The recommendation now is to use a <title> child element instead, which seems a little overkill for a simple tooltip. |
| </a>** | </a>** |
| |
| Cependant, il y a un gros problème : l'utilisation de XLink du tout. Comme je l'ai dit avant, ce dialogue crée un lien selon SVG v1.1. Mais depuis la version 2.0 de la spécif. SVG, il n'y a plus besoin de XLink. L'attribut « href » a été inclus dans la norme SVG, avec l'attribut « target ». Cependant, chose curieuse, l'attribut « title » (titre) n'a pas été pris en compte, bien que la version « xlink:target » ait été délaissée. La recommendation actuelle est d'utiliser à la place l'élément enfant <title>, ce qui paraît un peut surfait pour une simple info-bulle. | Cependant, il y a un gros problème : l'utilisation de XLink du tout. Comme je l'ai dit avant, ce dialogue crée un lien selon SVG v1.1. Mais depuis la version 2.0 de la spécif. SVG, il n'y a plus besoin de XLink. L'attribut « href » a été inclus dans la norme SVG, avec l'attribut « target ». Cependant, chose curieuse, l'attribut « title » (titre) n'a pas été pris en compte, bien que la version « xlink:target » ait été délaissée. La recommandation actuelle est d'utiliser à la place l'élément enfant <title>, ce qui paraît un peu surfait pour une simple info-bulle. |
| |
| En gardant cela en tête, un lien SVG2 pourrait ressembler à quelque chose comme ceci : | En gardant cela en tête, un lien SVG2 pourrait ressembler à quelque chose comme ceci : |
| The last thing to note on this topic is that the URL you link to doesn’t have to be a separate file. You can also link to a named anchor within the current file. This is particularly useful with the techniques I described for creating named views in parts 79 and 80 (FCM #139, #140). For example, given a named view of “starView”, simply creating a link with an href of “#starView” would mean that the image would switch to that view when the object is clicked. A similar effect can be achieved with the full viewBox syntax, using an href of “#svgView(viewBox(0, -250, 250, 500))” for example.** | The last thing to note on this topic is that the URL you link to doesn’t have to be a separate file. You can also link to a named anchor within the current file. This is particularly useful with the techniques I described for creating named views in parts 79 and 80 (FCM #139, #140). For example, given a named view of “starView”, simply creating a link with an href of “#starView” would mean that the image would switch to that view when the object is clicked. A similar effect can be achieved with the full viewBox syntax, using an href of “#svgView(viewBox(0, -250, 250, 500))” for example.** |
| |
| Pour le moment - et dans le futur prévisible - les navigateurs continuent de supporter l'approche de la SVG 1.1, et il n'y a donc aucune urgence pour Inkscape à changer ce qu'il sort. Bien que les navigateurs modernes acceptent aussi la version SVG2, il se peut qu'une publication future d'Inkscape remplace ce dialogue générique par quelque chose de mieux adapté à la tâche et, qu'en même temps, la sortie sera elle-même remplacée par une en version 2.0. | Pour le moment - et dans le futur prévisible - les navigateurs continuent de supporter l'approche de la SVG 1.1, et il n'y a donc aucune urgence pour Inkscape à changer ce qu'il sort. Bien que les navigateurs modernes acceptent aussi la version SVG2, il se peut qu'une publication future d'Inkscape remplace ce dialogue générique par quelque chose de mieux adapté à la tâche et, qu'en même temps, la sortie sera elle-même remplacée par une autre en version 2.0. |
| |
| La dernière chose à noter à ce sujet, c'est que l'URL vers laquelle vous faîtes le lien n'est pas obligatoirement un fichier séparé. Vous pouvez aussi faire un lien vers une ancre nommée dans le fichier courant. C'est particulièrement utile avec les techniques que j'ai décrites pour créer des vues nommées dans les parties 79 et 80 (FCM n° 139 et 140). Par exemple, étant donné une vue nommé « starView », la simple création d'un lien avec le href « #starView » signifiera que l'image passera sur cette vue quand on cliquera sur l'objet. Un effet similaire peut être réalisé avec la syntaxe complète de viewBox, en utilisant, par exemple, le href « #svgView(viewBox(0, -250, 250, 500)) ». | La dernière chose à noter à ce sujet, c'est que l'URL vers laquelle vous faites le lien n'est pas obligatoirement un fichier séparé. Vous pouvez aussi faire un lien vers une ancre nommée dans le fichier courant. C'est particulièrement utile avec les techniques que j'ai décrites pour créer des vues nommées dans les parties 79 et 80 (FCM n° 139 et 140). Par exemple, étant donné une vue nommé « starView », la simple création d'un lien avec le href « #starView » signifiera que l'image passera sur cette vue quand on cliquera sur l'objet. Un effet similaire peut être réalisé avec la syntaxe complète de viewBox, en utilisant, par exemple, le href « #svgView(viewBox(0, -250, 250, 500)) ». |
| |
| **This can be an easy way to introduce interactivity to an SVG file. Consider a slideshow in which each slide is a separate part of the SVG image, and a viewBox is used to show just the first slide by default. By adding “Previous” and “Next” buttons which have viewBox links attached you can make a simple linear slideshow – or you could add more links to let you jump directly to any other part of the file. | **This can be an easy way to introduce interactivity to an SVG file. Consider a slideshow in which each slide is a separate part of the SVG image, and a viewBox is used to show just the first slide by default. By adding “Previous” and “Next” buttons which have viewBox links attached you can make a simple linear slideshow – or you could add more links to let you jump directly to any other part of the file. |
| Of course you’re also free to mix XLink-based links with those created via JavaScript, picking the best tool for the job. One thing you can do with JS which isn’t possible with the simpler form, is to provide additional logic to determine the target location. You might change to different URLs based on the time of day, or prompt the user for some additional information that is then encoded into the URL. Consider a web-based storybook, for example, in which XLink is used to move between the pages, but JS provides extra interactivity when elements are clicked on, or hovered over.** | Of course you’re also free to mix XLink-based links with those created via JavaScript, picking the best tool for the job. One thing you can do with JS which isn’t possible with the simpler form, is to provide additional logic to determine the target location. You might change to different URLs based on the time of day, or prompt the user for some additional information that is then encoded into the URL. Consider a web-based storybook, for example, in which XLink is used to move between the pages, but JS provides extra interactivity when elements are clicked on, or hovered over.** |
| |
| Ce peut être une façon simple d'introduire une interactivité dans un fichier SVG. Prenez un diaporama dans lequel chaque diapo serait une partie séparée d'une image SVG, et une viewBox qui serait juste utilisée pour montrer la première diapo par défaut. En ajoutant des boutons « Précédent » et « Suivant » auxquels seraient attachés des liens vers la viewBox, vous pourriez faire un diaporama simple et linéaire - ou vous pourriez ajouter d'autres liens pour sauter directement à une autre partie du fichier. | Ce peut être une façon simple d'introduire une interactivité dans un fichier SVG. Prenez un diaporama dans lequel chaque diapo serait une partie séparée d'une image SVG, et une viewBox qui serait juste utilisée pour montrer la première diapo par défaut. En ajoutant des boutons « Précédent » et « Suivant » auxquels seraient attachés des liens vers la viewBox, vous pourriez faire un diaporama simple et linéaire, ou vous pourriez ajouter d'autres liens pour sauter directement à une autre partie du fichier. |
| |
| Bien sûr, vous êtes libre de mélanger les liens basés sur du XML avec ceux créés via JavaScript, en prenant le meilleur outil pour ce travail. Vous pouvez faire une chose avec JS qui n'est pas possible avec un simple formulaire : c'est d'incorporer une logique supplémentaire pour déterminer l'emplacement de la cible. Vous pouvez viser différentes URL suivant l'heure du jour, ou demander à l'utilisateur une information additionnelle qui est ensuite encodée dans l'URL. Imaginez un livre d'histoires, basé sur le Web, dans lequel XLink serait utilisé pour passer d'une page à l'autre, mais où JS fournirait une interactivité supplémentaire quand on clique sur des éléments ou qu'on les survole avec la souris. | Bien sûr, vous êtes libre de mélanger les liens basés sur du XML avec ceux créés via JavaScript, en prenant le meilleur outil pour ce travail. Vous pouvez faire une chose avec JS qui n'est pas possible avec un simple formulaire : c'est d'incorporer une logique supplémentaire pour déterminer l'emplacement de la cible. Vous pouvez viser différentes URL suivant l'heure du jour, ou demander à l'utilisateur une information additionnelle qui est ensuite encodée dans l'URL. Imaginez un livre d'histoires, basé sur le Web, dans lequel XLink serait utilisé pour passer d'une page à l'autre, mais où JS fournirait une interactivité supplémentaire quand on clique sur des éléments ou qu'on les survole avec la souris. |
