17 Les liens

Contenu

• 17.1 Les liens menant hors du contenu SVG : l'élément 'a'
• 17.2 Les liens dans un contenu SVG : les fragments d'URI et les vues SVG
  • 17.2.1 Introduction : les fragments d'URI et les vues SVG
  • 17.2.2 Les identifiants de fragment SVG
  • 17.2.3 Les vues prédéfinies : l'élément 'view'
• 17.3 Les interfaces du DOM

17.1 Les liens menant hors du contenu SVG : l'élément 'a'

SVG fournit un élément 'a', analogue à l'élément 'a' vf. de HTML, pour l'indication de liens (appelés également hyperliens ou liens Web). SVG s'appuie sur XLink ([XLink]) pour toutes les définitions de lien.

SVG 1.0 ne requiert des agents utilisateurs que la gestion de la notion des liens simples de XLink. Chaque lien simple associe exactement deux ressources, l'une locale l'autre distante, avec une relation allant de la première vers la dernière.

On définit un lien simple pour chaque élément rendu séparé qui est contenu dans l'élément 'a' ; ainsi quand l'élément 'a' contient trois éléments 'circle', un lien est créé pour chaque cercle. Pour chaque élément rendu dans un élément 'a', l'élément rendu donné est la ressource locale (l'ancre source pour le lien).

La ressource distante (la destination du lien) est définie par un URI spécifié par l'attribut XLink href sur l'élément 'a'. La ressource distante peut être toute ressource Web (par exemple, une image, un clip vidéo, un son, un programme, un autre document SVG, un document HTML, un élément du document courant, un élément dans un document différent, etc.). Lors de l'activation de ces liens (en cliquant avec la souris, au travers d'une entrée au clavier, par commande vocale, etc.), les utilisateurs peuvent visiter ces ressources.

L'exemple link01 assigne un lieu à une ellipse.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 5 3"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Exemple link01 - un lien sur une ellipse
  </desc>
  <rect x=".01" y=".01" width="4.98" height="2.98" 
        fill="none" stroke="blue"  stroke-width=".03"/>
  <a xlink:href="http://www.w3.org">
    <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
             fill="red" />
  </a>
</svg>

Exemple link01

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

Si on visionne le fichier SVG ci-dessus avec un agent utilisateur qui gère SVG et HTML, alors un clic sur l'ellipse entraînera le remplacement de la fenêtre ou du cadre courants par la page d'accueil du W3C.
 

<!ENTITY % aExt "" >
<!ELEMENT a       (#PCDATA|desc|title|metadata|defs|
                   path|text|rect|circle|ellipse|line|polyline|polygon|
                   use|image|svg|g|view|switch|a|altGlyphDef|
                   script|style|symbol|marker|clipPath|mask|
                   linearGradient|radialGradient|pattern|filter|cursor|font|
                   animate|set|animateMotion|animateColor|animateTransform|
                   color-profile|font-face
                   %ceExt;%aExt;)* >
<!ATTLIST a
  %stdAttrs;
  xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"
  xlink:type (simple) #FIXED "simple" 
  xlink:role %URI; #IMPLIED
  xlink:arcrole %URI; #IMPLIED
  xlink:title CDATA #IMPLIED
  xlink:show (new|replace) 'replace'
  xlink:actuate (onRequest) #FIXED 'onRequest'
  xlink:href %URI; #REQUIRED
  %testAttrs;
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-All;
  transform %TransformList; #IMPLIED
  %graphicsElementEvents;
  target %LinkTarget; #IMPLIED >

17.2 Les liens dans un contenu SVG : les fragments d'URI et les vues SVG

17.2.1 Introduction : les fragments d'URI et les vues SVG

Sur Internet, les ressources sont identifiées par des URI (Uniform Resource Identifiers) [URI]. Par exemple, un fichier SVG nommé MonDessin.svg, situé à http://exemple.org, pourrait avoir l'URI suivant :

http://exemple.org/MonDessin.svg

