issue156:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
| issue156:inkscape [2020/05/01 08:54] – d52fr | issue156:inkscape [2020/05/05 15:32] (Version actuelle) – andre_domenech | ||
|---|---|---|---|
| Ligne 3: | Ligne 3: | ||
| There are a couple of ways of dealing with this: the first is to use JavaScript to respond to the ‘click’ event that fires when an object is clicked on. I covered various ways to add JavaScript to an Inkscape file across several articles. See FCM #142, #143 and #146 for the specifics. What I didn’t describe was how you could use JS to change the URL loaded in the browser.** | There are a couple of ways of dealing with this: the first is to use JavaScript to respond to the ‘click’ event that fires when an object is clicked on. I covered various ways to add JavaScript to an Inkscape file across several articles. See FCM #142, #143 and #146 for the specifics. What I didn’t describe was how you could use JS to change the URL loaded in the browser.** | ||
| - | Dans ce numéro, je vais parlé d'une demande | + | Dans ce numéro, je vais présenter un besoin |
| - | Il y a plusieurs façons de faire ça : la première est d' | + | Il y a plusieurs façons de faire ça : la première est d' |
| **In the most basic form, where you just want to move to a fixed URL when an object is clicked, you can use the one-line “onclick” field in the Interactivity section of the Object Properties dialog (FCM #142). For example, to make a button that goes to the Full Circle Magazine website, you would do the following: | **In the most basic form, where you just want to move to a fixed URL when an object is clicked, you can use the one-line “onclick” field in the Interactivity section of the Object Properties dialog (FCM #142). For example, to make a button that goes to the Full Circle Magazine website, you would do the following: | ||
| Ligne 19: | Ligne 19: | ||
| Your button and dialog should look something like that below.** | Your button and dialog should look something like that below.** | ||
| - | Dans sa foorme | + | Dans sa forme la plus simple, où vous voulez juste passer sur une URL fixe quand un objet est cliqué, vous pouvez utiliser le champ à une ligne « onclick » dans la section Interactivité du dialogue des Propriétés de l' |
| ••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 | + | ••Faites |
| - | ••Agrandissez la section | + | ••Agrandissez la section |
| - | ••Ajoutez le code JS suivant dans le champ « onclick » : | + | ••Dans le champ « onclick », ajoutez le code JS suivant |
| window.location.href = " | window.location.href = " | ||
| Ligne 36: | Ligne 36: | ||
| If all you want is a link to another URL, however, there’s no need to mess with JavaScript at all (though you may still need some CSS). Inkscape provides a simpler way to turn an object into a clickable link – and it’s this part of the UI that I overlooked in my previous articles. All you need to do is to right-click on the object and select “Create Link” to open the generically named “Object attributes” dialog:** | If all you want is a link to another URL, however, there’s no need to mess with JavaScript at all (though you may still need some CSS). Inkscape provides a simpler way to turn an object into a clickable link – and it’s this part of the UI that I overlooked in my previous articles. All you need to do is to right-click on the object and select “Create Link” to open the generically named “Object attributes” dialog:** | ||
| + | |||
| + | Enregistrez votre fichier SVG puis chargez-le dans un navigateur Web ; vous devriez trouver qu'en cliquant sur le bouton vous allez sur le site Web du FCM (ou sur le site de l'URL utilisée). | ||
| + | |||
| + | 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' | ||
| + | |||
| + | Cependant, si tout ce que vous voulez est un lien vers une autre URL, il n'y a pas du tout besoin de s' | ||
| **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, | **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, | ||
| The only essential field is the first one, “Href” (an abbreviation of “hyperlink reference”). A better title would have been “URL”, “Address” or “Location”, | The only essential field is the first one, “Href” (an abbreviation of “hyperlink reference”). A better title would have been “URL”, “Address” or “Location”, | ||
| + | |||
| + | Vous y verrez beaucoup de champs pour un simple lien. La raison en est que Inkscape crée un lien en version SVG 1.1, qui est en fait implémentée via une norme XML appelée XLink. Elle date du temps où le W3C essayait de créer une collection très étendue de normes basées sur XML, avec l' | ||
| + | |||
| + | Le seul champ essentiel est le premier, « Href » (une abréviation de « hyperlink reference », référence d' | ||
| **Let’s take a look at the XML editor to see what this small change has actually done to your SVG file (shown above). | **Let’s take a look at the XML editor to see what this small change has actually done to your SVG file (shown above). | ||
| Ligne 50: | Ligne 60: | ||
| </g> | </g> | ||
| </ | </ | ||
| + | |||
| + | Jetons un œil à l' | ||
| + | |||
| + | La première chose à noter est que le nouvel attribut n'a pas seulement été ajouté à l' | ||
| + | |||
| + | <a id=" | ||
| + | <g id=" | ||
| + | | ||
| + | </g> | ||
| + | </a> | ||
| **Let’s fill out most of the remaining fields in the Object Attributes dialog, to try to make our link more fully featured. Having already created the link, you will find that a right-click on the object within the Inkscape window now shows the “Create Link” option as disabled. Instead, a little further up on the context menu, you’ll find that the usual “Fill and Stroke…” menu item has been replaced with “Link Properties…” which will open the same dialog (below). | **Let’s fill out most of the remaining fields in the Object Attributes dialog, to try to make our link more fully featured. Having already created the link, you will find that a right-click on the object within the Inkscape window now shows the “Create Link” option as disabled. Instead, a little further up on the context menu, you’ll find that the usual “Fill and Stroke…” menu item has been replaced with “Link Properties…” which will open the same dialog (below). | ||
| The first thing I’ll note here is that you will almost certainly never need to fill out this many fields. “Href” is required, and “Title” is a good idea for accessibility purposes, and also because desktop browsers will use it to create a tooltip when you mouse over the object. You might need to use the “Target” field, depending on how you want the link to behave, but I’ll come on to that shortly.** | The first thing I’ll note here is that you will almost certainly never need to fill out this many fields. “Href” is required, and “Title” is a good idea for accessibility purposes, and also because desktop browsers will use it to create a tooltip when you mouse over the object. You might need to use the “Target” field, depending on how you want the link to behave, but I’ll come on to that shortly.** | ||
| + | |||
| + | Remplissons la plupart des autres champs du dialogue des Attributs de l' | ||
| + | |||
| + | La première chose que je ferai remarquer ici, c'est que vous n' | ||
| **Let’s skip to the “Type” field. This describes the nature of the link, from a specific list of options in the XLink specification. For a normal link to another page (or within the same page), “simple” is all you need. This also happens to be the default behaviour if it’s omitted, so you should just leave it blank. The other possible types are all used for more complex linking between and within XML files. If you need to use them then you probably already know about them – and I doubt very much that you’d be using this dialog to edit them anyway. | **Let’s skip to the “Type” field. This describes the nature of the link, from a specific list of options in the XLink specification. For a normal link to another page (or within the same page), “simple” is all you need. This also happens to be the default behaviour if it’s omitted, so you should just leave it blank. The other possible types are all used for more complex linking between and within XML files. If you need to use them then you probably already know about them – and I doubt very much that you’d be using this dialog to edit them anyway. | ||
| One of those more advanced types is “arc”, which indicates that the link is being used to connect two other resources, identified by the “to” and “from” attributes. A “resource” in these terms is anything that can be identified with a URL, such as a website, a specific page or file, or a named element on that page. As you may have noticed, the “to” and “from” attributes aren’t present in the dialog, so you can’t actually create a valid arc link through this UI even if you knew why you might want to! For this reason the related “Arcrole” field is also completely useless (if you could create an arc link, this would hold the URL of a resource that describes it).** | One of those more advanced types is “arc”, which indicates that the link is being used to connect two other resources, identified by the “to” and “from” attributes. A “resource” in these terms is anything that can be identified with a URL, such as a website, a specific page or file, or a named element on that page. As you may have noticed, the “to” and “from” attributes aren’t present in the dialog, so you can’t actually create a valid arc link through this UI even if you knew why you might want to! For this reason the related “Arcrole” field is also completely useless (if you could create an arc link, this would hold the URL of a resource that describes it).** | ||
| + | |||
| + | Passons au champ « Type ». Il décrit la nature du lien, à partir d'une liste précise d' | ||
| + | |||
| + | Un des types les plus techniques est « arc », qui indique que le lien est utilisé pour connecter deux autres ressources, identifiées par les attributs « to » (vers) et « from » (à partir de). Ici, le terme « ressource » signifie ce qui peut être identifié avec une URL, comme un site Web, une page ou un fichier particulier, | ||
| **Based on that description of “Arcrole”, | **Based on that description of “Arcrole”, | ||
| The “Actuate” field is intended to indicate when the link should be followed. This attribute can only take very specific values but, once again, it’s completely ignored by the web browser regardless of what you enter. The easiest option is therefore to leave this blank. The “onRequest” option I’ve used in my example just means “follow this link when the object is clicked”, but that is, once again, the default behaviour anyway.** | The “Actuate” field is intended to indicate when the link should be followed. This attribute can only take very specific values but, once again, it’s completely ignored by the web browser regardless of what you enter. The easiest option is therefore to leave this blank. The “onRequest” option I’ve used in my example just means “follow this link when the object is clicked”, but that is, once again, the default behaviour anyway.** | ||
| + | |||
| + | À partir de cette description de « Arc-rôle », vous n' | ||
| + | |||
| + | Le champ « Actionner » est prévu pour indiquer si le lien devrait être suivi. Cet attribut ne peut prendre que des valeurs bien particulières, | ||
| **All that remains are the “Target” and “Show” fields. These attributes actually perform the same purpose, but “target” is part of the SVG spec for the <a> element, whereas “show” is an XLink offering. They affect where in the UI the browser loads the linked resource – whether it replaces the SVG file in the same frame or tab, or opens in a completely new tab or window. The main values to be aware of are as follows (note the underscores before the values for “target” (see table below). | **All that remains are the “Target” and “Show” fields. These attributes actually perform the same purpose, but “target” is part of the SVG spec for the <a> element, whereas “show” is an XLink offering. They affect where in the UI the browser loads the linked resource – whether it replaces the SVG file in the same frame or tab, or opens in a completely new tab or window. The main values to be aware of are as follows (note the underscores before the values for “target” (see table below). | ||
| As you might guess from the missing values in the “show” column, there’s rarely much need for “_parent” or “_top”. The best policy is usually to leave the “target” and “show” attributes empty, so that the behaviour of the browser is purely defined by the user’s settings. If you’re really sure that you want to open a new tab or window when the element is clicked, then use “_blank” in the “Target” field. But that’s pretty much the only legitimate use of this field for most people.** | As you might guess from the missing values in the “show” column, there’s rarely much need for “_parent” or “_top”. The best policy is usually to leave the “target” and “show” attributes empty, so that the behaviour of the browser is purely defined by the user’s settings. If you’re really sure that you want to open a new tab or window when the element is clicked, then use “_blank” in the “Target” field. But that’s pretty much the only legitimate use of this field for most people.** | ||
| + | |||
| + | Il ne reste plus que les champs « Cible » et « Afficher ». Ces attributs poursuivent vraiment le même objectif, mais « Cible » fait partie de la spécif. SVG pour un élément <a>, alors que « Afficher » vient de XLink. Ils conditionnent l' | ||
| + | |||
| + | Comme vous pouvez le deviner en voyant les valeurs manquantes de la colonne « Show » (Afficher), il y a rarement un gros besoin de « _parent » et de « _top ». Le mieux est de laisser les attributs « target » (cible) et « show » vides, de sorte que le comportement du navigateur est uniquement défini par les paramètres de l' | ||
| **As you can see, it’s possible to enter conflicting values for “Target” and “Show”. Experiment indicates that, for Firefox at least, “Target” takes priority. All the more reason to leave the “Show” field blank. | **As you can see, it’s possible to enter conflicting values for “Target” and “Show”. Experiment indicates that, for Firefox at least, “Target” takes priority. All the more reason to leave the “Show” field blank. | ||
| So there you have it: a dialog with eight fields, of which you only really need one (Href), might use two if you want to have a tooltip (Href, Title), or stretch to three if you also want to force links to open in a new tab (Href, Title, Target). The remaining fields should always be left empty, unless you really know what you’re doing and are something of an XML/XLink expert. But in that case you’re undoubtedly either editing the XML content by hand, or via some other XML-based workflow. In neither case is this dialog likely to be of much use to you.** | So there you have it: a dialog with eight fields, of which you only really need one (Href), might use two if you want to have a tooltip (Href, Title), or stretch to three if you also want to force links to open in a new tab (Href, Title, Target). The remaining fields should always be left empty, unless you really know what you’re doing and are something of an XML/XLink expert. But in that case you’re undoubtedly either editing the XML content by hand, or via some other XML-based workflow. In neither case is this dialog likely to be of much use to you.** | ||
| + | |||
| + | comme vous pouvez le voir, il est possible d' | ||
| + | |||
| + | 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' | ||
| **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: | **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: | ||
| Ligne 85: | Ligne 125: | ||
| </g> | </g> | ||
| </ | </ | ||
| + | |||
| + | Cependant, il y a un gros problème : l' | ||
| + | |||
| + | En gardant cela en tête, un lien SVG2 pourrait ressembler à quelque chose comme ceci : | ||
| + | |||
| + | <a id=" | ||
| + | href=" | ||
| + | target=" | ||
| + | |||
| + | < | ||
| + | |||
| + | <g id=" | ||
| + | | ||
| + | </g> | ||
| + | </a> | ||
| **For now – and for the foreseeable future – browsers continue to support the SVG 1.1 approach, so there’s no urgency for Inkscape to change what it outputs. Modern browsers will also accept the SVG2 version, though, so perhaps some future release of Inkscape will replace this generic dialog with something more tailored to the task, and will replace the output with an SVG2 version at the same time. | **For now – and for the foreseeable future – browsers continue to support the SVG 1.1 approach, so there’s no urgency for Inkscape to change what it outputs. Modern browsers will also accept the SVG2 version, though, so perhaps some future release of Inkscape will replace this generic dialog with something more tailored to the task, and will replace the output with an SVG2 version at the same time. | ||
| 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”, | 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”, | ||
| + | |||
| + | Pour le moment - et dans le futur prévisible - les navigateurs continuent de supporter l' | ||
| + | |||
| + | 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' | ||
| **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' | ||
| + | |||
| + | 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' | ||
issue156/inkscape.1588316076.txt.gz · Dernière modification : 2020/05/01 08:54 de d52fr