diff options
Diffstat (limited to 'files/fr/web/svg/element/a/index.html')
| -rw-r--r-- | files/fr/web/svg/element/a/index.html | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/files/fr/web/svg/element/a/index.html b/files/fr/web/svg/element/a/index.html new file mode 100644 index 0000000000..a33829bf99 --- /dev/null +++ b/files/fr/web/svg/element/a/index.html @@ -0,0 +1,134 @@ +--- +title: a +slug: Web/SVG/Element/a +tags: + - Element + - SVG + - SVG Conteneur +translation_of: Web/SVG/Element/a +--- +<div>{{SVGRef}}</div> + +<p>L'élément SVG <strong><code><a></code></strong> crée un hyperlien vers d'autres pages web, fichiers, emplacements dans la page en cours, adresses email, ou toute autre URL.</p> + +<p>En SVG, l'élément <code><a></code> est un conteneur, ce qui veut dire que vous pouvez créer un lien autour du texte comme en HTML, mais que vous pouvez aussi créer un lien autour de n'importe quelle forme.</p> + +<h2 id="Exemple">Exemple</h2> + +<div class="hidden"> +<pre class="brush: css">@namespace svgns url(http://www.w3.org/2000/svg); +html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Un lien autour d'une forme --> + <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"> + <circle cx="50" cy="40" r="35"/> + </a> + + <!-- Un lien autour d'un texte --> + <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"> + <text x="50" y="90" text-anchor="middle"> + &lt;circle&gt; + </text> + </a> +</svg></pre> + +<pre class="brush: css">/* Comme SVG ne fournit pas de style visuel par défaut pour les liens, + il est en recommendé d'en ajouter manuellement */ + +@namespace svgns url(http://www.w3.org/2000/svg); + +svgns|a { + cursor: pointer; +} + +svgns|a text { + fill: blue; /* Même pour du texte, SVG utilise fill plutôt que color */ + text-decoration: underline; +} + +svgns|a:hover, svgns|a:active { + outline: dotted 1px blue; +}</pre> + +<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> + +<div class="warning"> +<p>Étant donné que cet élément partage son nom de balise avec l'<a href="/fr/docs/Web/HTML/Element/a">élément HTML <code><a></code></a>, la sélection de "<code>a</code>" avec CSS ou <a href="/fr/docs/Web/API/Document/querySelector"><code>querySelector</code></a> peut s'appliquer au mauvais type d'élément. La <a href="/fr/docs/Web/CSS/@namespace">règle <code>@namespace</code></a> permet de faire la distinction entre les deux.</p> +</div> + +<h2 id="Attributs">Attributs</h2> + +<p> </p> + +<h3 id="Attributs_globaux">Attributs globaux</h3> + +<ul> + <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="SVG/Attribute#Core">Attributs de base</a></li> + <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel" title="SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a></li> + <li><a href="/fr/docs/Web/SVG/Attribute#Événement_graphiques" title="SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a></li> + <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation" title="SVG/Attribute#Presentation">Attributs de présentation</a></li> + <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink" title="SVG/Attribute#XLink">Attributs Xlink</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> + +<ul> + <li>{{htmlattrxref("download", "a")}} {{experimental_inline}}</li> + <li>{{SVGAttr("href")}}</li> + <li>{{htmlattrxref("hreflang", "a")}}</li> + <li>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</li> + <li>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</li> + <li>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</li> + <li>{{SVGAttr("target")}}</li> + <li>{{htmlattrxref("type", "a")}}</li> + <li>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</li> +</ul> + +<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> + +<p>{{svginfo}}</p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Cet élément implémente l'interface <code><a href="/en-US/docs/DOM/SVGAElement" title="DOM/SVGAElement">SVGAElement</a></code>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Ajoute l'attribut <code>referrerpolicy</code>.</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Remplace l'attribut {{SVGAttr("xlink:href")}} par {{SVGAttr("href")}}</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("svg.elements.a")}}</p> |