Un URI peut également s'adresser à un élément particulier dans un document XML si on lui rajoute un identifiant de fragment d'URI. Un URI qui comprend un identifiant de fragment d'URI, consiste en un URI de base optionnel, suivi par un caractère « # », suivi par l'identifiant de fragment d'URI. Par exemple, on peut utiliser l'URI suivant pour spécifier l'élément dont l'ID est "Reverbere" dans le fichier MonDessin.svg :

http://exemple.org/MonDessin.svg#Reverbere

Comme un contenu SVG représente souvent une image ou un dessin de quelque chose, un besoin courant consiste à produire un lien dans une vue particulière du document, où la vue indique les transformations initiales, de manière à présenter un gros-plan sur une section particulière du document.

17.2.2 Les identifiants de fragment SVG

Pour le lien à une vue particulière d'un document SVG, l'identifiant de fragment d'URI doit être un identifiant de fragment SVG correctement formé. Un identifiant de fragment SVG définit le sens de la partie « sélecteur », ou « identifiant de fragment », des URI qui localisent les ressources de type MIME "image/svg+xml".

Un identifiant de fragment SVG peut prendre trois formes :

• Une forme d'adressage raccourcie nom nu (par exemple, MonDessin.svg#MaVue). Cette forme, autorisant l'adressage d'un élément SVG par son ID, est compatible avec le mécanisme d'adressage de fragment des versions HTML antérieures et avec la formulation raccourcie nom nu du « Langage de pointeur XML (XPointer) » [XPTR]. (La forme d'adressage nom nu #MaVue équivaut à la formulation XPointer #xpointer(id('MaVue'))) ;
• Une référence d'ID compatible XPointer (par exemple, MonDessin.svg#xpointer(id('MaVue'))). Cette forme, autorisant également l'adressage d'un élément SVG par son ID, est compatible avec la syntaxe du « Langage de pointeur XML (XPointer) » [XPTR] et la syntaxe XPath pour la référence des ID ;
• La spécification de vue SVG (par exemple, MonDessin.svg#svgView(viewBox(0,200,1000,1000))). Cette forme d'adressage spécifie la vue souhaitée pour le document (par exemple, la région du document à voir, le niveau de zoom initial), entièrement dans la spécification du fragment SVG. La spécification de vue SVG contient les cinq paramètres de spécification viewBox(...), preserveAspectRatio(...), transform(...), zoomAndPan(...) et viewTarget(...), dont les valeurs ont les mêmes significations que pour les attributs correspondants sur un élément 'view' ou, dans le cas de transform(...), que pour l'attribut correspondant sur un élément 'g').

On définit un identifiant de fragment SVG comme suit :

SVGFragmentIdentifier ::= BareName |
                          XPointerIDRef |
                          SVGViewSpec
                
BareName ::= XML_Name

SVGViewSpec ::= 'svgView(' SVGViewAttributes ')'

SVGViewAttributes ::= SVGViewAttribute |
                      SVGViewAttribute ';' SVGViewAttributes
                      
SVGViewAttribute ::= viewBoxSpec |
                     preserveAspectRatioSpec |
                     transformSpec |
                     zoomAndPanSpec |
                     viewTargetSpec

viewBoxSpec ::= 'viewBox(' ViewBoxParams ')'

preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')'

transformSpec ::= 'transform(' TransformParams ')'

zoomAndPanSpec ::= 'zoomAndPan(' ZoomAndPanParams ')'

viewTargetSpec ::= 'viewTarget(' ViewTargetParams ')'

dans laquelle définition :

• la valeur XPointerIDRef se conforme aux règles de référencement des ID dans XPointer (voir [XPTR] et la syntaxe XPath pour le référencement des ID). Par exemple, xpointer(id('MaVue')) ;
• la valeurViewBoxParams correspond aux valeurs de paramètre de l'attribut viewBox sur l'élément 'view'. Par exemple, viewBox(0,0,200,200) ;
• la valeur AspectParams correspond aux valeurs de paramètre de l'attribut preserveAspectRatio sur l'élément 'view'. Par exemple, preserveAspectRatio(xMidYMid) ;
• la valeur TransformParams correspond aux valeurs de paramètre de l'attribut transform, qui est disponible pour plusieurs éléments. Par exemple, transform(scale(5)) ;
• la valeur ZoomAndPanParams correspond aux valeurs de paramètre de l'attribut zoomAndPan sur l'élément 'view'. Par exemple, zoomAndPan(magnify) ;
• la valeur ViewTargetParams correspond aux valeurs de paramètre de l'attribut viewTarget sur l'élément 'view'. Par exemple, viewTarget(IDdeMonElement).

Les espaces ne sont pas admis dans les spécifications de fragment ; c'est pourquoi on utilise des virgules pour séparer les valeurs numériques dans une spécification de vue SVG (par exemple, #svgView(viewBox(0,0,200,200))) comme on utilise des points-virgules pour séparer les attributs (par exemple, #svgView(viewBox(0,0,200,200);preserveAspectRatio(none))).

Quand un document source effectue un lien vers un document SVG via un élé ancre (i.e., un élément <a href=...>) en HTML [HTML4 vf.] ou via une spécification XLink [XLINK], alors l'identifiant de fragment SVG spécifie la vue initiale dans le document SVG comme suit :

• Si aucun identifiant de fragment SVG n'est fourni (par exemple, l'URI spécifié ne contient pas de caractère « # », comme MonDessin.svg), alors la vue initiale dans le document SVG s'établit en utilisant les attributs de spécification de vue (i.e., viewBox, etc.) sur l'éléemnt 'svg' le plus externe ;
• Si l'identifiant de fragment SVG adresse un élément 'view' dans un document SVG (par exemple, MonDessin.svg#MaVue ou MonDessin.svg#xpointer(id('MaVue'))), alors l'élément 'svg' ancêtre le plus proche est affiché dans la zone de visualisation. Tous les attributs de spécification de vue sur l'élément 'view' donné surclassent les attributs de spécification de vue correspondants sur l'élément 'svg' ancêtre le plus proche ;
• Si l'identifiant de fragment SVG adresse une vue SVG particulière (par exemple, MonDessin.svg#svgView(viewBox(0,200,1000,1000))), alors le fragment de document défini par l'élément 'svg' ancêtre le plus proche est affiché dans la zone de visualisation en utilisant la spécification de vue SVG fournie par l'identifiant de fragment SVG ;
• Si l'identifiant de fragment SVG adresse tout élément autre qu'un élément 'view', alors le document définit par l'élément 'svg' ancêtre le plus proche est affiché dans la zone de visualisation en utilisant les attributs de spécification de vue de cet élément 'svg'.

17.2.3 Les vues prédéfinies : l'élément 'view'

L'élément 'view' est défini comme suit :

<!ENTITY % viewExt "" >
<!ELEMENT view (%descTitleMetadata;%viewExt;) >
<!ATTLIST view
  %stdAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  viewBox %ViewBoxSpec; #IMPLIED
  preserveAspectRatio %PreserveAspectRatioSpec; 'xMidYMid meet'
  zoomAndPan (disable | magnify) 'magnify' 
  viewTarget CDATA #IMPLIED >

17.3 Les interfaces du DOM

Les interfaces suivantes sont définies ci-dessous : SVGAElement, SVGViewElement.

L'interface SVGAElement

L'interface SVGAElement correspond à l'élément 'a'.

Définition IDL

interface SVGAElement : 
                SVGElement,
                SVGURIReference,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGTransformable,
                events::EventTarget { 

  readonly attribute SVGAnimatedString target;
};

attributs

readonly SVGAnimatedString target

Correspond à l'attribut target sur l'élément 'a' donné.

L'interface SVGViewElement

L'interface SVGViewElement correspond à l'élément 'view'.

Définition IDL

interface SVGViewElement : 
                SVGElement,
                SVGExternalResourcesRequired,
                SVGFitToViewBox,
                SVGZoomAndPan { 

  readonly attribute SVGStringList viewTarget;
};

attributs

readonly SVGStringList viewTarget

Correspond à l'attribut viewTarget sur l'élément 'view' donné. Une liste de valeur DOMString contenant les noms listés dans l'attribut viewTarget. Chacune des valeurs DOMString peut être associée avec l'élément correspondant en utilisant l'appel de méthode getElementById().