diff options
Diffstat (limited to 'files/fr/web/svg/element')
65 files changed, 4324 insertions, 5449 deletions
diff --git a/files/fr/web/svg/element/a/index.md b/files/fr/web/svg/element/a/index.md index a3d70a3edd..803ec8daf7 100644 --- a/files/fr/web/svg/element/a/index.md +++ b/files/fr/web/svg/element/a/index.md @@ -7,33 +7,37 @@ tags: - SVG Conteneur translation_of: Web/SVG/Element/a --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<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> +L'élément SVG **`<a>`** crée un hyperlien vers d'autres pages web, fichiers, emplacements dans la page en cours, adresses email, ou toute autre URL. -<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> +En SVG, l'élément `<a>` 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. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: css hidden">@namespace svgns url(http://www.w3.org/2000/svg); -html,body,svg { height:100% }</pre> - - -<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="/docs/Web/SVG/Element/circle"> - <circle cx="50" cy="40" r="35"/> - </a> - - <!-- Un lien autour d'un texte --> - <a href="/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, +```css hidden +@namespace svgns url(http://www.w3.org/2000/svg); +html,body,svg { height:100% } +``` + +```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="/docs/Web/SVG/Element/circle"> + <circle cx="50" cy="40" r="35"/> + </a> + + <!-- Un lien autour d'un texte --> + <a href="/docs/Web/SVG/Element/circle"> + <text x="50" y="90" text-anchor="middle"> + <circle> + </text> + </a> +</svg> +``` + +```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); @@ -49,83 +53,57 @@ svgns|a text { svgns|a:hover, svgns|a:active { outline: dotted 1px blue; -}</pre> - -<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> - -<div class="warning"> - <p><strong>Attention :</strong> É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="/fr/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>{{Compat("svg.elements.a")}}</p> +} +``` + +{{EmbedLiveSample('Exemple', 100, 100)}} + +> **Attention :** Étant donné que cet élément partage son nom de balise avec l'[élément HTML `<a>`](/fr/docs/Web/HTML/Element/a), la sélection de "`a`" avec CSS ou [`querySelector`](/fr/docs/Web/API/Document/querySelector) peut s'appliquer au mauvais type d'élément. La [règle `@namespace`](/fr/docs/Web/CSS/@namespace) permet de faire la distinction entre les deux. + +## Attributs + + + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "SVG/Attribute#Core") +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "SVG/Attribute#ConditionalProccessing") +- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Événement_graphiques "SVG/Attribute#GraphicalEvent") +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation "SVG/Attribute#Presentation") +- [Attributs Xlink](/fr/docs/Web/SVG/Attribute#Attributs_XLink "SVG/Attribute#XLink") +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} +- {{SVGAttr("transform")}} + +### Attributs spécifiques + +- {{htmlattrxref("download", "a")}} {{experimental_inline}} +- {{SVGAttr("href")}} +- {{htmlattrxref("hreflang", "a")}} +- {{htmlattrxref("ping", "a")}} {{experimental_inline}} +- {{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}} +- {{htmlattrxref("rel", "a")}} {{experimental_inline}} +- {{SVGAttr("target")}} +- {{htmlattrxref("type", "a")}} +- {{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}} + +## Contexte d'utilisation + +{{svginfo}} + +## Interface DOM + +Cet élément implémente l'interface [`SVGAElement`](/fr/docs/DOM/SVGAElement "DOM/SVGAElement"). + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------- | +| {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}} | {{Spec2('Referrer Policy')}} | Ajoute l'attribut `referrerpolicy`. | +| {{SpecName("SVG2", "linking.html#Links", "<a>")}} | {{Spec2("SVG2")}} | Remplace l'attribut {{SVGAttr("xlink:href")}} par {{SVGAttr("href")}} | +| {{SpecName("SVG1.1", "linking.html#Links", "<a>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.a")}} diff --git a/files/fr/web/svg/element/altglyph/index.md b/files/fr/web/svg/element/altglyph/index.md index 84e3dc7422..876b56a8ba 100644 --- a/files/fr/web/svg/element/altglyph/index.md +++ b/files/fr/web/svg/element/altglyph/index.md @@ -7,76 +7,58 @@ tags: - SVG translation_of: Web/SVG/Element/altGlyph --- -<div>{{SVGRef}}{{deprecated_header}}</div> - -<p>L'élément <code>altGlyph</code> permet la selection des glyphes utilisées pour restituer un caractère de donnée.<br> - </p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Exemple">Exemple</h2> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Attributs à traitement conditionnel</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Presentation">Attributs de présentation</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#XLink">Attributs XLink</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{ SVGAttr("x") }}</li> - <li>{{ SVGAttr("y") }}</li> - <li>{{ SVGAttr("dx") }}</li> - <li>{{ SVGAttr("dy") }}</li> - <li>{{ SVGAttr("rotate") }}</li> - <li>{{ SVGAttr("glyphRef") }}</li> - <li>{{ SVGAttr("format") }}</li> - <li>{{ SVGAttr("xlink:href") }}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGAltGlyphElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphElement</a></code>.</p> - -<h2 id="Specifications">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('SVG1.1', 'text.html#AltGlyphElement', '<altGlyph>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.altGlyph")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{ SVGElement("tspan") }}</li> - <li>{{ SVGElement("glyph") }}</li> - <li>{{ SVGElement("altGlyphDef") }}</li> -</ul> +{{SVGRef}}{{deprecated_header}} + +L'élément `altGlyph` permet la selection des glyphes utilisées pour restituer un caractère de donnée. + + + +## Contexte d'utilisation + +{{svginfo}} + +## Exemple + +## Attributs + +### Attributs globaux + +- [Attributs à traitement conditionnel](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Attributs fondamentaux](/fr/docs/Web/SVG/Attribute#Core) » +- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#GraphicalEvent) » +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Presentation) » +- [Attributs XLink](/fr/docs/Web/SVG/Attribute#XLink) » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("externalResourcesRequired") }} + +### Attributs spécifiques + +- {{ SVGAttr("x") }} +- {{ SVGAttr("y") }} +- {{ SVGAttr("dx") }} +- {{ SVGAttr("dy") }} +- {{ SVGAttr("rotate") }} +- {{ SVGAttr("glyphRef") }} +- {{ SVGAttr("format") }} +- {{ SVGAttr("xlink:href") }} + +## Interface DOM + +Cet élément implémente l'interface [`SVGAltGlyphElement`](/fr/docs/Web/API/SVGAltGlyphElement "en/DOM/SVGAltGlyphElement"). + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- | +| {{SpecName('SVG1.1', 'text.html#AltGlyphElement', '<altGlyph>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.altGlyph")}} + +## Voir aussi + +- {{ SVGElement("tspan") }} +- {{ SVGElement("glyph") }} +- {{ SVGElement("altGlyphDef") }} diff --git a/files/fr/web/svg/element/altglyphdef/index.md b/files/fr/web/svg/element/altglyphdef/index.md index a326de0562..99e8f6ade4 100644 --- a/files/fr/web/svg/element/altglyphdef/index.md +++ b/files/fr/web/svg/element/altglyphdef/index.md @@ -7,36 +7,32 @@ tags: - SVG translation_of: Web/SVG/Element/altGlyphDef --- -<div>{{SVGRef}}{{deprecated_header}}</div> +{{SVGRef}}{{deprecated_header}} -<p>L'élément <code>altGlyphDef</code> défini une représentation de substitution pour les glyphes.</p> +L'élément `altGlyphDef` défini une représentation de substitution pour les glyphes. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> -</ul> +- [Attributs fondamentaux](/fr/docs/Web/SVG/Attribute#Core) » -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<p><em>Aucun</em></p> +_Aucun_ -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGAltGlyphDefElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphDefElement</a></code>.</p> +Cet élément implémente l'interface [`SVGAltGlyphDefElement`](/fr/docs/Web/API/SVGAltGlyphDefElement "en/DOM/SVGAltGlyphElement"). -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{ SVGElement("glyph") }}</li> - <li>{{ SVGElement("glyphRef") }}</li> - <li>{{ SVGElement("altGlyphDef") }}</li> -</ul> +- {{ SVGElement("glyph") }} +- {{ SVGElement("glyphRef") }} +- {{ SVGElement("altGlyphDef") }} diff --git a/files/fr/web/svg/element/altglyphitem/index.md b/files/fr/web/svg/element/altglyphitem/index.md index 2302fb57fa..56bed16b6f 100644 --- a/files/fr/web/svg/element/altglyphitem/index.md +++ b/files/fr/web/svg/element/altglyphitem/index.md @@ -7,38 +7,34 @@ tags: - SVG translation_of: Web/SVG/Element/altGlyphItem --- -<div>{{SVGRef}}{{deprecated_header}}</div> +{{SVGRef}}{{deprecated_header}} -<p>L'élément <code>altGlyphItem fournit un ensemble de candidats pour la substitution de glyphes par l'élément </code>{{ SVGElement("altGlyph") }}.</p> +L'élément `altGlyphItem fournit un ensemble de candidats pour la substitution de glyphes par l'élément `{{ SVGElement("altGlyph") }}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> -</ul> +- [Attributs fondamentaux](/fr/docs/Web/SVG/Attribute#Core) » -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<p><em>Aucun</em></p> +_Aucun_ -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGAltGlyphItemElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphItemElement</a></code>.</p> +Cet élément implémente l'interface [`SVGAltGlyphItemElement`](/fr/docs/Web/API/SVGAltGlyphItemElement "en/DOM/SVGAltGlyphElement"). -<p> </p> -<h2 id="Voir_également">Voir également</h2> -<ul> - <li>{{ SVGElement("glyph") }}</li> - <li>{{ SVGElement("glyphRef") }}</li> - <li>{{ SVGElement("altGlyphDef") }}</li> -</ul> +## Voir également + +- {{ SVGElement("glyph") }} +- {{ SVGElement("glyphRef") }} +- {{ SVGElement("altGlyphDef") }} diff --git a/files/fr/web/svg/element/animate/index.md b/files/fr/web/svg/element/animate/index.md index 49b8564999..da8200952a 100644 --- a/files/fr/web/svg/element/animate/index.md +++ b/files/fr/web/svg/element/animate/index.md @@ -7,101 +7,80 @@ tags: - SVG translation_of: Web/SVG/Element/animate --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément SVG <strong><code><animate></code></strong> est utilisé pour animer un attribut ou une propriété d'un élément au fil du temps. Il est normalement inséré dans l'élément cible ou référencé par l'attribut <code>href</code> de l'élément.</p> +L'élément SVG **`<animate>`** est utilisé pour animer un attribut ou une propriété d'un élément au fil du temps. Il est normalement inséré dans l'élément cible ou référencé par l'attribut `href` de l'élément. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel">Attributs de traitrement conditionnel</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Événements_d'animation">Attributs d'événement d'animation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs Xlink</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Animation_cible">Attributs cible d'attributs d'animation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Timing_de_l'animation">Attributs de timing de l'animation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Valeurs_de_l'animation">Attributs de valeur de l'animation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Addition_de_l'animation">Attributs d'addition de l'animation</a></li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> +- [Attributs de traitrement conditionnel](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel) +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs d'événement d'animation](/fr/docs/Web/SVG/Attribute#Événements_d'animation) +- [Attributs Xlink](/fr/docs/Web/SVG/Attribute#Attributs_XLink) +- [Attributs cible d'attributs d'animation](/fr/docs/Web/SVG/Attribute#Animation_cible) +- [Attributs de timing de l'animation](/fr/docs/Web/SVG/Attribute#Timing_de_l'animation) +- [Attributs de valeur de l'animation](/fr/docs/Web/SVG/Attribute#Valeurs_de_l'animation) +- [Attributs d'addition de l'animation](/fr/docs/Web/SVG/Attribute#Addition_de_l'animation) +- {{SVGAttr("externalResourcesRequired")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("attributeName")}}</li> - <li>{{SVGAttr("attributeType")}}</li> - <li>{{SVGAttr("from")}}</li> - <li>{{SVGAttr("to")}}</li> - <li>{{SVGAttr("dur")}}</li> - <li>{{SVGAttr("repeatCount")}}</li> -</ul> +- {{SVGAttr("attributeName")}} +- {{SVGAttr("attributeType")}} +- {{SVGAttr("from")}} +- {{SVGAttr("to")}} +- {{SVGAttr("dur")}} +- {{SVGAttr("repeatCount")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code>.</p> +Cet élément implémente l'interface [`SVGAnimateElement`](/fr/docs/Web/DOM/SVGAnimateElement). -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html; highlight[6-7]"><?xml version="1.0"?> -<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" - xmlns="http://www.w3.org/2000/svg"> +```html +<?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> - <rect x="10" y="10" width="100" height="100"> - <animate attributeType="XML" attributeName="x" from="-100" to="120" - dur="10s" repeatCount="indefinite"/> - </rect> -</svg></pre> + <rect x="10" y="10" width="100" height="100"> + <animate attributeType="XML" attributeName="x" from="-100" to="120" + dur="10s" repeatCount="indefinite"/> + </rect> +</svg> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemple", 120, 120)}}</p> +{{EmbedLiveSample("Exemple", 120, 120)}} -<h2 id="Problèmes_d'accessibilité">Problèmes d'accessibilité</h2> +## Problèmes d'accessibilité -<p>Les animations qui clignotent peuvent être problématiques pour les personnes ayant des problèmes cognitifs tels que le Trouble du Déficit de l'Attention avec ou sans Hyperactivité (TDAH). De plus, certains types de mouvements peuvent être un élément déclencheur pour les personnes présentant un risque de troubles vestibulaires, d'épilepsie, de migraine et de sensibilité à la scotopie.</p> +Les animations qui clignotent peuvent être problématiques pour les personnes ayant des problèmes cognitifs tels que le Trouble du Déficit de l'Attention avec ou sans Hyperactivité (TDAH). De plus, certains types de mouvements peuvent être un élément déclencheur pour les personnes présentant un risque de troubles vestibulaires, d'épilepsie, de migraine et de sensibilité à la scotopie. -<p>Envisagez de créer un mécanisme permettant de suspendre ou de désactiver l'animation, ainsi que d'utiliser la <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">requête reduced-motion</a> pour améliorer l'expérience des utilisateurs ayant définit pour préférence de ne pas avoir d'animations.</p> +Envisagez de créer un mécanisme permettant de suspendre ou de désactiver l'animation, ainsi que d'utiliser la [requête reduced-motion](/fr/docs/Web/CSS/@media/prefers-reduced-motion) pour améliorer l'expérience des utilisateurs ayant définit pour préférence de ne pas avoir d'animations. -<ul> - <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li> - <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> - <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> -</ul> +- [Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article](https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity) +- [An Introduction to the Reduced Motion Media Query | CSS-Tricks](https://css-tricks.com/introduction-reduced-motion-media-query/) +- [Responsive Design for Motion | WebKit](https://webkit.org/blog/7551/responsive-design-for-motion/) +- [MDN Understanding WCAG, Guideline 2.2 explanations](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content) +- [Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html) -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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("SVG Animations 2", "#AnimateElement", "<animate>")}}</td> - <td>{{Spec2("SVG Animations 2")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- | +| {{SpecName("SVG Animations 2", "#AnimateElement", "<animate>")}} | {{Spec2("SVG Animations 2")}} | Aucun changement | +| {{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}} | {{Spec2("SVG1.1")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.animate")}}</p> +{{Compat("svg.elements.animate")}} diff --git a/files/fr/web/svg/element/animatecolor/index.md b/files/fr/web/svg/element/animatecolor/index.md index dd2d640ab4..5be14a163f 100644 --- a/files/fr/web/svg/element/animatecolor/index.md +++ b/files/fr/web/svg/element/animatecolor/index.md @@ -7,87 +7,67 @@ tags: - SVG translation_of: Web/SVG/Element/animateColor --- -<div>{{SVGRef}}{{deprecated_header}}</div> +{{SVGRef}}{{deprecated_header}} -<div class="warning"> - <p><strong>Attention :</strong> Cet élément est déprécié depuis SVG 1.1 Deuxième édition et peut etre retiré dans une prochaine version de SVG. Il ne fournis pas de fonctionnalités non disponible en utilisant l'élément {{ SVGElement("animate") }}. Il n'est pas implémenté dans Firefox ni dans Internet Explorer. Il est préférable d'utiliser l'élément {{ SVGElement("animate") }} à la place.</p> -</div> +> **Attention :** Cet élément est déprécié depuis SVG 1.1 Deuxième édition et peut etre retiré dans une prochaine version de SVG. Il ne fournis pas de fonctionnalités non disponible en utilisant l'élément {{ SVGElement("animate") }}. Il n'est pas implémenté dans Firefox ni dans Internet Explorer. Il est préférable d'utiliser l'élément {{ SVGElement("animate") }} à la place. -<p>L'élément <strong><code><animateColor></code></strong> spécifie une transformation de couleur à travers le temps.</p> +L'élément **`<animateColor>`** spécifie une transformation de couleur à travers le temps. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Attributs à traitement conditionnel</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationEvent">Attributs d'événements d'animation</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#XLink">Attributs XLink</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#AnimationAttributeTarget">Attributs de cible d'attribut d'animation</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Attributs d'animation de timing</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Attributs d'animation de valeurs</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Attributs d'animation d'ajout</a> »</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> -</ul> +- [Attributs à traitement conditionnel](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Attributs fondamentaux](/fr/docs/Web/SVG/Attribute#Core) » +- [Attributs d'événements d'animation](/fr/docs/SVG/Attribute#AnimationEvent) » +- [Attributs XLink](/fr/docs/Web/SVG/Attribute#XLink) » +- [Attributs de cible d'attribut d'animation](/fr/docs/Web/SVG/Attribute#AnimationAttributeTarget) » +- [Attributs d'animation de timing](/fr/docs/SVG/Attribute#AnimationTiming "SVG/Attribute#AnimationTiming") » +- [Attributs d'animation de valeurs](/fr/docs/SVG/Attribute#AnimationValue "SVG/Attribute#AnimationValue") » +- [Attributs d'animation d'ajout](/fr/docs/SVG/Attribute#AnimationAddition "SVG/Attribute#AnimationAddition") » +- {{ SVGAttr("externalResourcesRequired") }} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{ SVGAttr("by") }}</li> - <li>{{ SVGAttr("from") }}</li> - <li>{{ SVGAttr("to") }}</li> -</ul> +- {{ SVGAttr("by") }} +- {{ SVGAttr("from") }} +- {{ SVGAttr("to") }} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/docs/DOM/SVGAnimateColorElement" title="en/DOM/SVGAnimateColorElement">SVGAnimateColorElement</a></code>.</p> +Cet élément implémente l'interface [`SVGAnimateColorElement`](/fr/docs/DOM/SVGAnimateColorElement "en/DOM/SVGAnimateColorElement"). -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush:html"><svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> - <circle cx="60" cy="60" r="50"> - <animateColor attributeName="fill" attributeType="XML" - from="black" to="red" dur="6s" repeatCount="indefinite"/> - </circle> -</svg> -</pre> +```html +<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> + <circle cx="60" cy="60" r="50"> + <animateColor attributeName="fill" attributeType="XML" + from="black" to="red" dur="6s" repeatCount="indefinite"/> + </circle> +</svg> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemple", 120, 120)}}</p> +{{EmbedLiveSample("Exemple", 120, 120)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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("SVG1.1", "animate.html#AnimateColorElement", "<animateColor>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- | +| {{SpecName("SVG1.1", "animate.html#AnimateColorElement", "<animateColor>")}} | {{Spec2("SVG1.1")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.animateColor")}}</p> +{{Compat("svg.elements.animateColor")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{ SVGElement("animate") }}</li> -</ul> +- {{ SVGElement("animate") }} diff --git a/files/fr/web/svg/element/animatemotion/index.md b/files/fr/web/svg/element/animatemotion/index.md index d5bc8130ca..248868dd83 100644 --- a/files/fr/web/svg/element/animatemotion/index.md +++ b/files/fr/web/svg/element/animatemotion/index.md @@ -7,103 +7,82 @@ tags: - SVG translation_of: Web/SVG/Element/animateMotion --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <strong><code><animateMotion></code></strong> permet d'animer un élément le long d'un chemin donné.</p> +L'élément **`<animateMotion>`** permet d'animer un élément le long d'un chemin donné. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Attributs à traitement conditionnel</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationEvent">Attributs d'événements d'animation</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#XLink">Attributs XLink</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Attributs d'animation de timing</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Attributs d'animation de valeurs</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Attributs d'animation d'ajout</a> »</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> -</ul> +- [Attributs à traitement conditionnel](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Attributs fondamentaux](/fr/docs/Web/SVG/Attribute#Core) » +- [Attributs d'événements d'animation](/fr/docs/SVG/Attribute#AnimationEvent) » +- [Attributs XLink](/fr/docs/Web/SVG/Attribute#XLink) » +- [Attributs d'animation de timing](/fr/docs/SVG/Attribute#AnimationTiming "SVG/Attribute#AnimationTiming") » +- [Attributs d'animation de valeurs](/fr/docs/SVG/Attribute#AnimationValue "SVG/Attribute#AnimationValue") » +- [Attributs d'animation d'ajout](/fr/docs/SVG/Attribute#AnimationAddition "SVG/Attribute#AnimationAddition") » +- {{ SVGAttr("externalResourcesRequired") }} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{ SVGAttr("calcMode") }}</li> - <li>{{ SVGAttr("path") }}</li> - <li>{{ SVGAttr("keyPoints") }}</li> - <li>{{ SVGAttr("rotate") }}</li> - <li>{{ SVGAttr("origin") }}</li> -</ul> +- {{ SVGAttr("calcMode") }} +- {{ SVGAttr("path") }} +- {{ SVGAttr("keyPoints") }} +- {{ SVGAttr("rotate") }} +- {{ SVGAttr("origin") }} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/docs/DOM/SVGAnimateMotionElement" title="en/DOM/SVGAnimateMotionElement">SVGAnimateMotionElement</a></code>.</p> +Cet élément implémente l'interface [`SVGAnimateMotionElement`](/fr/docs/DOM/SVGAnimateMotionElement "en/DOM/SVGAnimateMotionElement"). -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html; highlight[18-20]"><?xml version="1.0"?> -<svg width="120" height="120" viewBox="0 0 120 120" +```html +<?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" - xmlns:xlink="http://www.w3.org/1999/xlink"> + xmlns:xlink="http://www.w3.org/1999/xlink"> - <!-- Dessine le chemin en gris, avec 2 cercles aux extrémités --> - <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" + <!-- Dessine le chemin en gris, avec 2 cercles aux extrémités --> + <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" - fill="none" id="theMotionPath"/> - <circle cx="10" cy="110" r="3" fill="lightgrey" /> - <circle cx="110" cy="10" r="3" fill="lightgrey" /> - - <!-- Cercle rouge qui sera déplacé le long du chemin. --> - <circle cx="" cy="" r="5" fill="red"> - - <!-- Définit l'animation --> - <animateMotion dur="6s" repeatCount="indefinite"> - <mpath xlink:href="#theMotionPath"/> - </animateMotion> - </circle> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 120, 120)}}</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("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}</td> - <td>{{Spec2("SVG Animations 2")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.animateMotion")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ SVGElement("mpath") }}</li> -</ul> + fill="none" id="theMotionPath"/> + <circle cx="10" cy="110" r="3" fill="lightgrey" /> + <circle cx="110" cy="10" r="3" fill="lightgrey" /> + + <!-- Cercle rouge qui sera déplacé le long du chemin. --> + <circle cx="" cy="" r="5" fill="red"> + + <!-- Définit l'animation --> + <animateMotion dur="6s" repeatCount="indefinite"> + <mpath xlink:href="#theMotionPath"/> + </animateMotion> + </circle> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 120, 120)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- | +| {{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}} | {{Spec2("SVG Animations 2")}} | Aucun changement | +| {{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.animateMotion")}} + +## Voir aussi + +- {{ SVGElement("mpath") }} diff --git a/files/fr/web/svg/element/animatetransform/index.md b/files/fr/web/svg/element/animatetransform/index.md index b572d797e3..f8eec01ee7 100644 --- a/files/fr/web/svg/element/animatetransform/index.md +++ b/files/fr/web/svg/element/animatetransform/index.md @@ -7,87 +7,68 @@ tags: - SVG Animation translation_of: Web/SVG/Element/animateTransform --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <strong><code><animateTransform></code></strong> permet d'animer un élement en appliquant une transformation: translation, mise à l'échelle, rotation et/ou inclinaison.</p> +L'élément **`<animateTransform>`** permet d'animer un élement en appliquant une transformation: translation, mise à l'échelle, rotation et/ou inclinaison. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: html"><?xml version="1.0"?> -<svg width="120" height="120" viewBox="0 0 120 120" +```html +<?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" - xmlns:xlink="http://www.w3.org/1999/xlink" > + xmlns:xlink="http://www.w3.org/1999/xlink" > - <polygon points="60,30 90,90 30,90"> - <animateTransform attributeName="transform" + <polygon points="60,30 90,90 30,90"> + <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" - repeatCount="indefinite"/> - </polygon> -</svg></pre> - -<p>{{ EmbedLiveSample('Exemple','120','120') }}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Attributs de base</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">Attributs de l'évènement d'animation</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Attributs Xlink</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationAttributeTarget" title="en/SVG/Attribute#AnimationAttributeTarget">Attributs de ciblage d'animation</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">Attributs de chronométrage d'animation</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">Attributs de valeur d'animation</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">Attributs d'ajout d'animations</a> »</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{ SVGAttr("by") }}</li> - <li>{{ SVGAttr("from") }}</li> - <li>{{ SVGAttr("to") }}</li> - <li>{{ SVGAttr("type") }}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface <code><a href="/fr/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</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("SVG Animations 2", "#AnimateTransformElement", "<animateTransform>")}}</td> - <td>{{Spec2("SVG Animations 2")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '<animateTransform>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.animateTransform")}}</p> + repeatCount="indefinite"/> + </polygon> +</svg> +``` + +{{ EmbedLiveSample('Exemple','120','120') }} + +## Attributs + +### Attributs globaux + +- [Attributs de traitement conditionnel](/fr/docs/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » +- [Attributs de base](/fr/docs/SVG/Attribute#Core "en/SVG/Attribute#Core") » +- [Attributs de l'évènement d'animation](/fr/docs/SVG/Attribute#AnimationEvent "en/SVG/Attribute#AnimationEvent") » +- [Attributs Xlink](/fr/docs/SVG/Attribute#XLink "en/SVG/Attribute#XLink") » +- [Attributs de ciblage d'animation](/fr/docs/SVG/Attribute#AnimationAttributeTarget "en/SVG/Attribute#AnimationAttributeTarget") » +- [Attributs de chronométrage d'animation](/fr/docs/SVG/Attribute#AnimationTiming "en/SVG/Attribute#AnimationTiming") » +- [Attributs de valeur d'animation](/fr/docs/SVG/Attribute#AnimationValue "en/SVG/Attribute#AnimationValue") » +- [Attributs d'ajout d'animations](/fr/docs/SVG/Attribute#AnimationAddition "en/SVG/Attribute#AnimationAddition") » +- {{ SVGAttr("externalResourcesRequired") }} + +### Attributs spécifiques + +- {{ SVGAttr("by") }} +- {{ SVGAttr("from") }} +- {{ SVGAttr("to") }} +- {{ SVGAttr("type") }} + +## Interface DOM + +Cet élément implémente l'interface [`SVGAnimateTransformElement`](/fr/docs/DOM/SVGAnimateTransformElement "en/DOM/SVGAnimateTransformElement"). + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- | +| {{SpecName("SVG Animations 2", "#AnimateTransformElement", "<animateTransform>")}} | {{Spec2("SVG Animations 2")}} | Aucun changement | +| {{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '<animateTransform>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.animateTransform")}} diff --git a/files/fr/web/svg/element/circle/index.md b/files/fr/web/svg/element/circle/index.md index 6fba0b5e8d..0de460e661 100644 --- a/files/fr/web/svg/element/circle/index.md +++ b/files/fr/web/svg/element/circle/index.md @@ -7,60 +7,58 @@ tags: - SVG Reference translation_of: Web/SVG/Element/circle --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <code>circle</code> est un élément de la catégorie des Formes simples, utilisé pour créer des cercles, en se basant sur un centre et un rayon.</p> +L'élément `circle` est un élément de la catégorie des Formes simples, utilisé pour créer des cercles, en se basant sur un centre et un rayon. -<h2 id="Usage">Usage</h2> +## Usage -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: css hidden"> html,body,svg { height:100% } </pre> +```css hidden + html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <circle cx="50" cy="50" r="50"/> + <circle cx="50" cy="50" r="50"/> -</svg></pre> +</svg> +``` -<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> +{{EmbedLiveSample('Exemple', 100, 100)}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_Globaux">Attributs Globaux</h3> +### Attributs Globaux -<ul> - <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="fr/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> »</li> - <li><a href="/fr/SVG/Attribute#Core" title="fr/SVG/Attribute#Core">Attributs centraux</a> »</li> - <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="fr/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li> - <li><a href="/fr/SVG/Attribute#Presentation" title="fr/SVG/Attribute#Presentation">Attributs de présentation</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> - <li>{{ SVGAttr("transform") }}</li> -</ul> +- [Attributs conditionnels](/fr/SVG/Attribute#ConditionalProccessing "fr/SVG/Attribute#ConditionalProccessing") » +- [Attributs centraux](/fr/SVG/Attribute#Core "fr/SVG/Attribute#Core") » +- [Attributs d'événements graphiques](/fr/SVG/Attribute#GraphicalEvent "fr/SVG/Attribute#GraphicalEvent") » +- [Attributs de présentation](/fr/SVG/Attribute#Presentation "fr/SVG/Attribute#Presentation") » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("externalResourcesRequired") }} +- {{ SVGAttr("transform") }} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{ SVGAttr("cx") }}</li> - <li>{{ SVGAttr("cy") }}</li> - <li>{{ SVGAttr("r") }}</li> -</ul> +- {{ SVGAttr("cx") }} +- {{ SVGAttr("cy") }} +- {{ SVGAttr("r") }} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{ domxref("SVGCircleElement") }}.</p> +Cet élément implémente l'interface {{ domxref("SVGCircleElement") }}. -<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> +## Compatibilité avec les navigateurs -<p>{{Compat("svg.elements.circle")}}</p> +{{Compat("svg.elements.circle")}} -<h2 id="Corrélat">Corrélat</h2> +## Corrélat -<ul> - <li>{{ SVGElement("ellipse") }}</li> - <li>{{ SVGElement("rect") }}</li> -</ul> +- {{ SVGElement("ellipse") }} +- {{ SVGElement("rect") }} diff --git a/files/fr/web/svg/element/clippath/index.md b/files/fr/web/svg/element/clippath/index.md index 8ff3ec5a54..98186c7ca7 100644 --- a/files/fr/web/svg/element/clippath/index.md +++ b/files/fr/web/svg/element/clippath/index.md @@ -6,105 +6,88 @@ tags: - SVG translation_of: Web/SVG/Element/clipPath --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><clipPath></code></strong> définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}.</p> +L'élément [SVG](/fr/docs/Web/SVG) **`<clipPath>`** définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}. -<p>Le détourage limite la zone dans laquelle l'élément sur lequel il est appliqué sera dessiné. Autrement dit, les parties de l'élément en dehors de la forme créée par le détourage ne seront pas affichées.</p> +Le détourage limite la zone dans laquelle l'élément sur lequel il est appliqué sera dessiné. Autrement dit, les parties de l'élément en dehors de la forme créée par le détourage ne seront pas affichées. -<h2>Exemple</h2> +## Exemple -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="0 0 100 100"> - <clipPath id="myClip"> - <!-- La forme créée par le détourage est un simple cercle. --> - <circle cx="40" cy="35" r="35" /> - </clipPath> +```html +<svg viewBox="0 0 100 100"> + <clipPath id="myClip"> + <!-- La forme créée par le détourage est un simple cercle. --> + <circle cx="40" cy="35" r="35" /> + </clipPath> - <!-- Le coeur sans détourage, pour référence --> - <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> + <!-- Le coeur sans détourage, pour référence --> + <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> - <!-- + <!-- Le coeur avec détourage. Seule la partie à l'intérieur du cercle est visible. - --> - <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /> -</svg></pre> + --> + <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /> +</svg> +``` -<pre class="brush: css">/* Animation CSS pour les navigateurs * +```css +/* Animation CSS pour les navigateurs * * qui implémentent la propriété de géométrie r. */ @keyframes openYourHeart {from {r: 0} to {r: 60px}} #myClip circle { animation: openYourHeart 15s infinite; -}</pre> - -<p>{{EmbedLiveSample('exemple', 100, 100)}}</p> - -<p>Sur le plan conceptuel, un détourage est un peu comme une zone d'affichage personnalisée pour l'élément sur lequel il est appliqué. Cela va limiter la zone dans laquelle l'élément est affiché, sans affecter sa géométrie (position, taille, etc).</p> - -<p>La zone de sélection d'un élément détouré (c'est à dire un élément qui référence un <code><clipPath></code> via la propriété {{SVGAttr("clip-path")}}, ou un de ses enfant) reste la même, comme s'il n'était pas tronqué.</p> - -<p>Par défaut, les événements de pointeur ne sont pas déclenchés sur les régions détourées (non visibles) d'une forme. Par exemple, un cercle avec un rayon de 10 qui est détouré à un cercle de rayon 5, ne recevra pas d'événement "click" en dehors de ce rayon de 5. Ce comportement peut être modifié avec la propriété {{cssxref("pointer-events")}}.</p> - -<h2 id="Attributs">Attributs</h2> - -<dl> - <dt>{{SVGAttr("clipPathUnits")}}</dt> - <dd>Cet attribut définit le système de coordonnées pour le contenu de l'élément <code><clipPath></code>.<br> - <small><em>Valeur</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Valeur par défaut</em>: <code>userSpaceOnUse</code>; <em>Animation</em>: <strong>oui</strong></small></dd> -</dl> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<dl> - <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt> - <dd><small>Notamment: {{SVGAttr('id')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> - <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> - <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> - <dd><small>Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> -</dl> - -<h2 id="Notes_d'usage">Notes d'usage</h2> - -<p>{{svginfo}}</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("CSS Masks", "#ClipPathElement", "<clipPath>")}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "masking.html#EstablishingANewClippingPath", "<clipPath>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.clipPath")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Élément de masquage: {{SVGElement("mask")}}</li> - <li>Quelques propriétés CSS: {{cssxref("clip-path")}}, {{cssxref("pointer-events")}}</li> -</ul> +} +``` + +{{EmbedLiveSample('exemple', 100, 100)}} + +Sur le plan conceptuel, un détourage est un peu comme une zone d'affichage personnalisée pour l'élément sur lequel il est appliqué. Cela va limiter la zone dans laquelle l'élément est affiché, sans affecter sa géométrie (position, taille, etc). + +La zone de sélection d'un élément détouré (c'est à dire un élément qui référence un `<clipPath>` via la propriété {{SVGAttr("clip-path")}}, ou un de ses enfant) reste la même, comme s'il n'était pas tronqué. + +Par défaut, les événements de pointeur ne sont pas déclenchés sur les régions détourées (non visibles) d'une forme. Par exemple, un cercle avec un rayon de 10 qui est détouré à un cercle de rayon 5, ne recevra pas d'événement "click" en dehors de ce rayon de 5. Ce comportement peut être modifié avec la propriété {{cssxref("pointer-events")}}. + +## Attributs + +- {{SVGAttr("clipPathUnits")}} + - : Cet attribut définit le système de coordonnées pour le contenu de l'élément `<clipPath>`. + _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `userSpaceOnUse`; _Animation_: **oui** + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute/Core) + - : Notamment: {{SVGAttr('id')}} +- [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute/Conditional_Processing) + - : Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) + - : Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} + +## Notes d'usage + +{{svginfo}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName("CSS Masks", "#ClipPathElement", "<clipPath>")}} | {{Spec2("CSS Masks")}} | | +| {{SpecName("SVG1.1", "masking.html#EstablishingANewClippingPath", "<clipPath>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.clipPath")}} + +## Voir aussi + +- Élément de masquage: {{SVGElement("mask")}} +- Quelques propriétés CSS: {{cssxref("clip-path")}}, {{cssxref("pointer-events")}} diff --git a/files/fr/web/svg/element/defs/index.md b/files/fr/web/svg/element/defs/index.md index 6072fe6564..91f0b9ebe4 100644 --- a/files/fr/web/svg/element/defs/index.md +++ b/files/fr/web/svg/element/defs/index.md @@ -3,81 +3,63 @@ title: <defs> slug: Web/SVG/Element/defs translation_of: Web/SVG/Element/defs --- -<div>{{SVGRef}}</div> - -<p>SVG permet de définir des objets graphiques (génériques) pour une utilisation ultérieure. Autant qu'il est possible, cet usage est recommandé grâce aux propriétés offertes par l'élément <code>defs</code>.<br> - Ainsi définir ces éléments au sein de l'élément <code>defs</code> promeut une meilleure compréhension du contenu SVG par l'homme et donc son accessibilité.<br> - <br> - Les éléments définis grâce à <code>defs</code> ne sont jamais directement générés (<em>au sens du rendu graphique : ils ne sont pas affichés</em>). Vous devez utiliser l'élément {{SVGElement("use")}} pour leur-s utilisation-s lorsque vous le souhaitez au sein du <code>viewport</code>.</p> - -<h2 id="Contexte_d'usage">Contexte d'usage</h2> - -<p>{{svginfo}}</p> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: xml"><svg width="80px" height="30px" viewBox="0 0 80 30" - xmlns="http://www.w3.org/2000/svg"> - - <defs> - <linearGradient id="Gradient01"> - <stop offset="20%" stop-color="#39F" /> - <stop offset="90%" stop-color="#F3F" /> - </linearGradient> - </defs> - - <rect x="10" y="10" width="60" height="10" - fill="url(#Gradient01)" /> -</svg> -</pre> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Presentation">Presentation attributes</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> - -<p><em>Il ne dispoe pas d'attributs spécifiques. </em></p> - -<h2 id="Interface_avec_DOM">Interface avec DOM</h2> - -<p>Cet élément est implémenté par l'interface <code><a href="/fr/docs/Web/API/SVGDefsElement">SVGDefsElement</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">Status</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('SVG2', 'struct.html#Head', '<defs>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'struct.html#Head', '<defs>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.defs")}}</p> +{{SVGRef}} + +SVG permet de définir des objets graphiques (génériques) pour une utilisation ultérieure. Autant qu'il est possible, cet usage est recommandé grâce aux propriétés offertes par l'élément `defs`. +Ainsi définir ces éléments au sein de l'élément `defs` promeut une meilleure compréhension du contenu SVG par l'homme et donc son accessibilité. + +Les éléments définis grâce à `defs` ne sont jamais directement générés (_au sens du rendu graphique : ils ne sont pas affichés_). Vous devez utiliser l'élément {{SVGElement("use")}} pour leur-s utilisation-s lorsque vous le souhaitez au sein du `viewport`. + +## Contexte d'usage + +{{svginfo}} + +## Exemple + +```xml +<svg width="80px" height="30px" viewBox="0 0 80 30" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <linearGradient id="Gradient01"> + <stop offset="20%" stop-color="#39F" /> + <stop offset="90%" stop-color="#F3F" /> + </linearGradient> + </defs> + + <rect x="10" y="10" width="60" height="10" + fill="url(#Gradient01)" /> +</svg> +``` + +## Attributs + +### Attributs globaux + +- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core) » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#GraphicalEvent) » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation) » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} +- {{SVGAttr("transform")}} + +### Attributs spécifiques + +_Il ne dispoe pas d'attributs spécifiques._ + +## Interface avec DOM + +Cet élément est implémenté par l'interface [`SVGDefsElement`](/fr/docs/Web/API/SVGDefsElement). + +## Spécifications + +| Spécification | Status | Commentaire | +| ---------------------------------------------------------------------------- | ------------------------ | ------------------ | +| {{SpecName('SVG2', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG1.1')}} | Initial definition | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.defs")}} diff --git a/files/fr/web/svg/element/desc/index.md b/files/fr/web/svg/element/desc/index.md index 8ef116c3d2..e40cec135f 100644 --- a/files/fr/web/svg/element/desc/index.md +++ b/files/fr/web/svg/element/desc/index.md @@ -7,40 +7,36 @@ tags: - SVG Description translation_of: Web/SVG/Element/desc --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>Tout élément graphique ou conteneur dans un dessin SVG peut définir une description en utilisant l'élément <strong><code><desc></code></strong>, cette description ne peut contenir que du texte.</p> +Tout élément graphique ou conteneur dans un dessin SVG peut définir une description en utilisant l'élément **`<desc>`**, cette description ne peut contenir que du texte. -<p>Quand l'élément contenant une description apparaît à l'utilisateur sous forme d'image, l'élément <code><desc></code> n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en remplacement des éléments graphiques. De manière générale, cet élément améliore l'accessibilité des documents SVG.</p> +Quand l'élément contenant une description apparaît à l'utilisateur sous forme d'image, l'élément `<desc>` n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en remplacement des éléments graphiques. De manière générale, cet élément améliore l'accessibilité des documents SVG. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<p><em>(Aucun)</em></p> +_(Aucun)_ -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGDescElement" title="en/DOM/SVGDescElement">SVGDescElement</a></code>.</p> +Cet élément implémente l'interface [`SVGDescElement`](/fr/docs/Web/API/SVGDescElement "en/DOM/SVGDescElement"). -<h2 id="Compatibilitée_des_navigateurs">Compatibilitée des navigateurs</h2> +## Compatibilitée des navigateurs -<p>{{Compat("svg.elements.desc")}}</p> +{{Compat("svg.elements.desc")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ SVGElement("title") }}</li> -</ul> +- {{ SVGElement("title") }} diff --git a/files/fr/web/svg/element/ellipse/index.md b/files/fr/web/svg/element/ellipse/index.md index 450766fb25..3a4da75a41 100644 --- a/files/fr/web/svg/element/ellipse/index.md +++ b/files/fr/web/svg/element/ellipse/index.md @@ -7,125 +7,81 @@ tags: - SVG Reference translation_of: Web/SVG/Element/ellipse --- -<div>{{SVGRef}}</div> - -<p>L'élément <code>ellipse</code> est une forme basique SVG,utilisé pour créer des ellipses basées sur un centre, et ses deux rayons x et y.</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> Il est impossible de spécifier l'orientation exacte d'une ellipse (par exemple, si vous souhaitez dessiner une ellipse à un angle de 45°), mais l'ellipse peut avoir une rotation avec l'attribut {{ SVGAttr("transform") }}.</p> -</div> - -<pre class="brush: xml"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> - <ellipse cx="100" cy="50" rx="100" ry="50" /> -</svg></pre> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - - - -<dl> - <dt>{{ SVGAttr("cx") }}</dt> - <dd>La position x de l'ellipse.<br> - <small>Type de valeur : <strong><a href="/fr/docs/Web/SVG/Content_type#Length"><longueur></a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><pourcentage></a>; Valeur par défaut : <code>0</code>; Animable : <strong>oui</strong>.</small></dd> - <dt>{{ SVGAttr("cy") }}</dt> - <dd>La position y de l'ellipse.<br> - <small>Type de valeur : <strong><a href="/fr/docs/Web/SVG/Content_type#Length"><longueur></a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><pourcentage></a>; Valeur par défaut : <code>0</code>; Animable : <strong>oui</strong>.</small></dd> - <dt>{{ SVGAttr("rx") }}</dt> - <dd>Le rayon de l'ellipse sur l'axe x.<br> - <small>Type de valeur : <code>auto</code>|<strong><a href="/fr/docs/Web/SVG/Content_type#Length"><longueur></a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><pourcentage></a>; Valeur par défaut : <code>auto</code>; Animable : <strong>oui</strong>.</small></dd> - <dt>{{ SVGAttr("ry") }}</dt> - <dd>Le rayon de l'ellipse sur l'axe y.<br> - <small>Type de valeur : <code>auto</code>|<strong><a href="/fr/docs/Web/SVG/Content_type#Length"><longueur></a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><pourcentage></a>; Valeur par défaut : <code>auto</code>; Animable : <strong>oui</strong>.</small></dd> - <dt>{{ SVGAttr("pathLength") }}</dt> - <dd>Cet attribut permet de spécifier la longueur totale du tracé, en unités de l'utilisateur.<br> - <small>Type de valeur : <strong><a href="/fr/docs/Web/SVG/Content_type#Number"><number></a></strong>; Valeur par défaut : <code>auto</code>; Animable : <strong>oui</strong>.</small></dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> À partir de SVG2, cx, cy, rx, et ry sont des <em>Propriétés Géomatriques</em>, ce qui signifie que ces attributs peuvent aussi être utilisés comme propriétés CSS pour cet élément.</p> -</div> - -<h3 id="Attributs_Globaux">Attributs Globaux</h3> - -<dl> - <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs centraux</a></dt> - <dd>Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> - <dd>{{SVGAttr('class')}}, {{SVGAttr('style')}}</dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> - <dd>Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</dd> - <dt>Attributs d'événements</dt> - <dd><a href="/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Attributs d'événément globaux</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Attributs d'événément graphiques</a></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> - <dd>Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</dd> - <dt>Attributs ARIA</dt> - <dd><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></dd> -</dl> - -<h2 id="Usage">Usage</h2> - -<p>{{svginfo}}</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('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td>Ajout de la valeur <code>auto</code> pour <code>rx</code> et <code>ry</code></td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGEllipseElement" title="en/DOM/SVGEllipseElement">SVGEllipseElement</a></code>.</p> - -<h2 id="Specifications">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('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td>Ajout de la valeur <code>auto</code> pour <code>rx</code> et <code>ry</code>.</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.ellipse")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>Autres formes de base SVG : <strong>{{SVGElement('circle')}}</strong>, {{SVGElement('line')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}</li> -</ul> +{{SVGRef}} + +L'élément `ellipse` est une forme basique SVG,utilisé pour créer des ellipses basées sur un centre, et ses deux rayons x et y. + +> **Note :** Il est impossible de spécifier l'orientation exacte d'une ellipse (par exemple, si vous souhaitez dessiner une ellipse à un angle de 45°), mais l'ellipse peut avoir une rotation avec l'attribut {{ SVGAttr("transform") }}. + +```xml +<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <ellipse cx="100" cy="50" rx="100" ry="50" /> +</svg> +``` + +## Attributs + +### Attributs spécifiques + +- {{ SVGAttr("cx") }} + - : La position x de l'ellipse. + Type de valeur : **[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `0`; Animable : **oui**. +- {{ SVGAttr("cy") }} + - : La position y de l'ellipse. + Type de valeur : **[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `0`; Animable : **oui**. +- {{ SVGAttr("rx") }} + - : Le rayon de l'ellipse sur l'axe x. + Type de valeur : `auto`|**[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `auto`; Animable : **oui**. +- {{ SVGAttr("ry") }} + - : Le rayon de l'ellipse sur l'axe y. + Type de valeur : `auto`|**[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `auto`; Animable : **oui**. +- {{ SVGAttr("pathLength") }} + - : Cet attribut permet de spécifier la longueur totale du tracé, en unités de l'utilisateur. + Type de valeur : **[\<number>](/fr/docs/Web/SVG/Content_type#Number)**; Valeur par défaut : `auto`; Animable : **oui**. + +> **Note :** À partir de SVG2, cx, cy, rx, et ry sont des _Propriétés Géomatriques_, ce qui signifie que ces attributs peuvent aussi être utilisés comme propriétés CSS pour cet élément. + +### Attributs Globaux + +- [Attributs centraux](/fr/docs/Web/SVG/Attribute/Core) + - : Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute/Conditional_Processing) + - : Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Attributs d'événements + - : [Attributs d'événément globaux](/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes), [Attributs d'événément graphiques](/fr/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) + - : Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- Attributs ARIA + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Usage + +{{svginfo}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------ | ------------------------------------------- | +| {{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG2')}} | Ajout de la valeur `auto` pour `rx` et `ry` | +| {{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Interface DOM + +Cet élément implémente l'interface [`SVGEllipseElement`](/fr/DOM/SVGEllipseElement "en/DOM/SVGEllipseElement"). + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------ | -------------------------------------------- | +| {{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG2')}} | Ajout de la valeur `auto` pour `rx` et `ry`. | +| {{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG1.1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.ellipse")}} + +## Voir aussi + +- Autres formes de base SVG : **{{SVGElement('circle')}}**, {{SVGElement('line')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}} diff --git a/files/fr/web/svg/element/feblend/index.md b/files/fr/web/svg/element/feblend/index.md index 4c179a67b5..04a65520ce 100644 --- a/files/fr/web/svg/element/feblend/index.md +++ b/files/fr/web/svg/element/feblend/index.md @@ -7,109 +7,88 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feBlend --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feBlend></code></strong> permet de combiner deux objets en utilisant un mode de fusion définit, un peu de la même manière que les logiciels de retouche d'image permettent de fusionner deux calques. Le mode à utiliser est définit par l'attribut {{SVGAttr("mode")}}.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feBlend>`** permet de combiner deux objets en utilisant un mode de fusion définit, un peu de la même manière que les logiciels de retouche d'image permettent de fusionner deux calques. Le mode à utiliser est définit par l'attribut {{SVGAttr("mode")}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("in2")}}</li> - <li>{{SVGAttr("mode")}}</li> -</ul> +- {{SVGAttr("in")}} +- {{SVGAttr("in2")}} +- {{SVGAttr("mode")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEBlendElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEBlendElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html; highlight[5-6]"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="spotlight"> - <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" - flood-color="green" flood-opacity="1"/> - <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/> - </filter> - </defs> +```html +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="spotlight"> + <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" + flood-color="green" flood-opacity="1"/> + <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/> + </filter> + </defs> - <image xlink:href="/files/6457/mdn_logo_only_color.png" + <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" - style="filter:url(#spotlight);"/> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 200, 200)}}</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("Filters 1.0", "#feBlendElement", "<feBlend>")}}</td> - <td>{{Spec2("Filters 1.0")}}</td> - <td>Modes de fusion externalisés vers {{SpecName("Compositing", "#ltblendmodegt")}}</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feBlendElement", "<feBlend>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feBlend")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> + style="filter:url(#spotlight);"/> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 200, 200)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------- | +| {{SpecName("Filters 1.0", "#feBlendElement", "<feBlend>")}} | {{Spec2("Filters 1.0")}} | Modes de fusion externalisés vers {{SpecName("Compositing", "#ltblendmodegt")}} | +| {{SpecName("SVG1.1", "filters.html#feBlendElement", "<feBlend>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feBlend")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fecolormatrix/index.md b/files/fr/web/svg/element/fecolormatrix/index.md index 6d5f56a90a..816db35ea7 100644 --- a/files/fr/web/svg/element/fecolormatrix/index.md +++ b/files/fr/web/svg/element/fecolormatrix/index.md @@ -7,155 +7,134 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feColorMatrix --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre SVG <strong><code><feColorMatrix></code></strong> change les couleurs d'un élément en fonction d'une matrice de transformation. Chaque pixel (représenté par un vecteur [R,G,B,A]) est <a href="https://fr.wikipedia.org/wiki/Produit_matriciel">multiplié par matrice</a> pour créer une nouvelle couleur:</p> +La primitive de filtre SVG **`<feColorMatrix>`** change les couleurs d'un élément en fonction d'une matrice de transformation. Chaque pixel (représenté par un vecteur \[R,G,B,A]) est [multiplié par matrice](https://fr.wikipedia.org/wiki/Produit_matriciel) pour créer une nouvelle couleur: -<pre>| R' | | a00 a01 a02 a03 a04 | | R | -| G' | | a10 a11 a12 a13 a14 | | G | -| B' | = | a20 a21 a22 a23 a24 | * | B | -| A' | | a30 a31 a32 a33 a34 | | A | -| 1 | | 0 0 0 0 1 | | 1 |</pre> + | R' | | a00 a01 a02 a03 a04 | | R | + | G' | | a10 a11 a12 a13 a14 | | G | + | B' | = | a20 a21 a22 a23 a24 | * | B | + | A' | | a30 a31 a32 a33 a34 | | A | + | 1 | | 0 0 0 0 1 | | 1 | -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("type")}}</li> - <li>{{SVGAttr("values")}}</li> -</ul> +- {{SVGAttr("in")}} +- {{SVGAttr("type")}} +- {{SVGAttr("values")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEColorMatrixElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEColorMatrixElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html; highlight[19-24,31-33,40-42,49-50]"><svg width="100%" height="100%" viewBox="0 0 150 360" +```html +<svg width="100%" height="100%" viewBox="0 0 150 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - - <!-- ref --> - <defs> - <g id="circles"> - <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> - <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> - <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> - </g> - </defs> - <use href="#circles" /> - <text x="70" y="50">Reference</text> - - <!-- matrix --> - <filter id="colorMeMatrix"> - <feColorMatrix in="SourceGraphic" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- ref --> + <defs> + <g id="circles"> + <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> + <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> + <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> + </g> + </defs> + <use href="#circles" /> + <text x="70" y="50">Reference</text> + + <!-- matrix --> + <filter id="colorMeMatrix"> + <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 - 0 0 0 1 0" /> - </filter> - <use href="#circles" transform="translate(0 70)" filter="url(#colorMeMatrix)" /> - <text x="70" y="120">matrix</text> - - <!-- saturate --> - <filter id="colorMeSaturate"> - <feColorMatrix in="SourceGraphic" + 0 0 0 1 0" /> + </filter> + <use href="#circles" transform="translate(0 70)" filter="url(#colorMeMatrix)" /> + <text x="70" y="120">matrix</text> + + <!-- saturate --> + <filter id="colorMeSaturate"> + <feColorMatrix in="SourceGraphic" type="saturate" - values="0.2" /> - </filter> - <use href="#circles" transform="translate(0 140)" filter="url(#colorMeSaturate)" /> - <text x="70" y="190">saturate</text> - - <!-- hueRotate --> - <filter id="colorMeHueRotate"> - <feColorMatrix in="SourceGraphic" + values="0.2" /> + </filter> + <use href="#circles" transform="translate(0 140)" filter="url(#colorMeSaturate)" /> + <text x="70" y="190">saturate</text> + + <!-- hueRotate --> + <filter id="colorMeHueRotate"> + <feColorMatrix in="SourceGraphic" type="hueRotate" - values="180" /> - </filter> - <use href="#circles" transform="translate(0 210)" filter="url(#colorMeHueRotate)" /> - <text x="70" y="260">hueRotate</text> - - <!-- luminanceToAlpha --> - <filter id="colorMeLTA"> - <feColorMatrix in="SourceGraphic" - type="luminanceToAlpha" /> - </filter> - <use href="#circles" transform="translate(0 280)" filter="url(#colorMeLTA)" /> - <text x="70" y="320">luminanceToAlpha</text> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", "100%", 700, "/files/4371/test.png")}}</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('Filters 1.0', '#feColorMatrixElement', '<feColorMatrix>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feColorMatrixElement', '<feColorMatrix>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feColorMatrix")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> + values="180" /> + </filter> + <use href="#circles" transform="translate(0 210)" filter="url(#colorMeHueRotate)" /> + <text x="70" y="260">hueRotate</text> + + <!-- luminanceToAlpha --> + <filter id="colorMeLTA"> + <feColorMatrix in="SourceGraphic" + type="luminanceToAlpha" /> + </filter> + <use href="#circles" transform="translate(0 280)" filter="url(#colorMeLTA)" /> + <text x="70" y="320">luminanceToAlpha</text> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", "100%", 700, "/files/4371/test.png")}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#feColorMatrixElement', '<feColorMatrix>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#feColorMatrixElement', '<feColorMatrix>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feColorMatrix")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fecomponenttransfer/index.md b/files/fr/web/svg/element/fecomponenttransfer/index.md index 1c4e672cde..5db55d9aa2 100644 --- a/files/fr/web/svg/element/fecomponenttransfer/index.md +++ b/files/fr/web/svg/element/fecomponenttransfer/index.md @@ -7,157 +7,138 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feComponentTransfer --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feComponentTransfer></code></strong> permet d'effectuer un remappage des composantes de couleur (rouge, bleu, vert et alpha) de chaque pixel. Cela permet notamment de régler la luminosité, le constraste, la balance des couleurs ou encore le seuillage.</p> - -<p>Les calculs sont effectués sur les valeurs de couleur non prémultipliées. Chaque canal de couleur est modifié en utilisant le résultat des éléments {{SVGElement("feFuncR")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, et {{SVGElement("feFuncA")}} placés à l'intérieur de la balise.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("in")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFEComponentTransferElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<h3 id="SVG">SVG</h3> - -<pre class="brush: html; highlight[12-17,20-24,27-31,34-38]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> - <defs> - <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"> - <stop offset="0" stop-color="#ff0000"></stop> - <stop offset="0.2" stop-color="#ffff00"></stop> - <stop offset="0.4" stop-color="#00ff00"></stop> - <stop offset="0.6" stop-color="#00ffff"></stop> - <stop offset="0.8" stop-color="#0000ff"></stop> - <stop offset="1" stop-color="#800080"></stop> - </linearGradient> - <filter id="identity" x="0" y="0" width="100%" height="100%"> - <feComponentTransfer> - <feFuncR type="identity"></feFuncR> - <feFuncG type="identity"></feFuncG> - <feFuncB type="identity"></feFuncB> - <feFuncA type="identity"></feFuncA> - </feComponentTransfer> - </filter> - <filter id="table" x="0" y="0" width="100%" height="100%"> - <feComponentTransfer> - <feFuncR type="table" tableValues="0 0 1 1"></feFuncR> - <feFuncG type="table" tableValues="1 1 0 0"></feFuncG> - <feFuncB type="table" tableValues="0 1 1 0"></feFuncB> - </feComponentTransfer> - </filter> - <filter id="linear" x="0" y="0" width="100%" height="100%"> - <feComponentTransfer> - <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR> - <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG> - <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB> - </feComponentTransfer> - </filter> - <filter id="gamma" x="0" y="0" width="100%" height="100%"> - <feComponentTransfer> - <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR> - <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG> - <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB> - </feComponentTransfer> - </filter> - </defs> - - <g font-weight="bold"> - <text x="0" y="5%">Default</text> - <rect x="0" y="8%" width="100%" height="20"></rect> - <text x="0" y="26%">Identity</text> - <rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect> - <text x="0" y="47%">Table lookup</text> - <rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect> - <text x="0" y="68%">Linear function</text> - <rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect> - <text x="0" y="89%">Gamma function</text> - <rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect> - </g> -</svg></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">rect { +{{SVGRef}} + +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feComponentTransfer>`** permet d'effectuer un remappage des composantes de couleur (rouge, bleu, vert et alpha) de chaque pixel. Cela permet notamment de régler la luminosité, le constraste, la balance des couleurs ou encore le seuillage. + +Les calculs sont effectués sur les valeurs de couleur non prémultipliées. Chaque canal de couleur est modifié en utilisant le résultat des éléments {{SVGElement("feFuncR")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, et {{SVGElement("feFuncA")}} placés à l'intérieur de la balise. + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} + +### Attributs spécifiques + +- {{SVGAttr("in")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFEComponentTransferElement")}}. + +## Exemple + +### SVG + +```html +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> + <defs> + <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"> + <stop offset="0" stop-color="#ff0000"></stop> + <stop offset="0.2" stop-color="#ffff00"></stop> + <stop offset="0.4" stop-color="#00ff00"></stop> + <stop offset="0.6" stop-color="#00ffff"></stop> + <stop offset="0.8" stop-color="#0000ff"></stop> + <stop offset="1" stop-color="#800080"></stop> + </linearGradient> + <filter id="identity" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="identity"></feFuncR> + <feFuncG type="identity"></feFuncG> + <feFuncB type="identity"></feFuncB> + <feFuncA type="identity"></feFuncA> + </feComponentTransfer> + </filter> + <filter id="table" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 0 1 1"></feFuncR> + <feFuncG type="table" tableValues="1 1 0 0"></feFuncG> + <feFuncB type="table" tableValues="0 1 1 0"></feFuncB> + </feComponentTransfer> + </filter> + <filter id="linear" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR> + <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG> + <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB> + </feComponentTransfer> + </filter> + <filter id="gamma" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR> + <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG> + <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB> + </feComponentTransfer> + </filter> + </defs> + + <g font-weight="bold"> + <text x="0" y="5%">Default</text> + <rect x="0" y="8%" width="100%" height="20"></rect> + <text x="0" y="26%">Identity</text> + <rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect> + <text x="0" y="47%">Table lookup</text> + <rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect> + <text x="0" y="68%">Linear function</text> + <rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect> + <text x="0" y="89%">Gamma function</text> + <rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect> + </g> +</svg> +``` + +### CSS + +```css +rect { fill: url(#rainbow); -}</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", "100%", 340)}}</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('Filters 1.0', '#feComponentTransferElement', '<feComponentTransfer>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour {{SVGAttr("type")}} <code>identity</code>.</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feComponentTransferElement', '<feComponentTransfer>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feComponentTransfer")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feFuncA")}}</li> - <li>{{SVGElement("feFuncB")}}</li> - <li>{{SVGElement("feFuncG")}}</li> - <li>{{SVGElement("feFuncR")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li> -</ul> +} +``` + +### Résultat + +{{EmbedLiveSample("Exemple", "100%", 340)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| {{SpecName('Filters 1.0', '#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('Filters 1.0')}} | Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour {{SVGAttr("type")}} `identity`. | +| {{SpecName('SVG1.1', 'filters.html#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feComponentTransfer")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feFuncA")}} +- {{SVGElement("feFuncB")}} +- {{SVGElement("feFuncG")}} +- {{SVGElement("feFuncR")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres "en/SVG/Tutorial/Filter_effects") diff --git a/files/fr/web/svg/element/fecomposite/index.md b/files/fr/web/svg/element/fecomposite/index.md index 096b79e038..637ccdbf28 100644 --- a/files/fr/web/svg/element/fecomposite/index.md +++ b/files/fr/web/svg/element/fecomposite/index.md @@ -7,280 +7,255 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feComposite --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feComposite></code></strong> effectue la combinaison de deux images en entrée, pixel par pixel, en utilisant une des opérations de composition de Porter-Duff: <code>over</code><em>, </em><code>in</code><em>, </em><code>atop</code><em>, </em><code>out</code><em>, </em><code>xor</code>, et <code>lighter</code>. Il est également possible d'appliquer une opération de type <code>arithmetic</code> (avec un résultat borné entre [0..1]).</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feComposite>`** effectue la combinaison de deux images en entrée, pixel par pixel, en utilisant une des opérations de composition de Porter-Duff: `over`_,_ `in`_,_ `atop`_,_ `out`_,_ `xor`, et `lighter`. Il est également possible d'appliquer une opération de type `arithmetic` (avec un résultat borné entre \[0..1]). -<p>L'opération <code>arithmetic</code> est utile pour combiner le résultat de {{SVGElement("feDiffuseLighting")}} et {{SVGElement("feSpecularLighting")}} avec des textures. Si l'opération <code>arithmetic</code> est choisie, chaque pixel est calculé à l'aide de la formule suivante:</p> +L'opération `arithmetic` est utile pour combiner le résultat de {{SVGElement("feDiffuseLighting")}} et {{SVGElement("feSpecularLighting")}} avec des textures. Si l'opération `arithmetic` est choisie, chaque pixel est calculé à l'aide de la formule suivante: -<pre class="brush: plain">result = k1*i1*i2 + k2*i1 + k3*i2 + k4 -</pre> +```plain +result = k1*i1*i2 + k2*i1 + k3*i2 + k4 +``` -<p>où</p> +où -<ul> - <li><code>i1</code> et <code>i2</code> indiquent les valeurs des pixels correspondant aux images en entrée, {{SVGAttr("in")}} et {{SVGAttr("in2")}} respectivement</li> - <li><code>k1, k2, k3</code> et <code>k4</code> indiquent les valeurs des attributs du même nom</li> -</ul> +- `i1` et `i2` indiquent les valeurs des pixels correspondant aux images en entrée, {{SVGAttr("in")}} et {{SVGAttr("in2")}} respectivement +- `k1, k2, k3` et `k4` indiquent les valeurs des attributs du même nom -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Presentation_attributes">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Presentation_attributes) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("in2")}}</li> - <li>{{SVGAttr("operator")}}</li> - <li>{{SVGAttr("k1")}}</li> - <li>{{SVGAttr("k2")}}</li> - <li>{{SVGAttr("k3")}}</li> - <li>{{SVGAttr("k4")}}</li> -</ul> +- {{SVGAttr("in")}} +- {{SVGAttr("in2")}} +- {{SVGAttr("operator")}} +- {{SVGAttr("k1")}} +- {{SVGAttr("k2")}} +- {{SVGAttr("k3")}} +- {{SVGAttr("k4")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFECompositeElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFECompositeElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre><svg width="330" height="195" viewBox="0 0 1100 650" version="1.1" - xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <title>Example feComposite - Examples of feComposite operations</title> - <desc>Four rows of six pairs of overlapping triangles depicting - the six different feComposite operators under different - opacity values and different clearing of the background.</desc> - <defs> - <desc>Define two sets of six filters for each of the six compositing operators. - The first set wipes out the background image by flooding with opaque white. - The second set does not wipe out the background, with the result - that the background sometimes shines through and is other cases - is blended into itself (i.e., "double-counting").</desc> - <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/> - <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> - </filter> - <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/> - <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> - </filter> - <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/> - <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> - </filter> - <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/> - <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> - </filter> - <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/> - <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> - </filter> - <filter id="arithmeticFlood" filterUnits="objectBoundingBox" - x="-5%" y="-5%" width="110%" height="110%"> - <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> - <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp" - operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> - <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> - </filter> - <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/> - </filter> - <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/> - </filter> - <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/> - </filter> - <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/> - </filter> - <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> - <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/> - </filter> - <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox" - x="-5%" y="-5%" width="110%" height="110%"> - <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp" - operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> - </filter> - <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" /> - <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" /> - <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" /> - <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" /> - <g id="TwoBlueTriangles"> - <use xlink:href="#Blue100"/> - <use xlink:href="#Blue50"/> - </g> - <g id="BlueTriangles"> - <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/> - <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/> - <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/> - <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/> - <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/> - <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/> - </g> - </defs> + <svg width="330" height="195" viewBox="0 0 1100 650" version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Example feComposite - Examples of feComposite operations</title> + <desc>Four rows of six pairs of overlapping triangles depicting + the six different feComposite operators under different + opacity values and different clearing of the background.</desc> + <defs> + <desc>Define two sets of six filters for each of the six compositing operators. + The first set wipes out the background image by flooding with opaque white. + The second set does not wipe out the background, with the result + that the background sometimes shines through and is other cases + is blended into itself (i.e., "double-counting").</desc> + <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/> + <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> + </filter> + <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/> + <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> + </filter> + <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/> + <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> + </filter> + <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/> + <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> + </filter> + <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/> + <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> + </filter> + <filter id="arithmeticFlood" filterUnits="objectBoundingBox" + x="-5%" y="-5%" width="110%" height="110%"> + <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> + <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp" + operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> + <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> + </filter> + <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/> + </filter> + <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/> + </filter> + <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/> + </filter> + <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/> + </filter> + <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> + <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/> + </filter> + <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox" + x="-5%" y="-5%" width="110%" height="110%"> + <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp" + operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> + </filter> + <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" /> + <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" /> + <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" /> + <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" /> + <g id="TwoBlueTriangles"> + <use xlink:href="#Blue100"/> + <use xlink:href="#Blue50"/> + </g> + <g id="BlueTriangles"> + <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/> + <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/> + <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/> + <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/> + <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/> + <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/> + </g> + </defs> - <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> - <g font-family="Verdana" font-size="40" shape-rendering="crispEdges"> - <desc>Render the examples using the filters that draw on top of - an opaque white surface, thus obliterating the background.</desc> - <g enable-background="new"> - <text x="15" y="75">opacity 1.0</text> - <text x="15" y="115" font-size="27">(with feFlood)</text> - <text x="15" y="200">opacity 0.5</text> - <text x="15" y="240" font-size="27">(with feFlood)</text> - <use xlink:href="#BlueTriangles"/> - <g transform="translate(275,25)"> - <use xlink:href="#Red100" filter="url(#overFlood)" /> - <use xlink:href="#Red50" filter="url(#overFlood)" /> - <text x="5" y="275">over</text> - </g> - <g transform="translate(400,25)"> - <use xlink:href="#Red100" filter="url(#inFlood)" /> - <use xlink:href="#Red50" filter="url(#inFlood)" /> - <text x="35" y="275">in</text> - </g> - <g transform="translate(525,25)"> - <use xlink:href="#Red100" filter="url(#outFlood)" /> - <use xlink:href="#Red50" filter="url(#outFlood)" /> - <text x="15" y="275">out</text> - </g> - <g transform="translate(650,25)"> - <use xlink:href="#Red100" filter="url(#atopFlood)" /> - <use xlink:href="#Red50" filter="url(#atopFlood)" /> - <text x="10" y="275">atop</text> - </g> - <g transform="translate(775,25)"> - <use xlink:href="#Red100" filter="url(#xorFlood)" /> - <use xlink:href="#Red50" filter="url(#xorFlood)" /> - <text x="15" y="275">xor</text> - </g> - <g transform="translate(900,25)"> - <use xlink:href="#Red100" filter="url(#arithmeticFlood)" /> - <use xlink:href="#Red50" filter="url(#arithmeticFlood)" /> - <text x="-25" y="275">arithmetic</text> - </g> - </g> - <g transform="translate(0,325)" enable-background="new"> - <desc>Render the examples using the filters that do not obliterate - the background, thus sometimes causing the background to continue - to appear in some cases, and in other cases the background - image blends into itself ("double-counting").</desc> - <text x="15" y="75">opacity 1.0</text> - <text x="15" y="115" font-size="27">(without feFlood)</text> - <text x="15" y="200">opacity 0.5</text> - <text x="15" y="240" font-size="27">(without feFlood)</text> - <use xlink:href="#BlueTriangles"/> - <g transform="translate(275,25)"> - <use xlink:href="#Red100" filter="url(#overNoFlood)" /> - <use xlink:href="#Red50" filter="url(#overNoFlood)" /> - <text x="5" y="275">over</text> - </g> - <g transform="translate(400,25)"> - <use xlink:href="#Red100" filter="url(#inNoFlood)" /> - <use xlink:href="#Red50" filter="url(#inNoFlood)" /> - <text x="35" y="275">in</text> - </g> - <g transform="translate(525,25)"> - <use xlink:href="#Red100" filter="url(#outNoFlood)" /> - <use xlink:href="#Red50" filter="url(#outNoFlood)" /> - <text x="15" y="275">out</text> - </g> - <g transform="translate(650,25)"> - <use xlink:href="#Red100" filter="url(#atopNoFlood)" /> - <use xlink:href="#Red50" filter="url(#atopNoFlood)" /> - <text x="10" y="275">atop</text> - </g> - <g transform="translate(775,25)"> - <use xlink:href="#Red100" filter="url(#xorNoFlood)" /> - <use xlink:href="#Red50" filter="url(#xorNoFlood)" /> - <text x="15" y="275">xor</text> - </g> - <g transform="translate(900,25)"> - <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" /> - <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" /> - <text x="-25" y="275">arithmetic</text> - </g> - </g> - </g> -</svg> -</pre> + <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> + <g font-family="Verdana" font-size="40" shape-rendering="crispEdges"> + <desc>Render the examples using the filters that draw on top of + an opaque white surface, thus obliterating the background.</desc> + <g enable-background="new"> + <text x="15" y="75">opacity 1.0</text> + <text x="15" y="115" font-size="27">(with feFlood)</text> + <text x="15" y="200">opacity 0.5</text> + <text x="15" y="240" font-size="27">(with feFlood)</text> + <use xlink:href="#BlueTriangles"/> + <g transform="translate(275,25)"> + <use xlink:href="#Red100" filter="url(#overFlood)" /> + <use xlink:href="#Red50" filter="url(#overFlood)" /> + <text x="5" y="275">over</text> + </g> + <g transform="translate(400,25)"> + <use xlink:href="#Red100" filter="url(#inFlood)" /> + <use xlink:href="#Red50" filter="url(#inFlood)" /> + <text x="35" y="275">in</text> + </g> + <g transform="translate(525,25)"> + <use xlink:href="#Red100" filter="url(#outFlood)" /> + <use xlink:href="#Red50" filter="url(#outFlood)" /> + <text x="15" y="275">out</text> + </g> + <g transform="translate(650,25)"> + <use xlink:href="#Red100" filter="url(#atopFlood)" /> + <use xlink:href="#Red50" filter="url(#atopFlood)" /> + <text x="10" y="275">atop</text> + </g> + <g transform="translate(775,25)"> + <use xlink:href="#Red100" filter="url(#xorFlood)" /> + <use xlink:href="#Red50" filter="url(#xorFlood)" /> + <text x="15" y="275">xor</text> + </g> + <g transform="translate(900,25)"> + <use xlink:href="#Red100" filter="url(#arithmeticFlood)" /> + <use xlink:href="#Red50" filter="url(#arithmeticFlood)" /> + <text x="-25" y="275">arithmetic</text> + </g> + </g> + <g transform="translate(0,325)" enable-background="new"> + <desc>Render the examples using the filters that do not obliterate + the background, thus sometimes causing the background to continue + to appear in some cases, and in other cases the background + image blends into itself ("double-counting").</desc> + <text x="15" y="75">opacity 1.0</text> + <text x="15" y="115" font-size="27">(without feFlood)</text> + <text x="15" y="200">opacity 0.5</text> + <text x="15" y="240" font-size="27">(without feFlood)</text> + <use xlink:href="#BlueTriangles"/> + <g transform="translate(275,25)"> + <use xlink:href="#Red100" filter="url(#overNoFlood)" /> + <use xlink:href="#Red50" filter="url(#overNoFlood)" /> + <text x="5" y="275">over</text> + </g> + <g transform="translate(400,25)"> + <use xlink:href="#Red100" filter="url(#inNoFlood)" /> + <use xlink:href="#Red50" filter="url(#inNoFlood)" /> + <text x="35" y="275">in</text> + </g> + <g transform="translate(525,25)"> + <use xlink:href="#Red100" filter="url(#outNoFlood)" /> + <use xlink:href="#Red50" filter="url(#outNoFlood)" /> + <text x="15" y="275">out</text> + </g> + <g transform="translate(650,25)"> + <use xlink:href="#Red100" filter="url(#atopNoFlood)" /> + <use xlink:href="#Red50" filter="url(#atopNoFlood)" /> + <text x="10" y="275">atop</text> + </g> + <g transform="translate(775,25)"> + <use xlink:href="#Red100" filter="url(#xorNoFlood)" /> + <use xlink:href="#Red50" filter="url(#xorNoFlood)" /> + <text x="15" y="275">xor</text> + </g> + <g transform="translate(900,25)"> + <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" /> + <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" /> + <text x="-25" y="275">arithmetic</text> + </g> + </g> + </g> + </svg> -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>Cette image affine le résultat désiré.</p> +Cette image affine le résultat désiré. -<p><img alt="Example feComposite — Examples of feComposite operations" src="https://www.w3.org/TR/SVG11/images/filters/feComposite.png"></p> + -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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('Filters 1.0', '#feCompositeElement', '<feComposite>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Ajoute la valeur <code>lighter</code> pour l'attribut <code>operator</code>.</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feCompositeElement', '<feComposite>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------ | +| {{SpecName('Filters 1.0', '#feCompositeElement', '<feComposite>')}} | {{Spec2('Filters 1.0')}} | Ajoute la valeur `lighter` pour l'attribut `operator`. | +| {{SpecName('SVG1.1', 'filters.html#feCompositeElement', '<feComposite>')}} | {{Spec2('SVG1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.feComposite")}}</p> +{{Compat("svg.elements.feComposite")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li> -</ul> +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres "en/SVG/Tutorial/Filter_effects") diff --git a/files/fr/web/svg/element/feconvolvematrix/index.md b/files/fr/web/svg/element/feconvolvematrix/index.md index 21e05a3104..f2845a66d0 100644 --- a/files/fr/web/svg/element/feconvolvematrix/index.md +++ b/files/fr/web/svg/element/feconvolvematrix/index.md @@ -7,161 +7,136 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feConvolveMatrix --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feConvolveMatrix></code></strong> applique une matrice de convolution d'effet de filtre. Une convolution combine les pixels de l'image en entrée avec ceux voisins pour donner une image résultante. On peut obtenir une grande variété d'opérations d'imagerie à l'aide de convolutions, dont le flou, la détection de bord, la netteté, l'estampage et le chanfreinage.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feConvolveMatrix>`** applique une matrice de convolution d'effet de filtre. Une convolution combine les pixels de l'image en entrée avec ceux voisins pour donner une image résultante. On peut obtenir une grande variété d'opérations d'imagerie à l'aide de convolutions, dont le flou, la détection de bord, la netteté, l'estampage et le chanfreinage. -<p>Une convolution de matrice se fonde sur une matrice n par m (le noyau de convolution), qui décrit la façon dont une valeur de pixel donné de l'image en entrée est combinée avec celles des pixels de son voisinage pour aboutir à une valeur de pixel résultante. Chaque pixel du résultat est déterminé par l'application de la matrice noyau sur le pixel source correspondant et ses pixels voisins. La formule de convolution de base, appliquée à chaque valeur de couleur d'un pixel donné, est :</p> +Une convolution de matrice se fonde sur une matrice n par m (le noyau de convolution), qui décrit la façon dont une valeur de pixel donné de l'image en entrée est combinée avec celles des pixels de son voisinage pour aboutir à une valeur de pixel résultante. Chaque pixel du résultat est déterminé par l'application de la matrice noyau sur le pixel source correspondant et ses pixels voisins. La formule de convolution de base, appliquée à chaque valeur de couleur d'un pixel donné, est : -<p>COLOR<sub>X,Y</sub> = ( <br> - SUM <sub>I=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { <br> - SUM <sub>J=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { <br> - SOURCE <sub>X-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> * <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute">kernelMatrix</a><sub><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1, <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> <br> - } <br> - } <br> - ) / <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementDivisorAttribute">divisor</a> + <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementBiasAttribute">bias</a> * ALPHA<sub>X,Y</sub> </p> +COLOR<sub>X,Y</sub> = ( + SUM <sub>I=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { + SUM <sub>J=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { + SOURCE <sub>X-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> \* [kernelMatrix](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute)<sub><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1, <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> + } + } + ) / [divisor](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementDivisorAttribute) + [bias](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementBiasAttribute) \* ALPHA<sub>X,Y</sub> -<p>dans laquelle</p> +dans laquelle -<ul> - <li>"orderX" et "orderY" représentent les valeurs X et Y pour l'attribut {{SVGAttr("order")}},</li> - <li>"targetX" représente la valeur de l'attribut {{SVGAttr("targetX")}},</li> - <li>"targetY" la valeur de l'attribut {{SVGAttr("targetY")}},</li> - <li>"kernelMatrix" celle de l'attribut {{SVGAttr("kernelMatrix")}},</li> - <li>"divisor" celle de l'attribut {{SVGAttr("divisor")}}</li> - <li>et "bias" la valeur de l'attribut {{SVGAttr("bias")}}.</li> -</ul> +- "orderX" et "orderY" représentent les valeurs X et Y pour l'attribut {{SVGAttr("order")}}, +- "targetX" représente la valeur de l'attribut {{SVGAttr("targetX")}}, +- "targetY" la valeur de l'attribut {{SVGAttr("targetY")}}, +- "kernelMatrix" celle de l'attribut {{SVGAttr("kernelMatrix")}}, +- "divisor" celle de l'attribut {{SVGAttr("divisor")}} +- et "bias" la valeur de l'attribut {{SVGAttr("bias")}}. -<p>Remarquez dans la formule ci-dessus que les valeurs de la matrice noyau sont appliquées de telle manière que cette matrice noyau soit tournée de 180 degrés par rapport aux images de source et de destination, pour correspondre avec la théorie de la convolution telle qu'elle est décrite dans de nombreux ouvrages sur l'infographie.</p> +Remarquez dans la formule ci-dessus que les valeurs de la matrice noyau sont appliquées de telle manière que cette matrice noyau soit tournée de 180 degrés par rapport aux images de source et de destination, pour correspondre avec la théorie de la convolution telle qu'elle est décrite dans de nombreux ouvrages sur l'infographie. -<p>Pour illustrer, supposons que l'on ait une image en entrée, de 5x5 pixels, dont les valeurs de couleur pour l'un des canaux de couleur sont les suivantes:</p> +Pour illustrer, supposons que l'on ait une image en entrée, de 5x5 pixels, dont les valeurs de couleur pour l'un des canaux de couleur sont les suivantes: -<pre>0 20 40 235 235 -100 120 140 235 235 -200 220 240 235 235 -225 225 255 255 255 -225 225 255 255 255 -</pre> + 0 20 40 235 235 + 100 120 140 235 235 + 200 220 240 235 235 + 225 225 255 255 255 + 225 225 255 255 255 -<p>et que l'on définit un noyau de convolution de 3x3 comme ceci:</p> +et que l'on définit un noyau de convolution de 3x3 comme ceci: -<pre>1 2 3 -4 5 6 -7 8 9 -</pre> + 1 2 3 + 4 5 6 + 7 8 9 -<p>Concentrons-nous sur la valeur de couleur de la deuxième ligne, deuxième colonne (la valeur du pixel source est 120). En supposant le cas le plus simple (quand le quadrillage de pixels de l'image source s'aligne parfaitement avec celui du noyau) et en supposant les valeurs par défaut des attributs <code>divisor</code>, <code>targetX</code> et <code>targetY</code>, alors la valeur de couleur résultante sera :</p> +Concentrons-nous sur la valeur de couleur de la deuxième ligne, deuxième colonne (la valeur du pixel source est 120). En supposant le cas le plus simple (quand le quadrillage de pixels de l'image source s'aligne parfaitement avec celui du noyau) et en supposant les valeurs par défaut des attributs `divisor`, `targetX` et `targetY`, alors la valeur de couleur résultante sera : -<pre>(9* 0 + 8* 20 + 7* 40 + - 6*100 + 5*120 + 4*140 + - 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)</pre> + (9* 0 + 8* 20 + 7* 40 + + 6*100 + 5*120 + 4*140 + + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1) -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("order")}}</li> - <li>{{SVGAttr("kernelMatrix")}}</li> - <li>{{SVGAttr("divisor")}}</li> - <li>{{SVGAttr("bias")}}</li> - <li>{{SVGAttr("targetX")}}</li> - <li>{{SVGAttr("targetY")}}</li> - <li>{{SVGAttr("edgeMode")}}</li> - <li>{{SVGAttr("kernelUnitLength")}}</li> - <li>{{SVGAttr("preserveAlpha")}}</li> -</ul> +- {{SVGAttr("in")}} +- {{SVGAttr("order")}} +- {{SVGAttr("kernelMatrix")}} +- {{SVGAttr("divisor")}} +- {{SVGAttr("bias")}} +- {{SVGAttr("targetX")}} +- {{SVGAttr("targetY")}} +- {{SVGAttr("edgeMode")}} +- {{SVGAttr("kernelUnitLength")}} +- {{SVGAttr("preserveAlpha")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEConvolveMatrixElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEConvolveMatrixElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="emboss"> - <feConvolveMatrix +```html +<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="emboss"> + <feConvolveMatrix kernelMatrix="3 0 0 0 0 0 - 0 0 -3"/> - </filter> - </defs> - - <image xlink:href="/files/12668/MDN.svg" x="0" y="0" - height="200" width="200" style="filter:url(#emboss);" /> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 200, 210)}}</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("Filters 1.0", "#feConvolveMatrixElement", "<feConvolveMatrix>")}}</td> - <td>{{Spec2("Filters 1.0")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feConvolveMatrixElement", "<feConvolveMatrix>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feConvolveMatrix")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> + 0 0 -3"/> + </filter> + </defs> + + <image xlink:href="/files/12668/MDN.svg" x="0" y="0" + height="200" width="200" style="filter:url(#emboss);" /> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 200, 210)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Filters 1.0", "#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("Filters 1.0")}} | | +| {{SpecName("SVG1.1", "filters.html#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feConvolveMatrix")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fediffuselighting/index.md b/files/fr/web/svg/element/fediffuselighting/index.md index c53a5f6d4c..2b755fd5f3 100644 --- a/files/fr/web/svg/element/fediffuselighting/index.md +++ b/files/fr/web/svg/element/fediffuselighting/index.md @@ -7,155 +7,134 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feDiffuseLighting --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feDiffuseLighting></code></strong> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante, qui est une image RGBA opaque, dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feDiffuseLighting>`** éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante, qui est une image RGBA opaque, dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée. -<p>La lumière crée par cette primitive de filtre peut être combinée avec une image de texture à l'aide de l'opérateur <code>arithmetic</code> de la primitive de filtre {{SVGElement("feComposite")}}. De multiples sources lumineuses peuvent être simulées en ajoutant plusieurs éléments à la texture.</p> +La lumière crée par cette primitive de filtre peut être combinée avec une image de texture à l'aide de l'opérateur `arithmetic` de la primitive de filtre {{SVGElement("feComposite")}}. De multiples sources lumineuses peuvent être simulées en ajoutant plusieurs éléments à la texture. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("surfaceScale")}}</li> - <li>{{SVGAttr("diffuseConstant")}}</li> - <li>{{SVGAttr("kernelUnitLength")}}</li> -</ul> +- {{SVGAttr("in")}} +- {{SVGAttr("surfaceScale")}} +- {{SVGAttr("diffuseConstant")}} +- {{SVGAttr("kernelUnitLength")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEDiffuseLightingElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEDiffuseLightingElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>L'exemple suivant montre l'effet de l'élément <code><feDiffuseLighting></code> sur un cercle avec chaque type de lumière disponible. À chaque fois, la lumière vient du coin supérieur gauche.</p> +L'exemple suivant montre l'effet de l'élément `<feDiffuseLighting>` sur un cercle avec chaque type de lumière disponible. À chaque fois, la lumière vient du coin supérieur gauche. -<pre class="brush: html; highlight[10-13,25-28,40-44]"><svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> - - <!-- Aucune lumière n'est appliquée --> - <text text-anchor="middle" x="60" y="22">No Light</text> - <circle cx="60" cy="80" r="50" fill="green" /> - - <!-- La source lumineuse est un élément fePointLight --> - <text text-anchor="middle" x="170" y="22">fePointLight</text> - <filter id="lightMe1"> - <feDiffuseLighting in="SourceGraphic" result="light" - lighting-color="white"> - <fePointLight x="150" y="60" z="20" /> - </feDiffuseLighting> - - <feComposite in="SourceGraphic" in2="light" - operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> - </filter> - - <circle cx="170" cy="80" r="50" fill="green" - filter="url(#lightMe1)" /> - - <!-- La source lumineuse est un élément feDistantLight --> - <text text-anchor="middle" x="280" y="22">feDistantLight</text> - <filter id="lightMe2"> - <feDiffuseLighting in="SourceGraphic" result="light" - lighting-color="white"> - <feDistantLight azimuth="240" elevation="20"/> - </feDiffuseLighting> - - <feComposite in="SourceGraphic" in2="light" - operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> - </filter> - - <circle cx="280" cy="80" r="50" fill="green" - filter="url(#lightMe2)" /> - - <!-- La source lumineuse est un élément feSpotLight --> - <text text-anchor="middle" x="390" y="22">feSpotLight</text> - <filter id="lightMe3"> - <feDiffuseLighting in="SourceGraphic" result="light" - lighting-color="white"> - <feSpotLight x="360" y="5" z="30" limitingConeAngle="20" - pointsAtX="390" pointsAtY="80" pointsAtZ="0"/> - </feDiffuseLighting> - - <feComposite in="SourceGraphic" in2="light" - operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> - </filter> - - <circle cx="390" cy="80" r="50" fill="green" - filter="url(#lightMe3)" /> -</svg></pre> - -<p>Résultat attendu:</p> - -<p><img alt="Expected rendering for the example" src="/files/4447/feDiffuseLighting.png"></p> - -<p>Rendu en direct:</p> - -<p>{{EmbedLiveSample("Exemple", 470, 170)}}</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('Filters 1.0', '#feDiffuseLightingElement', '<feDiffuseLighting>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Déprécie l'attribut <code>kernelUnitLength</code></td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feDiffuseLightingElement', '<feDiffuseLighting>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feDiffuseLighting")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feDistantLight")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("fePointLight")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feSpotLight")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +```html +<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> + + <!-- Aucune lumière n'est appliquée --> + <text text-anchor="middle" x="60" y="22">No Light</text> + <circle cx="60" cy="80" r="50" fill="green" /> + + <!-- La source lumineuse est un élément fePointLight --> + <text text-anchor="middle" x="170" y="22">fePointLight</text> + <filter id="lightMe1"> + <feDiffuseLighting in="SourceGraphic" result="light" + lighting-color="white"> + <fePointLight x="150" y="60" z="20" /> + </feDiffuseLighting> + + <feComposite in="SourceGraphic" in2="light" + operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + + <circle cx="170" cy="80" r="50" fill="green" + filter="url(#lightMe1)" /> + + <!-- La source lumineuse est un élément feDistantLight --> + <text text-anchor="middle" x="280" y="22">feDistantLight</text> + <filter id="lightMe2"> + <feDiffuseLighting in="SourceGraphic" result="light" + lighting-color="white"> + <feDistantLight azimuth="240" elevation="20"/> + </feDiffuseLighting> + + <feComposite in="SourceGraphic" in2="light" + operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + + <circle cx="280" cy="80" r="50" fill="green" + filter="url(#lightMe2)" /> + + <!-- La source lumineuse est un élément feSpotLight --> + <text text-anchor="middle" x="390" y="22">feSpotLight</text> + <filter id="lightMe3"> + <feDiffuseLighting in="SourceGraphic" result="light" + lighting-color="white"> + <feSpotLight x="360" y="5" z="30" limitingConeAngle="20" + pointsAtX="390" pointsAtY="80" pointsAtZ="0"/> + </feDiffuseLighting> + + <feComposite in="SourceGraphic" in2="light" + operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + + <circle cx="390" cy="80" r="50" fill="green" + filter="url(#lightMe3)" /> +</svg> +``` + +Résultat attendu: + + + +Rendu en direct: + +{{EmbedLiveSample("Exemple", 470, 170)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------- | +| {{SpecName('Filters 1.0', '#feDiffuseLightingElement', '<feDiffuseLighting>')}} | {{Spec2('Filters 1.0')}} | Déprécie l'attribut `kernelUnitLength` | +| {{SpecName('SVG1.1', 'filters.html#feDiffuseLightingElement', '<feDiffuseLighting>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feDiffuseLighting")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feDistantLight")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("fePointLight")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feSpotLight")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fedisplacementmap/index.md b/files/fr/web/svg/element/fedisplacementmap/index.md index 0376d57594..9db41aed6f 100644 --- a/files/fr/web/svg/element/fedisplacementmap/index.md +++ b/files/fr/web/svg/element/fedisplacementmap/index.md @@ -7,111 +7,90 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feDisplacementMap --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feDisplacementMap></code></strong> utilise les valeurs de pixel de l'image de {{SVGAttr("in2")}} pour déplacer spatialement l'image de {{SVGAttr("in")}}.</p> - -<p>La formule utilisée pour la transformation est comme suit:</p> - -<pre>P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))</pre> - -<p>où <code>P(x,y)</code> est l'image en entrée, {{SVGAttr("in")}}, et <code>P'(x,y)</code> est la destination. <code>XC(x,y)</code> et <code>YC(x,y)</code> sont les valeurs des composants du canal désigné par {{SVGAttr("xChannelSelector")}} et {{SVGAttr("yChannelSelector")}}.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("in2")}}</li> - <li>{{SVGAttr("scale")}}</li> - <li>{{SVGAttr("xChannelSelector")}}</li> - <li>{{SVGAttr("yChannelSelector")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFEDisplacementMapElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html; highlight[6-7]"><svg width="200" height="200" viewBox="0 0 220 220" - xmlns="http://www.w3.org/2000/svg"> - <filter id="displacementFilter"> - <feTurbulence type="turbulence" baseFrequency="0.05" - numOctaves="2" result="turbulence"/> - <feDisplacementMap in2="turbulence" in="SourceGraphic" - scale="50" xChannelSelector="R" yChannelSelector="G"/> - </filter> - - <circle cx="100" cy="100" r="100" - style="filter: url(#displacementFilter)"/> -</svg></pre> - -<p>{{EmbedLiveSample('Exemple', 220, 220)}}</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('Filters 1.0', '#feDisplacementMapElement', '<feDisplacementMap>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feDisplacementMapElement', '<feDisplacementMap>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feDisplacementMap")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +{{SVGRef}} + +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feDisplacementMap>`** utilise les valeurs de pixel de l'image de {{SVGAttr("in2")}} pour déplacer spatialement l'image de {{SVGAttr("in")}}. + +La formule utilisée pour la transformation est comme suit: + + P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5)) + +où `P(x,y)` est l'image en entrée, {{SVGAttr("in")}}, et `P'(x,y)` est la destination. `XC(x,y)` et `YC(x,y)` sont les valeurs des composants du canal désigné par {{SVGAttr("xChannelSelector")}} et {{SVGAttr("yChannelSelector")}}. + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} + +### Attributs spécifiques + +- {{SVGAttr("in")}} +- {{SVGAttr("in2")}} +- {{SVGAttr("scale")}} +- {{SVGAttr("xChannelSelector")}} +- {{SVGAttr("yChannelSelector")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFEDisplacementMapElement")}}. + +## Exemple + +```html +<svg width="200" height="200" viewBox="0 0 220 220" + xmlns="http://www.w3.org/2000/svg"> + <filter id="displacementFilter"> + <feTurbulence type="turbulence" baseFrequency="0.05" + numOctaves="2" result="turbulence"/> + <feDisplacementMap in2="turbulence" in="SourceGraphic" + scale="50" xChannelSelector="R" yChannelSelector="G"/> + </filter> + + <circle cx="100" cy="100" r="100" + style="filter: url(#displacementFilter)"/> +</svg> +``` + +{{EmbedLiveSample('Exemple', 220, 220)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#feDisplacementMapElement', '<feDisplacementMap>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#feDisplacementMapElement', '<feDisplacementMap>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feDisplacementMap")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fedistantlight/index.md b/files/fr/web/svg/element/fedistantlight/index.md index e4488358c4..a7abf61e7a 100644 --- a/files/fr/web/svg/element/fedistantlight/index.md +++ b/files/fr/web/svg/element/fedistantlight/index.md @@ -8,70 +8,47 @@ tags: - SVG Light Source translation_of: Web/SVG/Element/feDistantLight --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <strong><code><feDistantLight></code></strong> définit une source de lumière distante, que l'on place dans une primitive de filtre d'éclairage:{{SVGElement("feDiffuseLighting")}} ou {{SVGElement("feSpecularLighting")}}.</p> +La primitive de filtre **`<feDistantLight>`** définit une source de lumière distante, que l'on place dans une primitive de filtre d'éclairage:{{SVGElement("feDiffuseLighting")}} ou {{SVGElement("feSpecularLighting")}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("azimuth")}}</li> - <li>{{SVGAttr("elevation")}}</li> -</ul> +- {{SVGAttr("azimuth")}} +- {{SVGAttr("elevation")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEDistantLightElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEDistantLightElement")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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('Filters 1.0', '#feDistantLightElement', '<feDistantLight>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feDistantLightElement', '<feDistantLight>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#feDistantLightElement', '<feDistantLight>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#feDistantLightElement', '<feDistantLight>')}} | {{Spec2('SVG1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.feDistantLight")}}</p> +{{Compat("svg.elements.feDistantLight")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("fePointLight")}}</li> - <li>{{SVGElement("feSpotLight")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("fePointLight")}} +- {{SVGElement("feSpotLight")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fedropshadow/index.md b/files/fr/web/svg/element/fedropshadow/index.md index 391d58637e..93a56d534c 100644 --- a/files/fr/web/svg/element/fedropshadow/index.md +++ b/files/fr/web/svg/element/fedropshadow/index.md @@ -7,102 +7,86 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feDropShadow --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre <strong><code><feDropShadow></code></strong> crée une ombre portée pour l'image en entrée. Il s'agit d'un raccourci, le résultat du filtre <code><feDropShadow></code> revient à appliquer les primitives suivantes:</p> - -<pre class="brush: xml"><feGaussianBlur in="alpha-channel-of-feDropShadow-in" - stdDeviation="stdDeviation-of-feDropShadow"/> -<feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" - result="offsetblur"/> -<feFlood flood-color="flood-color-of-feDropShadow" - flood-opacity="flood-opacity-of-feDropShadow"/> -<feComposite in2="offsetblur" operator="in"/> -<feMerge> - <feMergeNode/> - <feMergeNode in="in-of-feDropShadow"/> -</feMerge> -</pre> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("stdDeviation")}}</li> - <li>{{SVGAttr("dx")}}</li> - <li>{{SVGAttr("dy")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFEDropShadowElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<h3 id="SVG">SVG</h3> - -<pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> - <defs> - <filter id="shadow"> - <feDropShadow dx="4" dy="8" stdDeviation="4"/> - </filter> - </defs> - - <circle cx="50%" cy="50%" r="80" - style="fill:blue; filter:url(#shadow);"/> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 200, 200)}}</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("Filters 1.0", "#feDropShadow", "<feDistantLight>")}}</td> - <td>{{Spec2("Filters 1.0")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feDropShadow")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +{{SVGRef}} + +La primitive de filtre **`<feDropShadow>`** crée une ombre portée pour l'image en entrée. Il s'agit d'un raccourci, le résultat du filtre `<feDropShadow>` revient à appliquer les primitives suivantes: + +```xml +<feGaussianBlur in="alpha-channel-of-feDropShadow-in" + stdDeviation="stdDeviation-of-feDropShadow"/> +<feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" + result="offsetblur"/> +<feFlood flood-color="flood-color-of-feDropShadow" + flood-opacity="flood-opacity-of-feDropShadow"/> +<feComposite in2="offsetblur" operator="in"/> +<feMerge> + <feMergeNode/> + <feMergeNode in="in-of-feDropShadow"/> +</feMerge> +``` + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) + +### Attributs spécifiques + +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("in")}} +- {{SVGAttr("stdDeviation")}} +- {{SVGAttr("dx")}} +- {{SVGAttr("dy")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFEDropShadowElement")}}. + +## Exemple + +### SVG + +```html +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="shadow"> + <feDropShadow dx="4" dy="8" stdDeviation="4"/> + </filter> + </defs> + + <circle cx="50%" cy="50%" r="80" + style="fill:blue; filter:url(#shadow);"/> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 200, 200)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Filters 1.0", "#feDropShadow", "<feDistantLight>")}} | {{Spec2("Filters 1.0")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feDropShadow")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feMerge")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/feflood/index.md b/files/fr/web/svg/element/feflood/index.md index b5f47f0e41..0a4e65aa08 100644 --- a/files/fr/web/svg/element/feflood/index.md +++ b/files/fr/web/svg/element/feflood/index.md @@ -6,103 +6,109 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feFlood --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre SVG <strong><code><feFlood></code></strong> remplit la région du filtre avec la couleur et l'opacité définies par {{SVGAttr("flood-color")}} et {{SVGAttr("flood-opacity")}}.</p> +La primitive de filtre SVG **`<feFlood>`** remplit la région du filtre avec la couleur et l'opacité définies par {{SVGAttr("flood-color")}} et {{SVGAttr("flood-opacity")}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitives de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("flood-color")}}</li> - <li>{{SVGAttr("flood-opacity")}}</li> -</ul> +- {{SVGAttr("flood-color")}} +- {{SVGAttr("flood-opacity")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEFloodElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEFloodElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> - <defs> - <filter id="floodFilter" filterUnits="userSpaceOnUse"> - <feFlood x="50" y="50" width="100" height="100" - flood-color="green" flood-opacity="0.5"/> - </filter> - </defs> +```html +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <defs> + <filter id="floodFilter" filterUnits="userSpaceOnUse"> + <feFlood x="50" y="50" width="100" height="100" + flood-color="green" flood-opacity="0.5"/> + </filter> + </defs> - <use style="filter: url(#floodFilter);"/> -</svg></pre> + <use style="filter: url(#floodFilter);"/> +</svg> +``` -<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p> +{{EmbedLiveSample("Exemple", 200, 200)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications <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('Filters 1.0', '#feFloodElement', '<feFlood>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td> - <p>Supprime la valeur <icccolor> de la propriété {{cssxref("flood-color")}} et définit que le canal alpha est multiplié par la valeur de la propriété {{cssxref("flood-opacity")}}. Clarifie la valeur de la propriété <code>flood-opacity</code>.</p> - </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feFloodElement', '<feFlood>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{SpecName('Filters 1.0', '#feFloodElement', '<feFlood>')}} + </td> + <td>{{Spec2('Filters 1.0')}}</td> + <td> + <p> + Supprime la valeur <icccolor> de la propriété + {{cssxref("flood-color")}} et définit que le canal alpha est + multiplié par la valeur de la propriété + {{cssxref("flood-opacity")}}. Clarifie la valeur de la + propriété <code>flood-opacity</code>. + </p> + </td> + </tr> + <tr> + <td> + {{SpecName('SVG1.1', 'filters.html#feFloodElement', '<feFlood>')}} + </td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feFlood")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("animateColor")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Les filtres</a></li> -</ul> +## Compatibilité des navigateurs + +{{Compat("svg.elements.feFlood")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("animateColor")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Les filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fefunca/index.md b/files/fr/web/svg/element/fefunca/index.md index 3dd5f8b995..d12ebacf3c 100644 --- a/files/fr/web/svg/element/fefunca/index.md +++ b/files/fr/web/svg/element/fefunca/index.md @@ -7,68 +7,47 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feFuncA --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <code><strong><feFuncA></strong></code> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal alpha (opacité) de l'image en entrée.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feFuncA>`** doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal alpha (opacité) de l'image en entrée. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</a></li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de fonction de transfert](/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert) -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<p><em>Aucun</em></p> +_Aucun_ -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEFuncAElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEFuncAElement")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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("Filters 1.0", "#feFuncAElement", "<feFuncA>")}}</td> - <td>{{Spec2("Filters 1.0")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feFuncAElement", "<feFuncA>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Filters 1.0", "#feFuncAElement", "<feFuncA>")}} | {{Spec2("Filters 1.0")}} | Aucun changement | +| {{SpecName("SVG1.1", "filters.html#feFuncAElement", "<feFuncA>")}} | {{Spec2("SVG1.1")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.feFuncA")}}</p> +{{Compat("svg.elements.feFuncA")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feFuncR")}}</li> - <li>{{SVGElement("feFuncB")}}</li> - <li>{{SVGElement("feFuncG")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feFuncR")}} +- {{SVGElement("feFuncB")}} +- {{SVGElement("feFuncG")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fefuncb/index.md b/files/fr/web/svg/element/fefuncb/index.md index 8878ca2355..4fb9f207b3 100644 --- a/files/fr/web/svg/element/fefuncb/index.md +++ b/files/fr/web/svg/element/fefuncb/index.md @@ -7,68 +7,47 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feFuncB --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feFuncB></code></strong> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal bleu de l'image en entrée.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feFuncB>`** doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal bleu de l'image en entrée. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</a></li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de fonction de transfert](/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert) -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<p><em>Aucun</em></p> +_Aucun_ -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEFuncBElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEFuncBElement")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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('Filters 1.0', '#feFuncBElement', '<feFuncB>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feFuncBElement', '<feFuncB>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#feFuncBElement', '<feFuncB>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#feFuncBElement', '<feFuncB>')}} | {{Spec2('SVG1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.feFuncB")}}</p> +{{Compat("svg.elements.feFuncB")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feFuncA")}}</li> - <li>{{SVGElement("feFuncR")}}</li> - <li>{{SVGElement("feFuncG")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feFuncA")}} +- {{SVGElement("feFuncR")}} +- {{SVGElement("feFuncG")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fefuncg/index.md b/files/fr/web/svg/element/fefuncg/index.md index 9daf12ed8c..f7942f731f 100644 --- a/files/fr/web/svg/element/fefuncg/index.md +++ b/files/fr/web/svg/element/fefuncg/index.md @@ -7,68 +7,47 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feFuncG --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feFuncG></code></strong> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal vert de l'image en entrée.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feFuncG>`** doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal vert de l'image en entrée. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</a></li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de fonction de transfert](/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert) -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<p><em>Aucun</em></p> +_Aucun_ -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEFuncGElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEFuncGElement")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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("Filters 1.0", "#feFuncGElement", "<feFuncG>")}}</td> - <td>{{Spec2("Filters 1.0")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feFuncGElement", "<feFuncG>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Filters 1.0", "#feFuncGElement", "<feFuncG>")}} | {{Spec2("Filters 1.0")}} | Aucun changement | +| {{SpecName("SVG1.1", "filters.html#feFuncGElement", "<feFuncG>")}} | {{Spec2("SVG1.1")}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.feFuncG")}}</p> +{{Compat("svg.elements.feFuncG")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feFuncA")}}</li> - <li>{{SVGElement("feFuncR")}}</li> - <li>{{SVGElement("feFuncB")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li> -</ul> +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feFuncA")}} +- {{SVGElement("feFuncR")}} +- {{SVGElement("feFuncB")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres "en/SVG/Tutorial/Filter_effects") diff --git a/files/fr/web/svg/element/fefuncr/index.md b/files/fr/web/svg/element/fefuncr/index.md index e606564ecd..eafaf507ee 100644 --- a/files/fr/web/svg/element/fefuncr/index.md +++ b/files/fr/web/svg/element/fefuncr/index.md @@ -7,68 +7,47 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feFuncR --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <code><strong><feFuncR></strong></code> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal rouge de l'image en entrée.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feFuncR>`** doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal rouge de l'image en entrée. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</a></li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de fonction de transfert](/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert) -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<p><em>Aucun</em></p> +_Aucun_ -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEFuncRElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEFuncRElement")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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('Filters 1.0', '#feFuncRElement', '<feFuncR>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feFuncRElement', '<feFuncR>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#feFuncRElement', '<feFuncR>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#feFuncRElement', '<feFuncR>')}} | {{Spec2('SVG1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.feFuncR")}}</p> +{{Compat("svg.elements.feFuncR")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feFuncA")}}</li> - <li>{{SVGElement("feFuncB")}}</li> - <li>{{SVGElement("feFuncG")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li> -</ul> +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feFuncA")}} +- {{SVGElement("feFuncB")}} +- {{SVGElement("feFuncG")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres "en/SVG/Tutorial/Filter_effects") diff --git a/files/fr/web/svg/element/fegaussianblur/index.md b/files/fr/web/svg/element/fegaussianblur/index.md index c2a9fdbe70..667c05bf62 100644 --- a/files/fr/web/svg/element/fegaussianblur/index.md +++ b/files/fr/web/svg/element/fegaussianblur/index.md @@ -3,133 +3,114 @@ title: <feGaussianBlur> slug: Web/SVG/Element/feGaussianBlur translation_of: Web/SVG/Element/feGaussianBlur --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feGaussianBlur></code></strong> applique un effet de flou à l'image en entrée. La quantité de flou est contrôlée par {{SVGAttr("stdDeviation")}}.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feGaussianBlur>`** applique un effet de flou à l'image en entrée. La quantité de flou est contrôlée par {{SVGAttr("stdDeviation")}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#attributs_de_primitives_de_filtre">Attributs de primitives de filtres</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#attributs_de_présentation) +- [Attributs de primitives de filtres](/fr/docs/Web/SVG/Attribute#attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("stdDeviation")}}</li> - <li>{{SVGAttr("edgeMode")}}</li> -</ul> +- {{SVGAttr("in")}} +- {{SVGAttr("stdDeviation")}} +- {{SVGAttr("edgeMode")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEGaussianBlurElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEGaussianBlurElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="Exemple_simple">Exemple simple</h3> +### Exemple simple -<h4 id="SVG">SVG</h4> +#### SVG -<pre class="brush: html"><svg width="230" height="120" +```html +<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> + xmlns:xlink="http://www.w3.org/1999/xlink"> - <filter id="blurMe"> - <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> - </filter> + <filter id="blurMe"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> + </filter> - <circle cx="60" cy="60" r="50" fill="green" /> + <circle cx="60" cy="60" r="50" fill="green" /> - <circle cx="170" cy="60" r="50" fill="green" - filter="url(#blurMe)" /> -</svg></pre> + <circle cx="170" cy="60" r="50" fill="green" + filter="url(#blurMe)" /> +</svg> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Exemple_simple",232,124)}}</p> +{{EmbedLiveSample("Exemple_simple",232,124)}} -<h3 id="Exemple_avec_une_ombre_portée">Exemple avec une ombre portée</h3> +### Exemple avec une ombre portée -<h4 id="SVG_2">SVG</h4> +#### SVG -<pre class="brush: html"><svg width="120" height="120" +```html +<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - - <filter id="dropShadow"> - <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> - <feOffset dx="2" dy="4" /> - <feMerge> - <feMergeNode /> - <feMergeNode in="SourceGraphic" /> - </feMerge> - </filter> - - <circle cx="60" cy="60" r="50" fill="green" - filter="url(#dropShadow)" /> -</svg></pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Exemple_avec_une_ombre_portée",125,124)}}</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('Filters 1.0', '#feGaussianBlurElement', '<feGaussianBlur>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Ajoute l'attribut {{SVGAttr("edgeMode")}}</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feGaussianBlurElement', '<feGaussianBlur>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feGaussianBlur")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li> -</ul> + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <filter id="dropShadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> + <feOffset dx="2" dy="4" /> + <feMerge> + <feMergeNode /> + <feMergeNode in="SourceGraphic" /> + </feMerge> + </filter> + + <circle cx="60" cy="60" r="50" fill="green" + filter="url(#dropShadow)" /> +</svg> +``` + +#### Résultat + +{{EmbedLiveSample("Exemple_avec_une_ombre_portée",125,124)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------- | +| {{SpecName('Filters 1.0', '#feGaussianBlurElement', '<feGaussianBlur>')}} | {{Spec2('Filters 1.0')}} | Ajoute l'attribut {{SVGAttr("edgeMode")}} | +| {{SpecName('SVG1.1', 'filters.html#feGaussianBlurElement', '<feGaussianBlur>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feGaussianBlur")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutorial/Filter_effects) diff --git a/files/fr/web/svg/element/feimage/index.md b/files/fr/web/svg/element/feimage/index.md index 2996a0c915..f6c00eac7e 100644 --- a/files/fr/web/svg/element/feimage/index.md +++ b/files/fr/web/svg/element/feimage/index.md @@ -6,104 +6,83 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feImage --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feImage></code></strong> extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster)</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtre</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs XLink</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("preserveAspectRatio")}}</li> - <li>{{SVGAttr("xlink:href")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFEImageElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="image"> - <feImage xlink:href="/files/6457/mdn_logo_only_color.png"/> - </filter> - </defs> - - <rect x="10%" y="10%" width="80%" height="80%" - style="filter:url(#image);"/> -</svg></pre> - -<p>{{EmbedLiveSample("Exemple", 200, 200)}}</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("Filters 1.0", "#feImageElement", "<feImage>")}}</td> - <td>{{Spec2("Filters 1.0")}}</td> - <td>Ajoute l'attribut {{SVGAttr("href")}} et déprécie {{SVGAttr("xlink:href")}}. Ajoute l'attribut {{SVGAttr("crossorigin")}}.</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feImageElement", "<feImage>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feImage")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("animateTransform")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Les filtres</a></li> -</ul> +{{SVGRef}} + +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feImage>`** extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster) + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de primitives de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- [Attributs XLink](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} + +### Attributs spécifiques + +- {{SVGAttr("preserveAspectRatio")}} +- {{SVGAttr("xlink:href")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFEImageElement")}}. + +## Exemple + +```html +<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="image"> + <feImage xlink:href="/files/6457/mdn_logo_only_color.png"/> + </filter> + </defs> + + <rect x="10%" y="10%" width="80%" height="80%" + style="filter:url(#image);"/> +</svg> +``` + +{{EmbedLiveSample("Exemple", 200, 200)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| {{SpecName("Filters 1.0", "#feImageElement", "<feImage>")}} | {{Spec2("Filters 1.0")}} | Ajoute l'attribut {{SVGAttr("href")}} et déprécie {{SVGAttr("xlink:href")}}. Ajoute l'attribut {{SVGAttr("crossorigin")}}. | +| {{SpecName("SVG1.1", "filters.html#feImageElement", "<feImage>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feImage")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("animateTransform")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Les filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/femerge/index.md b/files/fr/web/svg/element/femerge/index.md index d1c190aae8..f151855700 100644 --- a/files/fr/web/svg/element/femerge/index.md +++ b/files/fr/web/svg/element/femerge/index.md @@ -6,106 +6,86 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feMerge --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre SVG <strong><code><feMerge></code></strong> permet d'empiler les résultats de différentes opérations de filtre les uns par dessus les autres. La liste des images à empiler est définit par une liste d'élément {{ SVGElement("feMergeNode") }} à l'intérieur de la balise. Pour y parvenir, stocker au préalable les résultats des filtres voulus dans un buffer temporaire grâce à l'attribut {{ SVGAttr("result") }}.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Exemple">Exemple</h2> - -<h3 id="SVG">SVG</h3> - -<pre class="brush: html; highlight[7-10]"><svg width="200" height="200" - xmlns="http://www.w3.org/2000/svg"> - - <filter id="feOffset" x="-40" y="-20" width="100" height="200"> - <feOffset in="SourceGraphic" dx="60" dy="60" /> - <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> - <feMerge> - <feMergeNode in="blur2" /> - <feMergeNode in="SourceGraphic" /> - </feMerge> - </filter> - - <rect x="40" y="40" width="100" height="100" - style="stroke: #000000; fill: green; filter: url(#feOffset);" /> -</svg> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Exemple', 200, 200)}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtres</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<p><em>Aucun</em></p> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFEMergeElement")}}.</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('Filters 1.0', '#feMergeElement', '<feMerge>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feMergeElement', '<feMerge>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feMerge")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMergeNode")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +{{SVGRef}} + +La primitive de filtre SVG **`<feMerge>`** permet d'empiler les résultats de différentes opérations de filtre les uns par dessus les autres. La liste des images à empiler est définit par une liste d'élément {{ SVGElement("feMergeNode") }} à l'intérieur de la balise. Pour y parvenir, stocker au préalable les résultats des filtres voulus dans un buffer temporaire grâce à l'attribut {{ SVGAttr("result") }}. + +## Contexte d'utilisation + +{{svginfo}} + +## Exemple + +### SVG + +```html +<svg width="200" height="200" + xmlns="http://www.w3.org/2000/svg"> + + <filter id="feOffset" x="-40" y="-20" width="100" height="200"> + <feOffset in="SourceGraphic" dx="60" dy="60" /> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> + <feMerge> + <feMergeNode in="blur2" /> + <feMergeNode in="SourceGraphic" /> + </feMerge> + </filter> + + <rect x="40" y="40" width="100" height="100" + style="stroke: #000000; fill: green; filter: url(#feOffset);" /> +</svg> +``` + +### Résultat + +{{EmbedLiveSample('Exemple', 200, 200)}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitives de filtres](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} + +### Attributs spécifiques + +_Aucun_ + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFEMergeElement")}}. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#feMergeElement', '<feMerge>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#feMergeElement', '<feMerge>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feMerge")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMergeNode")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/femergenode/index.md b/files/fr/web/svg/element/femergenode/index.md index b3ccd9ee5c..92de098015 100644 --- a/files/fr/web/svg/element/femergenode/index.md +++ b/files/fr/web/svg/element/femergenode/index.md @@ -7,92 +7,70 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feMergeNode --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément SVG <code>feMergeNode</code> se place à l'intérieur d'un élément {{ SVGElement("feMerge") }}. Il prend en entrée le résultat d'un filtre afin qu'il soit traité par son parent.</p> +L'élément SVG `feMergeNode` se place à l'intérieur d'un élément {{ SVGElement("feMerge") }}. Il prend en entrée le résultat d'un filtre afin qu'il soit traité par son parent. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: html"><svg width="200" height="200" +```html +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - - <filter id="feOffset" x="-40" y="-20" width="100" height="200"> - <feOffset in="SourceGraphic" dx="60" dy="60" /> - <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> - <feMerge> - <feMergeNode in="blur2" /> - <feMergeNode in="SourceGraphic" /> - </feMerge> - </filter> - - <rect x="40" y="40" width="100" height="100" - style="stroke: #000000; fill: green; filter: url(#feOffset);" /> - <rect x="40" y="40" width="100" height="100" - style="stroke: #000000; fill: green;" /> -</svg> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Exemple', 200, 200)}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a></li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{ SVGAttr("in") }}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFEMergeNodeElement")}}.</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('Filters 1.0', '#elementdef-femergenode', '<feMergeNode>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feMergeNodeElement', '<feMergeNode>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feMergeNode")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ SVGElement("filter") }}</li> - <li>{{ SVGElement("animate") }}</li> - <li>{{ SVGElement("set") }}</li> - <li>{{ SVGElement("feMerge") }}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li> -</ul> + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <filter id="feOffset" x="-40" y="-20" width="100" height="200"> + <feOffset in="SourceGraphic" dx="60" dy="60" /> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> + <feMerge> + <feMergeNode in="blur2" /> + <feMergeNode in="SourceGraphic" /> + </feMerge> + </filter> + + <rect x="40" y="40" width="100" height="100" + style="stroke: #000000; fill: green; filter: url(#feOffset);" /> + <rect x="40" y="40" width="100" height="100" + style="stroke: #000000; fill: green;" /> +</svg> +``` + +### Résultat + +{{EmbedLiveSample('Exemple', 200, 200)}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") + +### Attributs spécifiques + +- {{ SVGAttr("in") }} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFEMergeNodeElement")}}. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#elementdef-femergenode', '<feMergeNode>')}} | {{Spec2('Filters 1.0')}} | | +| {{SpecName('SVG1.1', 'filters.html#feMergeNodeElement', '<feMergeNode>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feMergeNode")}} + +## Voir aussi + +- {{ SVGElement("filter") }} +- {{ SVGElement("animate") }} +- {{ SVGElement("set") }} +- {{ SVGElement("feMerge") }} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres "en/SVG/Tutorial/Filter_effects") diff --git a/files/fr/web/svg/element/femorphology/index.md b/files/fr/web/svg/element/femorphology/index.md index 803449847d..f701c66740 100644 --- a/files/fr/web/svg/element/femorphology/index.md +++ b/files/fr/web/svg/element/femorphology/index.md @@ -7,60 +7,58 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feMorphology --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feMorphology></code></strong> est utilisée pour éroder ou dilater l'image en entrée. Cela permet d'appliquer des effets de mise en gras ou d'amincissement.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feMorphology>`** est utilisée pour éroder ou dilater l'image en entrée. Cela permet d'appliquer des effets de mise en gras ou d'amincissement. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("operator")}}</li> - <li>{{SVGAttr("radius")}}</li> -</ul> +- {{SVGAttr("in")}} +- {{SVGAttr("operator")}} +- {{SVGAttr("radius")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFEMorphologyElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFEMorphologyElement")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Sur_du_contenu_SVG">Sur du contenu SVG</h3> +### Sur du contenu SVG -<h4 id="SVG">SVG</h4> +#### SVG -<pre class="brush: html; highlight[3,6]"><svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> - <filter id="erode"> - <feMorphology operator="erode" radius="1"/> - </filter> - <filter id="dilate"> - <feMorphology operator="dilate" radius="2"/> - </filter> - <text y="1em">Texte normal</text> - <text id="thin" y="2em">Texte mince</text> - <text id="thick" y="3em">Text gras</text> -</svg> -</pre> +```html +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> + <filter id="erode"> + <feMorphology operator="erode" radius="1"/> + </filter> + <filter id="dilate"> + <feMorphology operator="dilate" radius="2"/> + </filter> + <text y="1em">Texte normal</text> + <text id="thin" y="2em">Texte mince</text> + <text id="thick" y="3em">Text gras</text> +</svg> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; highlight[7,11]">text { +```css +text { font-family: Arial, Helvetica, sans-serif; font-size: 3em; } @@ -71,30 +69,34 @@ translation_of: Web/SVG/Element/feMorphology #thick { filter: url(#dilate); -}</pre> +} +``` -<p>{{EmbedLiveSample("Sur_du_contenu_SVG", 340, 180)}}</p> +{{EmbedLiveSample("Sur_du_contenu_SVG", 340, 180)}} -<h3 id="Sur_du_contenu_HTML">Sur du contenu HTML</h3> +### Sur du contenu HTML -<h4 id="SVG_2">SVG</h4> +#### SVG -<pre class="brush: html; highlight[3,6]"><svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> - <filter id="erode"> - <feMorphology operator="erode" radius="1"/> - </filter> - <filter id="dilate"> - <feMorphology operator="dilate" radius="2"/> - </filter> -</svg> +```html +<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> + <filter id="erode"> + <feMorphology operator="erode" radius="1"/> + </filter> + <filter id="dilate"> + <feMorphology operator="dilate" radius="2"/> + </filter> +</svg> -<p>Texte normal</p> -<p id="thin">Texte mince</p> -<p id="thick">Text gras</p></pre> +<p>Texte normal</p> +<p id="thin">Texte mince</p> +<p id="thick">Text gras</p> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css; highlight[8,12]">p { +```css +p { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 3em; @@ -106,58 +108,40 @@ translation_of: Web/SVG/Element/feMorphology #thick { filter: url(#dilate); -}</pre> - -<p>{{EmbedLiveSample("Sur_du_contenu_HTML", 340, 180)}}</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("Filters 1.0", "#feMorphologyElement", "<feMorphology>")}}</td> - <td>{{Spec2("Filters 1.0")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feMorphologyElement", "<feMorphology>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feMorphology")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +} +``` + +{{EmbedLiveSample("Sur_du_contenu_HTML", 340, 180)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Filters 1.0", "#feMorphologyElement", "<feMorphology>")}} | {{Spec2("Filters 1.0")}} | Aucun changement | +| {{SpecName("SVG1.1", "filters.html#feMorphologyElement", "<feMorphology>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feMorphology")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/feoffset/index.md b/files/fr/web/svg/element/feoffset/index.md index f55c26f834..6e38cf7190 100644 --- a/files/fr/web/svg/element/feoffset/index.md +++ b/files/fr/web/svg/element/feoffset/index.md @@ -6,105 +6,84 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feOffset --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre <strong><code><feOffset></code></strong> permet de décaler l'image qu'elle a en entrée selon les attributs {{SVGAttr("dx")}} et {{SVGAttr("dy")}}.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtres</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("dx")}}</li> - <li>{{SVGAttr("dy")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFEOffsetElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<h3 id="SVG">SVG</h3> - -<pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> - <defs> - <filter id="offset" width="180" height="180"> - <feOffset in="SourceGraphic" dx="60" dy="60" /> - </filter> - </defs> - - <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> - <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 200, 200)}}</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('Filters 1.0', '#feOffsetElement', '<feOffset>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feOffsetElement', '<feOffset>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feOffset")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Effets de filtre</a></li> -</ul> +{{SVGRef}} + +La primitive de filtre **`<feOffset>`** permet de décaler l'image qu'elle a en entrée selon les attributs {{SVGAttr("dx")}} et {{SVGAttr("dy")}}. + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitives de filtres](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} + +### Attributs spécifiques + +- {{SVGAttr("in")}} +- {{SVGAttr("dx")}} +- {{SVGAttr("dy")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFEOffsetElement")}}. + +## Exemple + +### SVG + +```html +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="offset" width="180" height="180"> + <feOffset in="SourceGraphic" dx="60" dy="60" /> + </filter> + </defs> + + <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> + <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 200, 200)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#feOffsetElement', '<feOffset>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#feOffsetElement', '<feOffset>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feOffset")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Effets de filtre](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fepointlight/index.md b/files/fr/web/svg/element/fepointlight/index.md index ad36103039..1de067e3a5 100644 --- a/files/fr/web/svg/element/fepointlight/index.md +++ b/files/fr/web/svg/element/fepointlight/index.md @@ -8,96 +8,75 @@ tags: - SVG Light Source translation_of: Web/SVG/Element/fePointLight --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre <strong><code><fePointLight></code></strong> définit une source de lumière qui permet de créer un point lumineux. On la place dans une primitive de filtre d'éclairage: {{SVGElement("feDiffuseLighting")}} or {{SVGElement("feSpecularLighting")}}.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("x")}}</li> - <li>{{SVGAttr("y")}}</li> - <li>{{SVGAttr("z")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFEPointLightElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<h3 id="SVG">SVG</h3> - -<pre class="brush: html; highlight[7]"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="spotlight"> - <feSpecularLighting result="spotlight" specularConstant="1.5" - specularExponent="80" lighting-color="#FFF"> - <fePointLight x="50" y="50" z="220"/> - </feSpecularLighting> - <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic" - k1="0" k2="1" k3="1" k4="0"/> - </filter> - </defs> - - <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" - width="80%" height="80%" style="filter:url(#spotlight);"/> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 200, 200)}}</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('Filters 1.0', '#fePointLightElement', '<fePointLight>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#fePointLightElement', '<fePointLight>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.fePointLight")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feDistantLight")}}</li> - <li>{{SVGElement("feSpotLight")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +{{SVGRef}} + +La primitive de filtre **`<fePointLight>`** définit une source de lumière qui permet de créer un point lumineux. On la place dans une primitive de filtre d'éclairage: {{SVGElement("feDiffuseLighting")}} or {{SVGElement("feSpecularLighting")}}. + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) + +### Attributs spécifiques + +- {{SVGAttr("x")}} +- {{SVGAttr("y")}} +- {{SVGAttr("z")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFEPointLightElement")}}. + +## Exemple + +### SVG + +```html +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="spotlight"> + <feSpecularLighting result="spotlight" specularConstant="1.5" + specularExponent="80" lighting-color="#FFF"> + <fePointLight x="50" y="50" z="220"/> + </feSpecularLighting> + <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic" + k1="0" k2="1" k3="1" k4="0"/> + </filter> + </defs> + + <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" + width="80%" height="80%" style="filter:url(#spotlight);"/> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 200, 200)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#fePointLightElement', '<fePointLight>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#fePointLightElement', '<fePointLight>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.fePointLight")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feDistantLight")}} +- {{SVGElement("feSpotLight")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fespecularlighting/index.md b/files/fr/web/svg/element/fespecularlighting/index.md index 31b4e8ff78..017f6ca8c1 100644 --- a/files/fr/web/svg/element/fespecularlighting/index.md +++ b/files/fr/web/svg/element/fespecularlighting/index.md @@ -8,110 +8,89 @@ tags: - SVG Light Source translation_of: Web/SVG/Element/feSpecularLighting --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feSpecularLighting></code></strong> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante est une image RGBA qui dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée. Le calcul de l'éclairage se fait suivant le <a href="https://fr.wikipedia.org/wiki/Ombrage_de_Phong">modèle d'illumination de Phong</a>.</p> - -<p>La lumière crée par cette primitive de filtre peut être combinée avec une image de texture à l'aide de l'opérateur <code>arithmetic</code> de la primitive de filtre {{SVGElement("feComposite")}}. De multiples sources lumineuses peuvent être simulées en ajoutant plusieurs éléments à la texture.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("surfaceScale")}}</li> - <li>{{SVGAttr("specularConstant")}}</li> - <li>{{SVGAttr("specularExponent")}}</li> - <li>{{SVGAttr("kernelUnitLength")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFESpecularLightingElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html; highlight[4-7]"><svg height="200" width="200" viewBox="0 0 220 220" - xmlns="http://www.w3.org/2000/svg"> - <filter id = "filter"> - <feSpecularLighting result="specOut" - specularExponent="20" lighting-color="#bbbbbb"> - <fePointLight x="50" y="75" z="200"/> - </feSpecularLighting> - <feComposite in="SourceGraphic" in2="specOut" - operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> - </filter> - <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 220, 220)}}</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('Filters 1.0', '#feSpecularLightingElement', '<feSpecularLighting>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Suppression de la limitation sur l'attribut <code>specularExponent</code>.</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feSpecularLightingElement', '<feSpecularLighting>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feSpecularLighting")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feDistantLight")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("fePointLight")}}</li> - <li>{{SVGElement("feSpotLight")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +{{SVGRef}} + +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feSpecularLighting>`** éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante est une image RGBA qui dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée. Le calcul de l'éclairage se fait suivant le [modèle d'illumination de Phong](https://fr.wikipedia.org/wiki/Ombrage_de_Phong). + +La lumière crée par cette primitive de filtre peut être combinée avec une image de texture à l'aide de l'opérateur `arithmetic` de la primitive de filtre {{SVGElement("feComposite")}}. De multiples sources lumineuses peuvent être simulées en ajoutant plusieurs éléments à la texture. + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} + +### Attributs spécifiques + +- {{SVGAttr("in")}} +- {{SVGAttr("surfaceScale")}} +- {{SVGAttr("specularConstant")}} +- {{SVGAttr("specularExponent")}} +- {{SVGAttr("kernelUnitLength")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFESpecularLightingElement")}}. + +## Exemple + +```html +<svg height="200" width="200" viewBox="0 0 220 220" + xmlns="http://www.w3.org/2000/svg"> + <filter id = "filter"> + <feSpecularLighting result="specOut" + specularExponent="20" lighting-color="#bbbbbb"> + <fePointLight x="50" y="75" z="200"/> + </feSpecularLighting> + <feComposite in="SourceGraphic" in2="specOut" + operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> + </filter> + <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 220, 220)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------- | +| {{SpecName('Filters 1.0', '#feSpecularLightingElement', '<feSpecularLighting>')}} | {{Spec2('Filters 1.0')}} | Suppression de la limitation sur l'attribut `specularExponent`. | +| {{SpecName('SVG1.1', 'filters.html#feSpecularLightingElement', '<feSpecularLighting>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feSpecularLighting")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feDistantLight")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("fePointLight")}} +- {{SVGElement("feSpotLight")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fespotlight/index.md b/files/fr/web/svg/element/fespotlight/index.md index a5447ec39d..bc6c322f71 100644 --- a/files/fr/web/svg/element/fespotlight/index.md +++ b/files/fr/web/svg/element/fespotlight/index.md @@ -8,101 +8,80 @@ tags: - SVG Light Source translation_of: Web/SVG/Element/feSpotLight --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feSpotLight></code></strong> définit une source de lumière qui permet de créer un feu de projecteur. On la place dans une primitive de filtre d'éclairage: {{SVGElement("feDiffuseLighting")}} ou {{SVGElement("feSpecularLighting")}}.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("x")}}</li> - <li>{{SVGAttr("y")}}</li> - <li>{{SVGAttr("z")}}</li> - <li>{{SVGAttr("pointsAtX")}}</li> - <li>{{SVGAttr("pointsAtY")}}</li> - <li>{{SVGAttr("pointsAtZ")}}</li> - <li>{{SVGAttr("specularExponent")}}</li> - <li>{{SVGAttr("limitingConeAngle")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFESpotLightElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<h3 id="SVG">SVG</h3> - -<pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="spotlight"> - <feSpecularLighting result="spotlight" specularConstant="1.5" - specularExponent="4" lighting-color="#FFF"> - <feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" /> - </feSpecularLighting> - <feComposite in="SourceGraphic" in2="spotlight" operator="out" - k1="0" k2="1" k3="1" k4="0"/> - </filter> - </defs> - - <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" - width="80%" height="80%" style="filter:url(#spotlight);"/> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 200, 200)}}</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("Filters 1.0", "#feSpotLightElement", "<feSpotLight>")}}</td> - <td>{{Spec2("Filters 1.0")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feSpotLightElement", "<feSpotLight>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feSpotLight")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feDistantLight")}}</li> - <li>{{SVGElement("fePointLight")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +{{SVGRef}} + +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feSpotLight>`** définit une source de lumière qui permet de créer un feu de projecteur. On la place dans une primitive de filtre d'éclairage: {{SVGElement("feDiffuseLighting")}} ou {{SVGElement("feSpecularLighting")}}. + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) + +### Attributs spécifiques + +- {{SVGAttr("x")}} +- {{SVGAttr("y")}} +- {{SVGAttr("z")}} +- {{SVGAttr("pointsAtX")}} +- {{SVGAttr("pointsAtY")}} +- {{SVGAttr("pointsAtZ")}} +- {{SVGAttr("specularExponent")}} +- {{SVGAttr("limitingConeAngle")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFESpotLightElement")}}. + +## Exemple + +### SVG + +```html +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="spotlight"> + <feSpecularLighting result="spotlight" specularConstant="1.5" + specularExponent="4" lighting-color="#FFF"> + <feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" /> + </feSpecularLighting> + <feComposite in="SourceGraphic" in2="spotlight" operator="out" + k1="0" k2="1" k3="1" k4="0"/> + </filter> + </defs> + + <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" + width="80%" height="80%" style="filter:url(#spotlight);"/> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 200, 200)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Filters 1.0", "#feSpotLightElement", "<feSpotLight>")}} | {{Spec2("Filters 1.0")}} | Aucun changement | +| {{SpecName("SVG1.1", "filters.html#feSpotLightElement", "<feSpotLight>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feSpotLight")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feDistantLight")}} +- {{SVGElement("fePointLight")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/fetile/index.md b/files/fr/web/svg/element/fetile/index.md index f4acbdf1c9..91e0f2b32b 100644 --- a/files/fr/web/svg/element/fetile/index.md +++ b/files/fr/web/svg/element/fetile/index.md @@ -7,107 +7,86 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feTile --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feTile></code></strong> permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}.</p> +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feTile>`** permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitives de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("in")}}</li> -</ul> +- {{SVGAttr("in")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFETileElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFETileElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html; highlight[7]"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="tile" x="0" y="0" width="100%" height="100%"> - <feTile in="SourceGraphic" x="50" y="50" - width="100" height="100" /> - <feTile/> - </filter> - </defs> +```html +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="tile" x="0" y="0" width="100%" height="100%"> + <feTile in="SourceGraphic" x="50" y="50" + width="100" height="100" /> + <feTile/> + </filter> + </defs> - <image xlink:href="/files/6457/mdn_logo_only_color.png" + <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" - style="filter:url(#tile);"/> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 200, 200)}}</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('Filters 1.0', '#feTileElement', '<feTile>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feTileElement', '<feTile>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feTile")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li> -</ul> + style="filter:url(#tile);"/> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 200, 200)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#feTileElement', '<feTile>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#feTileElement', '<feTile>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feTile")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTurbulence")}} +- [SVG tutorial: Filter effects](/fr/docs/Web/SVG/Tutorial/Filter_effects) diff --git a/files/fr/web/svg/element/feturbulence/index.md b/files/fr/web/svg/element/feturbulence/index.md index 1a35532aeb..f948cc47cb 100644 --- a/files/fr/web/svg/element/feturbulence/index.md +++ b/files/fr/web/svg/element/feturbulence/index.md @@ -7,105 +7,84 @@ tags: - SVG Filter translation_of: Web/SVG/Element/feTurbulence --- -<div>{{SVGRef}}</div> - -<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><feTurbulence></code></strong> crée une image en utilisant la <a href="https://fr.wikipedia.org/wiki/Bruit_de_Perlin">fonction de turbulence de Perlin</a>. Cela permet de créer des textures artificielles comme des nuages, du marbre, etc.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("baseFrequency")}}</li> - <li>{{SVGAttr("numOctaves")}}</li> - <li>{{SVGAttr("seed")}}</li> - <li>{{SVGAttr("stitchTiles")}}</li> - <li>{{SVGAttr("type")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGFETurbulenceElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html; highlight[4-5]"><svg width="200" height="200" viewBox="0 0 220 220" - xmlns="http://www.w3.org/2000/svg"> - <filter id="displacementFilter"> - <feTurbulence type="turbulence" baseFrequency="0.05" - numOctaves="2" result="turbulence"/> - <feDisplacementMap in2="turbulence" in="SourceGraphic" - scale="50" xChannelSelector="R" yChannelSelector="G"/> - </filter> - - <circle cx="100" cy="100" r="100" - style="filter: url(#displacementFilter)"/> -</svg></pre> - -<p>{{EmbedLiveSample('Exemple', 220, 220)}}</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('Filters 1.0', '#feTurbulenceElement', '<feTurbulence>')}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'filters.html#feTurbulenceElement', '<feTurbulence>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.feTurbulence")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> +{{SVGRef}} + +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feTurbulence>`** crée une image en utilisant la [fonction de turbulence de Perlin](https://fr.wikipedia.org/wiki/Bruit_de_Perlin). Cela permet de créer des textures artificielles comme des nuages, du marbre, etc. + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs de primitive de filtre](/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} + +### Attributs spécifiques + +- {{SVGAttr("baseFrequency")}} +- {{SVGAttr("numOctaves")}} +- {{SVGAttr("seed")}} +- {{SVGAttr("stitchTiles")}} +- {{SVGAttr("type")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGFETurbulenceElement")}}. + +## Exemple + +```html +<svg width="200" height="200" viewBox="0 0 220 220" + xmlns="http://www.w3.org/2000/svg"> + <filter id="displacementFilter"> + <feTurbulence type="turbulence" baseFrequency="0.05" + numOctaves="2" result="turbulence"/> + <feDisplacementMap in2="turbulence" in="SourceGraphic" + scale="50" xChannelSelector="R" yChannelSelector="G"/> + </filter> + + <circle cx="100" cy="100" r="100" + style="filter: url(#displacementFilter)"/> +</svg> +``` + +{{EmbedLiveSample('Exemple', 220, 220)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('Filters 1.0', '#feTurbulenceElement', '<feTurbulence>')}} | {{Spec2('Filters 1.0')}} | Aucun changement | +| {{SpecName('SVG1.1', 'filters.html#feTurbulenceElement', '<feTurbulence>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.feTurbulence")}} + +## Voir aussi + +- {{SVGElement("filter")}} +- {{SVGElement("animate")}} +- {{SVGElement("set")}} +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/filter/index.md b/files/fr/web/svg/element/filter/index.md index d07d577f50..057f4f1e2f 100644 --- a/files/fr/web/svg/element/filter/index.md +++ b/files/fr/web/svg/element/filter/index.md @@ -6,113 +6,92 @@ tags: - SVG translation_of: Web/SVG/Element/filter --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><filter></code></strong> sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété {{Glossary("CSS")}} {{cssxref("filter")}}.</p> +L'élément [SVG](/fr/docs/Web/SVG) **`<filter>`** sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété {{Glossary("CSS")}} {{cssxref("filter")}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs XLink</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs XLink](/fr/docs/Web/SVG/Attribute#Attributs_XLink) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("x")}}</li> - <li>{{SVGAttr("y")}}</li> - <li>{{SVGAttr("width")}}</li> - <li>{{SVGAttr("height")}}</li> - <li>{{SVGAttr("filterRes")}}</li> - <li>{{SVGAttr("filterUnits")}}</li> - <li>{{SVGAttr("primitiveUnits")}}</li> - <li>{{SVGAttr("xlink:href")}}</li> -</ul> +- {{SVGAttr("x")}} +- {{SVGAttr("y")}} +- {{SVGAttr("width")}} +- {{SVGAttr("height")}} +- {{SVGAttr("filterRes")}} +- {{SVGAttr("filterUnits")}} +- {{SVGAttr("primitiveUnits")}} +- {{SVGAttr("xlink:href")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGFilterElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGFilterElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h4 id="SVG">SVG</h4> +#### SVG -<pre class="brush: html"><svg width="230" height="120" +```html +<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - - <filter id="blurMe"> - <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> - </filter> - - <circle cx="60" cy="60" r="50" fill="green" /> - - <circle cx="170" cy="60" r="50" fill="green" - filter="url(#blurMe)" /> -</svg></pre> - -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample("Exemple",232,124,"/files/4227/feGaussianBlur.png")}}</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("Filters 1.0", "#FilterElement", "<filter>")}}</td> - <td>{{Spec2("Filters 1.0")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#FilterElement", "<filter>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.filter")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feDropShadow")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li> -</ul> + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <filter id="blurMe"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> + </filter> + + <circle cx="60" cy="60" r="50" fill="green" /> + + <circle cx="170" cy="60" r="50" fill="green" + filter="url(#blurMe)" /> +</svg> +``` + +#### Résultat + +{{EmbedLiveSample("Exemple",232,124,"/files/4227/feGaussianBlur.png")}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("Filters 1.0", "#FilterElement", "<filter>")}} | {{Spec2("Filters 1.0")}} | | +| {{SpecName("SVG1.1", "filters.html#FilterElement", "<filter>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.filter")}} + +## Voir aussi + +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feDropShadow")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- [Tutoriel SVG: Filtres](/fr/docs/Web/SVG/Tutoriel/filtres) diff --git a/files/fr/web/svg/element/foreignobject/index.md b/files/fr/web/svg/element/foreignobject/index.md index 993f08a761..e0f1dcc8b9 100644 --- a/files/fr/web/svg/element/foreignobject/index.md +++ b/files/fr/web/svg/element/foreignobject/index.md @@ -7,16 +7,19 @@ tags: - SVG translation_of: Web/SVG/Element/foreignObject --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <strong><code><foreignObject></code></strong> permet d'inclure des éléments d'un espace de noms XML différent à l'intérieur du <a href="/fr/docs/Web/SVG">SVG</a>. Dans le contexte d'un navigateur, il s'agit généralement d'inclure du XHTML/HTML.</p> +L'élément **`<foreignObject>`** permet d'inclure des éléments d'un espace de noms XML différent à l'intérieur du [SVG](/fr/docs/Web/SVG). Dans le contexte d'un navigateur, il s'agit généralement d'inclure du XHTML/HTML. -<h2>Exemple</h2> +## Exemple -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html; highlight[16,27]"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> - <style> +```html +<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <style> polygon { fill: black } div { @@ -25,93 +28,71 @@ translation_of: Web/SVG/Element/foreignObject height: 100%; overflow: auto; } - </style> + </style> - <polygon points="5,5 195,10 185,185 10,195" /> + <polygon points="5,5 195,10 185,185 10,195" /> - <!-- Cas d'utilisation courant: inclure du texte HTML dans le SVG --> - <foreignObject x="20" y="20" width="160" height="160"> - <!-- + <!-- Cas d'utilisation courant: inclure du texte HTML dans le SVG --> + <foreignObject x="20" y="20" width="160" height="160"> + <!-- Dans le cas d'un SVG intégré dans du HTML, le namespace XHTML peut être omis, mais il est obligatoire dans le contexte d'un document SVG - --> - <div xmlns="http://www.w3.org/1999/xhtml"> + --> + <div xmlns="http://www.w3.org/1999/xhtml"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. Aliquam erat volutpat. - </div> - </foreignObject> -</svg></pre> - -<p>{{EmbedLiveSample('exemple', 150, '100%')}}</p> - -<h2 id="Attributs">Attributs</h2> - -<dl> - <dt>{{SVGAttr("height")}}</dt> - <dd>Cet attribut détermine la hauteur du rectangle.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut</em>: <code>auto</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("width")}}</dt> - <dd>Cet attribut détermine la largeur du rectangle.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut</em>: <code>auto</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("x")}}</dt> - <dd>Cet attribut détermine la coordonnée x du rectangle.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("y")}}</dt> - <dd>Cet attribut détermine la coordonnée y du rectangle.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> À partir de SVG2 <code>x</code>, <code>y</code>, <code>width</code>, et <code>height</code> sont des <em>Propriétés Géometriques</em>, ce qui signifie que ces attributs peuvent également être utilisés comme des propriétés CSS pour cet élément.</p> -</div> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<dl> - <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt> - <dd><small>Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> - <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> - <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt>Attributs d'événement</dt> - <dd><small><a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux">Attributs d'événements globaux</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques">Attributs d'événement graphiques</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_du_document">Attributs d'événement du document</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document">Attributs d'événement des éléments du document</a></small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> - <dd><small>Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> - <dt>Attributs Aria</dt> - <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> -</dl> - -<h2 id="Notes_d'usage">Notes d'usage</h2> - -<p>{{svginfo}}</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('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.foreignObject")}}</p> + </div> + </foreignObject> +</svg> +``` + +{{EmbedLiveSample('exemple', 150, '100%')}} + +## Attributs + +- {{SVGAttr("height")}} + - : Cet attribut détermine la hauteur du rectangle. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_: `auto`; _Animation_: **oui** +- {{SVGAttr("width")}} + - : Cet attribut détermine la largeur du rectangle. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_: `auto`; _Animation_: **oui** +- {{SVGAttr("x")}} + - : Cet attribut détermine la coordonnée x du rectangle. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_: `0`; _Animation_: **oui** +- {{SVGAttr("y")}} + - : Cet attribut détermine la coordonnée y du rectangle. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_: `0`; _Animation_: **oui** + +> **Note :** À partir de SVG2 `x`, `y`, `width`, et `height` sont des _Propriétés Géometriques_, ce qui signifie que ces attributs peuvent également être utilisés comme des propriétés CSS pour cet élément. + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute/Core) + - : Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute/Conditional_Processing) + - : Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Attributs d'événement + - : [Attributs d'événements globaux](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux), [Attributs d'événement graphiques](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques), [Attributs d'événement du document](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_du_document), [Attributs d'événement des éléments du document](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) + - : Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- Attributs Aria + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Notes d'usage + +{{svginfo}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | +| {{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.foreignObject")}} diff --git a/files/fr/web/svg/element/g/index.md b/files/fr/web/svg/element/g/index.md index 87392d44f3..70467ef999 100644 --- a/files/fr/web/svg/element/g/index.md +++ b/files/fr/web/svg/element/g/index.md @@ -8,76 +8,60 @@ tags: - SVG Conteneur translation_of: Web/SVG/Element/g --- -<div>{{SVGRef}}</div> - -<p>L'élément <code>g</code> est un conteneur utilisé pour grouper des objets.</p> - -<p>Les transformations appliquées à l'élément <code>g</code> sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}.</p> - -<h2>Exemple</h2> - -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> - - -<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Les enfants de g héritent de ses attributs de présentation --> - <g fill="white" stroke="green" stroke-width="5"> - <circle cx="40" cy="40" r="25" /> - <circle cx="60" cy="60" r="25" /> - </g> -</svg></pre> - -<p>{{EmbedLiveSample('exemple', 100, '100%')}}</p> - -<h2 id="Attributs">Attributs</h2> - -<p>Cet élément n'a que des attributs globaux</p> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<dl> - <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt> - <dd><small>Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> - <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> - <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt>Attributs d'événement</dt> - <dd><small><a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux">Attributs d'événement globaux</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques">Attributs d'événement graphiques</a></small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> - <dd><small>Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> - <dt>Attributs Aria</dt> - <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> -</dl> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</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("SVG2", "struct.html#GElement", "<g>")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "struct.html#Groups", "<g>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.g")}}</p> +{{SVGRef}} + +L'élément `g` est un conteneur utilisé pour grouper des objets. + +Les transformations appliquées à l'élément `g` sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}. + +## Exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Les enfants de g héritent de ses attributs de présentation --> + <g fill="white" stroke="green" stroke-width="5"> + <circle cx="40" cy="40" r="25" /> + <circle cx="60" cy="60" r="25" /> + </g> +</svg> +``` + +{{EmbedLiveSample('exemple', 100, '100%')}} + +## Attributs + +Cet élément n'a que des attributs globaux + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute/Core) + - : Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute/Conditional_Processing) + - : Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- Attributs d'événement + - : [Attributs d'événement globaux](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux), [Attributs d'événement graphiques](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) + - : Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- Attributs Aria + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Contexte d'utilisation + +{{svginfo}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | ------------------------ | ------------------ | +| {{SpecName("SVG2", "struct.html#GElement", "<g>")}} | {{Spec2("SVG2")}} | | +| {{SpecName("SVG1.1", "struct.html#Groups", "<g>")}} | {{Spec2("SVG1.1")}} | Initial definition | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.g")}} diff --git a/files/fr/web/svg/element/hkern/index.md b/files/fr/web/svg/element/hkern/index.md index 72fed53d97..4f856e7c5d 100644 --- a/files/fr/web/svg/element/hkern/index.md +++ b/files/fr/web/svg/element/hkern/index.md @@ -8,43 +8,37 @@ tags: - SVG translation_of: Web/SVG/Element/hkern --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>La distance horizontale entre deux glyphes peut être ajustée minutieusement avec l'élément hkern. Ce proccessus est appelé <a href="https://fr.wikipedia.org/wiki/Cr%C3%A9nage">Crénage</a>.</p> +La distance horizontale entre deux glyphes peut être ajustée minutieusement avec l'élément hkern. Ce proccessus est appelé [Crénage](https://fr.wikipedia.org/wiki/Cr%C3%A9nage). -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> -</ul> +- [Attributs fondamentaux](/fr/docs/Web/SVG/Attribute#Core) » -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{ SVGAttr("u1") }}</li> - <li>{{ SVGAttr("g1") }}</li> - <li>{{ SVGAttr("u2") }}</li> - <li>{{ SVGAttr("g2") }}</li> - <li>{{ SVGAttr("k") }}</li> -</ul> +- {{ SVGAttr("u1") }} +- {{ SVGAttr("g1") }} +- {{ SVGAttr("u2") }} +- {{ SVGAttr("g2") }} +- {{ SVGAttr("k") }} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGHKernElement" title="en/DOM/SVGHKernElement">SVGHKernElement</a></code>.</p> +Cet élément implémente l'interface [`SVGHKernElement`](/fr/docs/Web/API/SVGHKernElement "en/DOM/SVGHKernElement"). -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{ SVGElement("font") }}</li> - <li>{{ SVGElement("glyph") }}</li> - <li>{{ SVGElement("vkern") }}</li> - <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_fonts">Tutoriel SVG : Polices SVG</a></li> -</ul> +- {{ SVGElement("font") }} +- {{ SVGElement("glyph") }} +- {{ SVGElement("vkern") }} +- [Tutoriel SVG : Polices SVG](/fr/docs/Web/SVG/Tutorial/SVG_fonts) diff --git a/files/fr/web/svg/element/image/index.md b/files/fr/web/svg/element/image/index.md index 24e230b8a4..5269b1611f 100644 --- a/files/fr/web/svg/element/image/index.md +++ b/files/fr/web/svg/element/image/index.md @@ -3,58 +3,55 @@ title: <image> slug: Web/SVG/Element/image translation_of: Web/SVG/Element/image --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément Image SVG (<image>) permet d'inclure une image matricielle dans un document SVG.</p> +L'élément Image SVG (\<image>) permet d'inclure une image matricielle dans un document SVG. -<h2 id="Contexte_dUtilisation">Contexte d'Utilisation</h2> +## Contexte d'Utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Rendu basique d'une image PNG dans un objet SVG :</p> +Rendu basique d'une image PNG dans un objet SVG : -<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 100 100" +```html +<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" /> -</svg> -</pre> + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" /> +</svg> +``` -<p>{{EmbedLiveSample("Exemple",250,260)}}</p> +{{EmbedLiveSample("Exemple",250,260)}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a> »</li> - <li><a href="/fr/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Attributs noyau</a> »</li> - <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Attributs d'événement graphique</a> »</li> - <li><a href="/fr/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Attributs Xlink</a> »</li> - <li><a href="/fr/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Attributs de présentation</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> - <li>{{ SVGAttr("transform") }}</li> -</ul> +- [Attributs de traitement conditionnel](/fr/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » +- [Attributs noyau](/fr/SVG/Attribute#Core "en/SVG/Attribute#Core") » +- [Attributs d'événement graphique](/fr/SVG/Attribute#GraphicalEvent "en/SVG/Attribute#GraphicalEvent") » +- [Attributs Xlink](/fr/SVG/Attribute#XLink "en/SVG/Attribute#XLink") » +- [Attributs de présentation](/fr/SVG/Attribute#Presentation "en/SVG/Attribute#Presentation") » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("externalResourcesRequired") }} +- {{ SVGAttr("transform") }} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{ SVGAttr("x") }}</li> - <li>{{ SVGAttr("y") }}</li> - <li>{{ SVGAttr("width") }}</li> - <li>{{ SVGAttr("height") }}</li> - <li>{{ SVGAttr("xlink:href") }}</li> - <li>{{ SVGAttr("preserveAspectRatio") }}</li> -</ul> +- {{ SVGAttr("x") }} +- {{ SVGAttr("y") }} +- {{ SVGAttr("width") }} +- {{ SVGAttr("height") }} +- {{ SVGAttr("xlink:href") }} +- {{ SVGAttr("preserveAspectRatio") }} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGImageElement" title="en/DOM/SVGImageElement">SVGImageElement</a></code>.</p> +Cet élément implémente l'interface [`SVGImageElement`](/fr/DOM/SVGImageElement "en/DOM/SVGImageElement"). -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.image")}}</p> +{{Compat("svg.elements.image")}} diff --git a/files/fr/web/svg/element/index.md b/files/fr/web/svg/element/index.md index 1b01700206..49fa8ad245 100644 --- a/files/fr/web/svg/element/index.md +++ b/files/fr/web/svg/element/index.md @@ -8,284 +8,248 @@ tags: - Références SVG - SVG - dessin - - 'l10n:priority' + - l10n:priority translation_of: Web/SVG/Element --- -<p>Les dessins et les images SVG sont créés à l'aide d'un large éventail d'éléments dédiés à la construction, au dessin et à la mise en page d'images vectorielles et de diagrammes. Vous trouverez ici la documentation de référence pour chacun des éléments SVG.</p> - -<h2 id="Éléments_SVG_de_A_à_Z">Éléments SVG de A à Z</h2> - -<h3 id="A">A</h3> - -<ul> - <li>{{SVGElement("a")}}</li> - <li>{{SVGElement("animate")}}</li> - <li>{{SVGElement("animateMotion")}}</li> - <li>{{SVGElement("animateTransform")}}</li> -</ul> - -<h3 id="C">C</h3> - -<ul> - <li>{{SVGElement("circle")}}</li> - <li>{{SVGElement("clipPath")}}</li> - <li>{{SVGElement("color-profile")}}</li> -</ul> - -<h3 id="D">D</h3> - -<ul> - <li>{{SVGElement("defs")}}</li> - <li>{{SVGElement("desc")}}</li> - <li>{{SVGElement("discard")}}</li> -</ul> - -<h3 id="E">E</h3> - -<ul> - <li>{{SVGElement("ellipse")}}</li> -</ul> - -<h3 id="F">F</h3> - -<ul> - <li>{{SVGElement("feBlend")}}</li> - <li>{{SVGElement("feColorMatrix")}}</li> - <li>{{SVGElement("feComponentTransfer")}}</li> - <li>{{SVGElement("feComposite")}}</li> - <li>{{SVGElement("feConvolveMatrix")}}</li> - <li>{{SVGElement("feDiffuseLighting")}}</li> - <li>{{SVGElement("feDisplacementMap")}}</li> - <li>{{SVGElement("feDistantLight")}}</li> - <li>{{SVGElement("feDropShadow")}}</li> - <li>{{SVGElement("feFlood")}}</li> - <li>{{SVGElement("feFuncA")}}</li> - <li>{{SVGElement("feFuncB")}}</li> - <li>{{SVGElement("feFuncG")}}</li> - <li>{{SVGElement("feFuncR")}}</li> - <li>{{SVGElement("feGaussianBlur")}}</li> - <li>{{SVGElement("feImage")}}</li> - <li>{{SVGElement("feMerge")}}</li> - <li>{{SVGElement("feMergeNode")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("fePointLight")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feSpotLight")}}</li> - <li>{{SVGElement("feTile")}}</li> - <li>{{SVGElement("feTurbulence")}}</li> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("foreignObject")}}</li> -</ul> - -<h3 id="G">G</h3> - -<ul> - <li>{{SVGElement("g")}}</li> -</ul> - -<h3 id="H">H</h3> +Les dessins et les images SVG sont créés à l'aide d'un large éventail d'éléments dédiés à la construction, au dessin et à la mise en page d'images vectorielles et de diagrammes. Vous trouverez ici la documentation de référence pour chacun des éléments SVG. -<ul> - <li>{{SVGElement("hatch")}}</li> - <li>{{SVGElement("hatchpath")}}</li> -</ul> +## Éléments SVG de A à Z -<h3 id="I">I</h3> +### A -<ul> - <li>{{SVGElement("image")}}</li> -</ul> +- {{SVGElement("a")}} +- {{SVGElement("animate")}} +- {{SVGElement("animateMotion")}} +- {{SVGElement("animateTransform")}} -<h3 id="L">L</h3> +### C -<ul> - <li>{{SVGElement("line")}}</li> - <li>{{SVGElement("linearGradient")}}</li> -</ul> +- {{SVGElement("circle")}} +- {{SVGElement("clipPath")}} +- {{SVGElement("color-profile")}} -<h3 id="M">M</h3> +### D -<ul> - <li>{{SVGElement("marker")}}</li> - <li>{{SVGElement("mask")}}</li> - <li>{{SVGElement("mesh")}}</li> - <li>{{SVGElement("meshgradient")}}</li> - <li>{{SVGElement("meshpatch")}}</li> - <li>{{SVGElement("meshrow")}}</li> - <li>{{SVGElement("metadata")}}</li> - <li>{{SVGElement("mpath")}}</li> -</ul> +- {{SVGElement("defs")}} +- {{SVGElement("desc")}} +- {{SVGElement("discard")}} -<h3 id="P">P</h3> +### E -<ul> - <li>{{SVGElement("path")}}</li> - <li>{{SVGElement("pattern")}}</li> - <li>{{SVGElement("polygon")}}</li> - <li>{{SVGElement("polyline")}}</li> -</ul> +- {{SVGElement("ellipse")}} -<h3 id="R">R</h3> +### F -<ul> - <li>{{SVGElement("radialGradient")}}</li> - <li>{{SVGElement("rect")}}</li> -</ul> +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feDistantLight")}} +- {{SVGElement("feDropShadow")}} +- {{SVGElement("feFlood")}} +- {{SVGElement("feFuncA")}} +- {{SVGElement("feFuncB")}} +- {{SVGElement("feFuncG")}} +- {{SVGElement("feFuncR")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feImage")}} +- {{SVGElement("feMerge")}} +- {{SVGElement("feMergeNode")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("fePointLight")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feSpotLight")}} +- {{SVGElement("feTile")}} +- {{SVGElement("feTurbulence")}} +- {{SVGElement("filter")}} +- {{SVGElement("foreignObject")}} -<h3 id="S">S</h3> +### G -<ul> - <li>{{SVGElement("script")}}</li> - <li>{{SVGElement("set")}}</li> - <li>{{SVGElement("solidcolor")}}</li> - <li>{{SVGElement("stop")}}</li> - <li>{{SVGElement("style")}}</li> - <li>{{SVGElement("svg")}}</li> - <li>{{SVGElement("switch")}}</li> - <li>{{SVGElement("symbol")}}</li> -</ul> +- {{SVGElement("g")}} -<h3 id="T">T</h3> +### H -<ul> - <li>{{SVGElement("text")}}</li> - <li>{{SVGElement("textPath")}}</li> - <li>{{SVGElement("title")}}</li> - <li>{{SVGElement("tspan")}}</li> -</ul> +- {{SVGElement("hatch")}} +- {{SVGElement("hatchpath")}} -<h3 id="U">U</h3> +### I -<ul> - <li>{{SVGElement("unknown")}}</li> - <li>{{SVGElement("use")}}</li> -</ul> +- {{SVGElement("image")}} -<h3 id="V">V</h3> +### L -<ul> - <li>{{SVGElement("view")}}</li> -</ul> +- {{SVGElement("line")}} +- {{SVGElement("linearGradient")}} -<h2 id="Les_éléments_SVG_par_catégories">Les éléments SVG par catégories</h2> +### M -<h3 id="Éléments_danimation">Éléments d'animation</h3> +- {{SVGElement("marker")}} +- {{SVGElement("mask")}} +- {{SVGElement("mesh")}} +- {{SVGElement("meshgradient")}} +- {{SVGElement("meshpatch")}} +- {{SVGElement("meshrow")}} +- {{SVGElement("metadata")}} +- {{SVGElement("mpath")}} -<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> +### P -<h3 id="Formes_simples">Formes simples</h3> +- {{SVGElement("path")}} +- {{SVGElement("pattern")}} +- {{SVGElement("polygon")}} +- {{SVGElement("polyline")}} -<p>{{ SVGElement("circle") }}, {{ SVGElement("ellipse") }}, {{ SVGElement("line") }}, {{SVGElement("polygon") }}, {{ SVGElement("polyline") }}, {{ SVGElement("rect") }}</p> +### R -<h3 id="Éléments_conteneurs">Éléments conteneurs</h3> +- {{SVGElement("radialGradient")}} +- {{SVGElement("rect")}} -<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> +### S -<h3 id="Éléments_descriptifs">Éléments descriptifs</h3> +- {{SVGElement("script")}} +- {{SVGElement("set")}} +- {{SVGElement("solidcolor")}} +- {{SVGElement("stop")}} +- {{SVGElement("style")}} +- {{SVGElement("svg")}} +- {{SVGElement("switch")}} +- {{SVGElement("symbol")}} -<p>{{SVGElement("desc") }}, {{ SVGElement("metadata") }}, {{ SVGElement("title") }}</p> +### T -<h3 id="Éléments_primitives_de_filtre">Éléments primitives de filtre</h3> +- {{SVGElement("text")}} +- {{SVGElement("textPath")}} +- {{SVGElement("title")}} +- {{SVGElement("tspan")}} -<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> +### U -<h3 id="Éléments_pour_polices_de_caractères">Éléments pour polices de caractères</h3> +- {{SVGElement("unknown")}} +- {{SVGElement("use")}} -<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> +### V -<h3 id="Éléments_de_dégradés">Éléments de dégradés</h3> +- {{SVGElement("view")}} -<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> +## Les éléments SVG par catégories -<h3 id="Éléments_graphiques">Éléments graphiques</h3> +### Éléments d'animation -<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> +{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}} -<h3 id="Éléments_de_référencement_graphique">Éléments de référencement graphique</h3> +### Formes simples -<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p> +{{ SVGElement("circle") }}, {{ SVGElement("ellipse") }}, {{ SVGElement("line") }}, {{SVGElement("polygon") }}, {{ SVGElement("polyline") }}, {{ SVGElement("rect") }} -<h3 id="Éléments_de_source_de_lumière">Éléments de source de lumière</h3> +### Éléments conteneurs -<p>{{ SVGElement("feDistantLight") }}, {{ SVGElement("fePointLight") }}, {{ SVGElement("feSpotLight") }}</p> +{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}} -<h3 id="Éléments_sans‑rendu">Éléments sans‑rendu</h3> +### Éléments descriptifs -<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p> +{{SVGElement("desc") }}, {{ SVGElement("metadata") }}, {{ SVGElement("title") }} -<h3 id="Éléments_de_service_pour_peinture">Éléments de service pour peinture</h3> +### Éléments primitives de filtre -<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p> +{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}} -<h3 id="Éléments_avec_rendu">Éléments avec rendu</h3> +### Éléments pour polices de caractères -<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}</p> +{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}} -<h3 id="Éléments_de_formes">Éléments de formes</h3> +### Éléments de dégradés -<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> +{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}} -<h3 id="Éléments_structurels">Éléments structurels</h3> +### Éléments graphiques -<p>{{ SVGElement("defs") }}, {{ SVGElement("g") }}, {{ SVGElement("svg") }}, {{SVGElement("symbol") }}, {{ SVGElement("use") }}</p> +{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}} -<h3 id="Éléments_de_contenu_textuel">Éléments de contenu textuel</h3> +### Éléments de référencement graphique -<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> +{{SVGElement("mesh")}}, {{SVGElement("use")}} -<h3 id="Éléments_de_contenu_textuel_enfant">Éléments de contenu textuel enfant</h3> +### Éléments de source de lumière -<p>{{ SVGElement("altGlyph") }}, {{ SVGElement("textPath") }}, {{ SVGElement("tref") }}, {{SVGElement("tspan") }}</p> +{{ SVGElement("feDistantLight") }}, {{ SVGElement("fePointLight") }}, {{ SVGElement("feSpotLight") }} -<h3 id="Éléments_non_catégorisés">Éléments non catégorisés</h3> +### Éléments sans‑rendu -<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> +{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}} -<h2 id="Élements_obsolètes_et_dépréciés">Élements obsolètes et dépréciés</h2> +### Éléments de service pour peinture -<div class="warning"> -<p><strong>Attention :</strong> Les éléments ci-dessous sont dépréciés et ne doivent pas être utilisés. <strong>Vous ne devez absolument pas les utiliser dans des nouveux projets, et vous devez dans la mesure du possible les remplacer dans les vieux projets.</strong> Ils sont listés là uniquemnt à titre informatif.</p> -</div> +{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}} -<h3 id="A_2">A</h3> +### Éléments avec rendu -<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p> +{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}} -<h3 id="C_2">C</h3> +### Éléments de formes -<p>{{SVGElement("cursor")}}</p> +{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}} -<h3 id="F_2">F</h3> +### Éléments structurels -<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p> +{{ SVGElement("defs") }}, {{ SVGElement("g") }}, {{ SVGElement("svg") }}, {{SVGElement("symbol") }}, {{ SVGElement("use") }} -<h3 id="G_2">G</h3> +### Éléments de contenu textuel -<p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p> +{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}} -<h3 id="H_2">H</h3> +### Éléments de contenu textuel enfant -<p>{{SVGElement("hkern")}}</p> +{{ SVGElement("altGlyph") }}, {{ SVGElement("textPath") }}, {{ SVGElement("tref") }}, {{SVGElement("tspan") }} -<h3 id="M_2">M</h3> +### Éléments non catégorisés -<p>{{SVGElement("missing-glyph")}}</p> +{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}} -<h3 id="T_2">T</h3> +## Élements obsolètes et dépréciés -<p>{{SVGElement("tref")}}</p> +> **Attention :** Les éléments ci-dessous sont dépréciés et ne doivent pas être utilisés. **Vous ne devez absolument pas les utiliser dans des nouveux projets, et vous devez dans la mesure du possible les remplacer dans les vieux projets.** Ils sont listés là uniquemnt à titre informatif. -<h3 id="V_2">V</h3> +### A -<p>{{SVGElement("vkern")}}</p> +{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}} -<h2 id="Voir_aussi">Voir aussi</h2> +### C -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute">Référence des attributs SVG</a></li> - <li><a href="/fr/docs/Web/SVG/Tutoriel">Tutoriel SVG</a></li> - <li><a href="/fr/docs/Web/API/Document_Object_Model#SVG_interfaces">Référence des interfaces avec SVG</a></li> -</ul> +{{SVGElement("cursor")}} -<p>{{SVGRef}}</p> +### F + +{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}} + +### G + +{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}} + +### H + +{{SVGElement("hkern")}} + +### M + +{{SVGElement("missing-glyph")}} + +### T + +{{SVGElement("tref")}} + +### V + +{{SVGElement("vkern")}} + +## Voir aussi + +- [Référence des attributs SVG](/fr/docs/Web/SVG/Attribute) +- [Tutoriel SVG](/fr/docs/Web/SVG/Tutoriel) +- [Référence des interfaces avec SVG](/fr/docs/Web/API/Document_Object_Model#SVG_interfaces) + +{{SVGRef}} diff --git a/files/fr/web/svg/element/line/index.md b/files/fr/web/svg/element/line/index.md index d5adf5895e..6df614027e 100644 --- a/files/fr/web/svg/element/line/index.md +++ b/files/fr/web/svg/element/line/index.md @@ -10,62 +10,60 @@ tags: - Élément(2) translation_of: Web/SVG/Element/line --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <code>line</code> est un élément de la catégorie des formes simples SVG, utilisé pour créer une ligne connectant deux points.</p> +L'élément `line` est un élément de la catégorie des formes simples SVG, utilisé pour créer une ligne connectant deux points. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2>Exemple</h2> +## Exemple -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> - <!-- Si on n'indique pas stroke, la ligne de couleur - ne sera pas visible --> -</svg></pre> + <!-- Si on n'indique pas stroke, la ligne de couleur + ne sera pas visible --> +</svg> +``` -<p>{{EmbedLiveSample('exemple', 100, 100)}}</p> +{{EmbedLiveSample('exemple', 100, 100)}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel" title="en/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> ;</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs centraux</a> ;</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique" title="en/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> ;</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation" title="en/SVG/Attribute#Presentation">Attributs de présentation </a> ;</li> - <li>{{ SVGAttr("class") }} ;</li> - <li>{{ SVGAttr("style") }} ;</li> - <li>{{ SVGAttr("externalResourcesRequired") }} ;</li> - <li>{{ SVGAttr("transform") }}.</li> -</ul> +- [Attributs conditionnels](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") ; +- [Attributs centraux](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") ; +- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique "en/SVG/Attribute#GraphicalEvent") ; +- [Attributs de présentation ](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation "en/SVG/Attribute#Presentation") ; +- {{ SVGAttr("class") }} ; +- {{ SVGAttr("style") }} ; +- {{ SVGAttr("externalResourcesRequired") }} ; +- {{ SVGAttr("transform") }}. -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{ SVGAttr("x1") }}</li> - <li>{{ SVGAttr("x2") }}</li> - <li>{{ SVGAttr("y1") }}</li> - <li>{{ SVGAttr("y2") }}</li> -</ul> +- {{ SVGAttr("x1") }} +- {{ SVGAttr("x2") }} +- {{ SVGAttr("y1") }} +- {{ SVGAttr("y2") }} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGLineElement" title="en/DOM/SVGLineElement">SVGLineElement</a></code>.</p> +Cet élément implémente l'interface [`SVGLineElement`](/fr/DOM/SVGLineElement "en/DOM/SVGLineElement"). -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.line")}}</p> +{{Compat("svg.elements.line")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ SVGElement("polygon") }} ;</li> - <li>{{ SVGElement("path") }}.</li> -</ul> +- {{ SVGElement("polygon") }} ; +- {{ SVGElement("path") }}. diff --git a/files/fr/web/svg/element/lineargradient/index.md b/files/fr/web/svg/element/lineargradient/index.md index 8dfa75792d..1d3fe8a442 100644 --- a/files/fr/web/svg/element/lineargradient/index.md +++ b/files/fr/web/svg/element/lineargradient/index.md @@ -8,91 +8,70 @@ tags: - SVG Gradient translation_of: Web/SVG/Element/linearGradient --- -<div>{{SVGRef}}</div> - -<p>L'élément <strong><code><linearGradient></code></strong> permet de définir des dégradés linéaires, qui pourront être utilisés comme remplissage ou contour des éléments SVG.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs Xlink</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("gradientUnits")}}</li> - <li>{{SVGAttr("gradientTransform")}}</li> - <li>{{SVGAttr("x1")}}</li> - <li>{{SVGAttr("y1")}}</li> - <li>{{SVGAttr("x2")}}</li> - <li>{{SVGAttr("y2")}}</li> - <li>{{SVGAttr("spreadMethod")}}</li> - <li>{{SVGAttr("xlink:href")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface {{domxref("SVGLinearGradientElement")}}.</p> - -<h2 id="Exemple">Exemple</h2> - -<pre class="brush: html"><svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> - <defs> - <linearGradient id="MyGradient"> - <stop offset="5%" stop-color="green"/> - <stop offset="95%" stop-color="gold"/> - </linearGradient> - </defs> - - <rect fill="url(#MyGradient)" - x="10" y="10" width="100" height="100"/> -</svg></pre> - -<p>{{EmbedLiveSample("Exemple", 120, 120)}}</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('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.linearGradient")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("radialGradient")}}</li> - <li>{{SVGElement("stop")}}</li> -</ul> +{{SVGRef}} + +L'élément **`<linearGradient>`** permet de définir des dégradés linéaires, qui pourront être utilisés comme remplissage ou contour des éléments SVG. + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- [Attributs Xlink](/fr/docs/Web/SVG/Attribute#Attributs_XLink) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} + +### Attributs spécifiques + +- {{SVGAttr("gradientUnits")}} +- {{SVGAttr("gradientTransform")}} +- {{SVGAttr("x1")}} +- {{SVGAttr("y1")}} +- {{SVGAttr("x2")}} +- {{SVGAttr("y2")}} +- {{SVGAttr("spreadMethod")}} +- {{SVGAttr("xlink:href")}} + +## Interface DOM + +Cet élément implémente l'interface {{domxref("SVGLinearGradientElement")}}. + +## Exemple + +```html +<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="MyGradient"> + <stop offset="5%" stop-color="green"/> + <stop offset="95%" stop-color="gold"/> + </linearGradient> + </defs> + + <rect fill="url(#MyGradient)" + x="10" y="10" width="100" height="100"/> +</svg> +``` + +{{EmbedLiveSample("Exemple", 120, 120)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | +| {{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.linearGradient")}} + +## Voir aussi + +- {{SVGElement("radialGradient")}} +- {{SVGElement("stop")}} diff --git a/files/fr/web/svg/element/marker/index.md b/files/fr/web/svg/element/marker/index.md index 6392f684b3..13bdacc627 100644 --- a/files/fr/web/svg/element/marker/index.md +++ b/files/fr/web/svg/element/marker/index.md @@ -6,126 +6,103 @@ tags: - SVG Element translation_of: Web/SVG/Element/marker --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <strong><code><marker></code></strong> définit un élément graphique qui pourra être utilisé pour dessiner des pointes de flèches ou des polymarqueurs sur un élément {{SVGElement("path")}}, {{SVGElement("line")}}, {{SVGElement("polyline")}} ou {{SVGElement("polygon")}}.</p> +L'élément **`<marker>`** définit un élément graphique qui pourra être utilisé pour dessiner des pointes de flèches ou des polymarqueurs sur un élément {{SVGElement("path")}}, {{SVGElement("line")}}, {{SVGElement("polyline")}} ou {{SVGElement("polygon")}}. -<p>Les marqueurs sont attachés aux formes à l'aide des propriétés {{SVGAttr("marker-start")}}, {{SVGAttr("marker-mid")}}, et {{SVGAttr("marker-end")}}.</p> +Les marqueurs sont attachés aux formes à l'aide des propriétés {{SVGAttr("marker-start")}}, {{SVGAttr("marker-mid")}}, et {{SVGAttr("marker-end")}}. -<h2>Exemple</h2> +## Exemple -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <defs> - <!-- Définit une pointe de flèche --> - <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <!-- Définit une pointe de flèche --> + <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" - orient="auto-start-reverse"> - <path d="M 0 0 L 10 5 L 0 10 z" /> - </marker> - - <!-- Définit un simple point --> - <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" - markerWidth="5" markerHeight="5"> - <circle cx="5" cy="5" r="5" fill="red" /> - </marker> - </defs> - - <!-- Dessine les axes des coordonnées avec des pointes de flèche à chaque bout --> - <polyline points="10,10 10,90 90,90" fill="none" stroke="black" - marker-start="url(#arrow)" marker-end="url(#arrow)" /> - - <!-- Dessine une ligne avec un simple point entre chaque segment --> - <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" - marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> -</svg></pre> - -<p>{{EmbedLiveSample('exemple', 200, 200)}}</p> - -<h2 id="Attributs">Attributs</h2> - -<dl> - <dt>{{SVGAttr("markerHeight")}}</dt> - <dd>Définit la hauteur du viewport du marqueur.<br> - <small><em>Valeur</em>: <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> ; <em>Valeur par défaut</em>: <code>3</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("markerUnits")}}</dt> - <dd>Définit le système de coordnnées pour les attributs <code>markerWidth</code>, <code>markerHeight</code> et le contenu du <code><marker></code>.<br> - <small><em>Valeur</em>: <code>userSpaceOnUse</code>|<code>strokeWidth</code> ; <em>Valeur par défaut</em>: <code>strokeWidth</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("markerWidth")}}</dt> - <dd>Définit la largeur du viewport du marqueur.<br> - <small><em>Valeur</em>: <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> ; <em>Valeur par défaut</em>: <code>3</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("orient")}}</dt> - <dd>Définit l'orientation du marqueur relativement à la forme à laquelle il est attaché.<br> - <small><em>Valeur</em>: <code>auto</code>|<code>auto-start-reverse</code>|<strong><a href="/docs/Web/SVG/Content_type#Angle"><angle></a></strong> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("preserveAspectRatio")}}</dt> - <dd>Définit comment le fragment svg doit être déformé s'il est incorporé dans un conteneur avec un rapport hauteur:largeur différent de celui du marqueur.<br> - <small><em>Valeur</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Valeur par défaut</em>: <code>xMidYMid meet</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("refX")}}</dt> - <dd>Définit la coordonnées x du point de référence du marqueur.<br> - <small><em>Valeur</em>: <code>left</code>|<code>center</code>|<code>right</code>|<strong><a href="/docs/Web/SVG/Content_type#Coordinate"><coordinate></a></strong> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("refY")}}</dt> - <dd>Définit la coordonnées y du point de référence du marqueur.<br> - <small><em>Valeur</em>: <code>top</code>|<code>center</code>|<code>bottom</code>|<strong><a href="/docs/Web/SVG/Content_type#Coordinate"><coordinate></a></strong> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("viewBox")}}</dt> - <dd>Définit la limite de la zone de dessin pour le fragment SVG.<br> - <small><em>Valeur</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Valeur par défaut</em>: none; <em>Animation</em>: <strong>oui</strong></small></dd> -</dl> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<dl> - <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt> - <dd><small>Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> - <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> - <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> - <dd><small>Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> - <dt>Attributs ARIA</dt> - <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> -</dl> - -<h2 id="Notes_d'usage">Notes d'usage</h2> - -<p>{{svginfo}}</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("SVG Markers", "#MarkerElement", "<marker>")}}</td> - <td>{{Spec2("SVG Markers")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("SVG2", "painting.html#MarkerElement", "<marker>")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#MarkerElement", "<marker>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.marker")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Propriétés liées aux marqueurs: {{SVGAttr("marker-start")}}, {{SVGAttr("marker-mid")}}, et {{SVGAttr("marker-end")}}</li> -</ul> + orient="auto-start-reverse"> + <path d="M 0 0 L 10 5 L 0 10 z" /> + </marker> + + <!-- Définit un simple point --> + <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" + markerWidth="5" markerHeight="5"> + <circle cx="5" cy="5" r="5" fill="red" /> + </marker> + </defs> + + <!-- Dessine les axes des coordonnées avec des pointes de flèche à chaque bout --> + <polyline points="10,10 10,90 90,90" fill="none" stroke="black" + marker-start="url(#arrow)" marker-end="url(#arrow)" /> + + <!-- Dessine une ligne avec un simple point entre chaque segment --> + <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" + marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> +</svg> +``` + +{{EmbedLiveSample('exemple', 200, 200)}} + +## Attributs + +- {{SVGAttr("markerHeight")}} + - : Définit la hauteur du viewport du marqueur. + _Valeur_: **[\<length>](/docs/Web/SVG/Content_type#Length)** ; _Valeur par défaut_: `3`; _Animation_: **oui** +- {{SVGAttr("markerUnits")}} + - : Définit le système de coordnnées pour les attributs `markerWidth`, `markerHeight` et le contenu du `<marker>`. + _Valeur_: `userSpaceOnUse`|`strokeWidth` ; _Valeur par défaut_: `strokeWidth`; _Animation_: **oui** +- {{SVGAttr("markerWidth")}} + - : Définit la largeur du viewport du marqueur. + _Valeur_: **[\<length>](/docs/Web/SVG/Content_type#Length)** ; _Valeur par défaut_: `3`; _Animation_: **oui** +- {{SVGAttr("orient")}} + - : Définit l'orientation du marqueur relativement à la forme à laquelle il est attaché. + _Valeur_: `auto`|`auto-start-reverse`|**[\<angle>](/docs/Web/SVG/Content_type#Angle)** ; _Valeur par défaut_: `0`; _Animation_: **oui** +- {{SVGAttr("preserveAspectRatio")}} + - : Définit comment le fragment svg doit être déformé s'il est incorporé dans un conteneur avec un rapport hauteur:largeur différent de celui du marqueur. + _Valeur_: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; _Valeur par défaut_: `xMidYMid meet`; _Animation_: **oui** +- {{SVGAttr("refX")}} + - : Définit la coordonnées x du point de référence du marqueur. + _Valeur_: `left`|`center`|`right`|**[\<coordinate>](/docs/Web/SVG/Content_type#Coordinate)** ; _Valeur par défaut_: `0`; _Animation_: **oui** +- {{SVGAttr("refY")}} + - : Définit la coordonnées y du point de référence du marqueur. + _Valeur_: `top`|`center`|`bottom`|**[\<coordinate>](/docs/Web/SVG/Content_type#Coordinate)** ; _Valeur par défaut_: `0`; _Animation_: **oui** +- {{SVGAttr("viewBox")}} + - : Définit la limite de la zone de dessin pour le fragment SVG. + _Valeur_: **[\<list-of-numbers>](/docs/Web/SVG/Content_type#List-of-Ts)** ; _Valeur par défaut_: none; _Animation_: **oui** + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute/Core) + - : Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute/Conditional_Processing) + - : Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) + - : Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- Attributs ARIA + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Notes d'usage + +{{svginfo}} + +## Spécifications + +| Sp"cification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("SVG Markers", "#MarkerElement", "<marker>")}} | {{Spec2("SVG Markers")}} | | +| {{SpecName("SVG2", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG2")}} | | +| {{SpecName("SVG1.1", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.marker")}} + +## Voir aussi + +- Propriétés liées aux marqueurs: {{SVGAttr("marker-start")}}, {{SVGAttr("marker-mid")}}, et {{SVGAttr("marker-end")}} diff --git a/files/fr/web/svg/element/mask/index.md b/files/fr/web/svg/element/mask/index.md index 20f0088b0d..5341381e54 100644 --- a/files/fr/web/svg/element/mask/index.md +++ b/files/fr/web/svg/element/mask/index.md @@ -9,104 +9,85 @@ tags: - SVG Container translation_of: Web/SVG/Element/mask --- -<div>{{SVGRef}}</div> - -<p>L'élément <strong><code><mask></code></strong> définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}.</p> - -<p>Le masque permet de rendre des zones de l'élément sur lequel est appliqué (semi-)transparentes. On peut par exemple créer un effet de fondu en utilisant un dégradé, ce que le détourage ({{SVGElement('clipPath')}}) ne permet pas.</p> - -<h2>Exemple</h2> - -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> - -<pre class="brush: html"><svg viewBox="-10 -10 120 120"> - <mask id="myMask"> - <!-- Tous les pixels blancs sont visibles --> - <rect x="0" y="0" width="100" height="100" fill="white" /> - - <!-- Tous les pixels noirs sont invisibles --> - <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" /> - </mask> - - <polygon points="-10,110 110,110 110,-10" fill="orange" /> - - <!-- Avec ce masque, on "perfore" un trou en forme de coeur à l'intérieur du cercle --> - <circle cx="50" cy="50" r="50" mask="url(#myMask)" /> -</svg></pre> - -<p>{{EmbedLiveSample('exemple', 100, 100)}}</p> - -<h2 id="Attributs">Attributs</h2> - -<dl> - <dt>{{SVGAttr("height")}}</dt> - <dd>Définit la hauteur du masque.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; Valeur par défaut: <code>120%</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("maskContentUnits")}}</dt> - <dd>Définit le système de coordonnées pour le contenu du <code><mask></code>.<br> - <small><em>Valeur</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Valeur par défaut</em>: <code>userSpaceOnUse</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("maskUnits")}}</dt> - <dd>Définit le système de coordonnées pour les attributs {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}} et {{SVGAttr("height")}} du <code><mask></code>.<br> - <small><em>Valeur</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Valeur par défaut</em>: <code>objectBoundingBox</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("x")}}</dt> - <dd>Définit la coordonnée de l'axe x du coin supérieur gauche du masque.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Valeur par défaut</em>: <code>-10%</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("y")}}</dt> - <dd>Définit la coordonnée de l'axe y du coin supérieur gauche du masque.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Valeur par défaut</em>: <code>-10%</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("width")}}</dt> - <dd>Définit la largeur du masque.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; Valeur par défaut: <code>120%</code>; <em>Animation</em>: <strong>oui</strong></small></dd> -</dl> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<dl> - <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt> - <dd><small>Notamment: {{SVGAttr('id')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> - <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> - <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> - <dd><small>Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> -</dl> - -<h2 id="Notes_d'usage">Notes d'usage</h2> - -<p>{{svginfo}}</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('CSS Masks', '#MaskElement', '<mask>')}}</td> - <td>{{Spec2('CSS Masks')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.mask")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Élément de détourage: {{SVGElement("clipPath")}}</li> - <li>Propriétés CSS de masque: {{cssxref("mask")}}, {{cssxref("mask-image")}},{{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-composite")}}, {{cssxref("mask-size")}}, {{cssxref("pointer-events")}}</li> -</ul> +{{SVGRef}} + +L'élément **`<mask>`** définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}. + +Le masque permet de rendre des zones de l'élément sur lequel est appliqué (semi-)transparentes. On peut par exemple créer un effet de fondu en utilisant un dégradé, ce que le détourage ({{SVGElement('clipPath')}}) ne permet pas. + +## Exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="-10 -10 120 120"> + <mask id="myMask"> + <!-- Tous les pixels blancs sont visibles --> + <rect x="0" y="0" width="100" height="100" fill="white" /> + + <!-- Tous les pixels noirs sont invisibles --> + <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" /> + </mask> + + <polygon points="-10,110 110,110 110,-10" fill="orange" /> + + <!-- Avec ce masque, on "perfore" un trou en forme de coeur à l'intérieur du cercle --> + <circle cx="50" cy="50" r="50" mask="url(#myMask)" /> +</svg> +``` + +{{EmbedLiveSample('exemple', 100, 100)}} + +## Attributs + +- {{SVGAttr("height")}} + - : Définit la hauteur du masque. + _Valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length) ; Valeur par défaut: `120%`; _Animation_: **oui** +- {{SVGAttr("maskContentUnits")}} + - : Définit le système de coordonnées pour le contenu du `<mask>`. + _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `userSpaceOnUse`; _Animation_: **oui** +- {{SVGAttr("maskUnits")}} + - : Définit le système de coordonnées pour les attributs {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}} et {{SVGAttr("height")}} du `<mask>`. + _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `objectBoundingBox`; _Animation_: **oui** +- {{SVGAttr("x")}} + - : Définit la coordonnée de l'axe x du coin supérieur gauche du masque. + _Valeur_: [**\<coordinate>**](/docs/Web/SVG/Content_type#Coordinate) ; _Valeur par défaut_: `-10%`; _Animation_: **oui** +- {{SVGAttr("y")}} + - : Définit la coordonnée de l'axe y du coin supérieur gauche du masque. + _Valeur_: [**\<coordinate>**](/docs/Web/SVG/Content_type#Coordinate) ; _Valeur par défaut_: `-10%`; _Animation_: **oui** +- {{SVGAttr("width")}} + - : Définit la largeur du masque. + _Valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length) ; Valeur par défaut: `120%`; _Animation_: **oui** + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute/Core) + - : Notamment: {{SVGAttr('id')}} +- [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute/Conditional_Processing) + - : Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) + - : Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} + +## Notes d'usage + +{{svginfo}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | +| {{SpecName('CSS Masks', '#MaskElement', '<mask>')}} | {{Spec2('CSS Masks')}} | | +| {{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.mask")}} + +## Voir aussi + +- Élément de détourage: {{SVGElement("clipPath")}} +- Propriétés CSS de masque: {{cssxref("mask")}}, {{cssxref("mask-image")}},{{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-composite")}}, {{cssxref("mask-size")}}, {{cssxref("pointer-events")}} diff --git a/files/fr/web/svg/element/metadata/index.md b/files/fr/web/svg/element/metadata/index.md index 63cf72721a..329fcc2a5c 100644 --- a/files/fr/web/svg/element/metadata/index.md +++ b/files/fr/web/svg/element/metadata/index.md @@ -7,55 +7,36 @@ tags: - SVG Description translation_of: Web/SVG/Element/metadata --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><metadata></code></strong> permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise <code><metadata></code> doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, <a href="https://fr.wikipedia.org/wiki/FOAF">FOAF</a>, etc.</p> +L'élément [SVG](/fr/docs/Web/SVG) **`<metadata>`** permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise `<metadata>` doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, [FOAF](https://fr.wikipedia.org/wiki/FOAF), etc. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Événements_globaux">Attributs d'événements globaux</a></li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs d'événements globaux](/fr/docs/Web/SVG/Attribute#Événements_globaux) -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<p><em>Aucun</em></p> +_Aucun_ -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGMetadataElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGMetadataElement")}}. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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('SVG2', 'struct.html#MetadataElement', '<metadata>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td>Autorise les attributs d'événements globaux sur l'élément.</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'metadata.html#MetadataElement', '<metadata>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------- | +| {{SpecName('SVG2', 'struct.html#MetadataElement', '<metadata>')}} | {{Spec2('SVG2')}} | Autorise les attributs d'événements globaux sur l'élément. | +| {{SpecName('SVG1.1', 'metadata.html#MetadataElement', '<metadata>')}} | {{Spec2('SVG1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.metadata")}}</p> +{{Compat("svg.elements.metadata")}} diff --git a/files/fr/web/svg/element/mpath/index.md b/files/fr/web/svg/element/mpath/index.md index ced9f15518..ad95906c77 100644 --- a/files/fr/web/svg/element/mpath/index.md +++ b/files/fr/web/svg/element/mpath/index.md @@ -7,100 +7,78 @@ tags: - SVG Animation translation_of: Web/SVG/Element/mpath --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <strong><code><mpath></code></strong> se place dans un élément {{SVGElement("animateMotion")}}, il permet de référencer un élément {{SVGElement("path")}} pour définir le chemin utilisé par l'animation.</p> +L'élément **`<mpath>`** se place dans un élément {{SVGElement("animateMotion")}}, il permet de référencer un élément {{SVGElement("path")}} pour définir le chemin utilisé par l'animation. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink" title="en/SVG/Attribute#XLink">Attributs Xlink</a></li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") +- [Attributs Xlink](/fr/docs/Web/SVG/Attribute#Attributs_XLink "en/SVG/Attribute#XLink") +- {{SVGAttr("externalResourcesRequired")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("xlink:href")}}</li> -</ul> +- {{SVGAttr("xlink:href")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGMPathElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGMPathElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html; highlight[23]"><svg width="100%" height="100%" viewBox="0 0 500 300" +```html +<svg width="100%" height="100%" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink" > + xmlns:xlink="http://www.w3.org/1999/xlink" > - <rect x="1" y="1" width="498" height="298" - fill="none" stroke="blue" stroke-width="2" /> + <rect x="1" y="1" width="498" height="298" + fill="none" stroke="blue" stroke-width="2" /> - <!-- Affiche le chemin en bleu avec trois cercles - au début, au milieu et à la fin du chemin --> - <path id="path1" d="M100,250 C 100,50 400,50 400,250" - fill="none" stroke="blue" stroke-width="7.06" /> - <circle cx="100" cy="250" r="17.64" fill="blue" /> - <circle cx="250" cy="100" r="17.64" fill="blue" /> - <circle cx="400" cy="250" r="17.64" fill="blue" /> + <!-- Affiche le chemin en bleu avec trois cercles + au début, au milieu et à la fin du chemin --> + <path id="path1" d="M100,250 C 100,50 400,50 400,250" + fill="none" stroke="blue" stroke-width="7.06" /> + <circle cx="100" cy="250" r="17.64" fill="blue" /> + <circle cx="250" cy="100" r="17.64" fill="blue" /> + <circle cx="400" cy="250" r="17.64" fill="blue" /> - <!-- Triangle qui sera déplacé le long du chemin. + <!-- Triangle qui sera déplacé le long du chemin. Il est définit avec une orientation verticale, la base du triangle - est centrée horizontalement juste au-dessus de l'origine. --> - <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" - fill="yellow" stroke="red" stroke-width="7.06" > - <!-- Référence le path à utiliser --> - <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > - <mpath xlink:href="#path1"/> - </animateMotion> - </path> -</svg> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemple", 250, 165)}}</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("SVG Animations 2", "#MPathElement", "<mpath>")}}</td> - <td>{{Spec2("SVG Animations 2")}}</td> - <td>Aucun changement</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "animate.html#MPathElement", "<mpath>")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.mpath")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("animateMotion")}}</li> -</ul> + est centrée horizontalement juste au-dessus de l'origine. --> + <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" + fill="yellow" stroke="red" stroke-width="7.06" > + <!-- Référence le path à utiliser --> + <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > + <mpath xlink:href="#path1"/> + </animateMotion> + </path> +</svg> +``` + +### Résultat + +{{EmbedLiveSample("Exemple", 250, 165)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- | +| {{SpecName("SVG Animations 2", "#MPathElement", "<mpath>")}} | {{Spec2("SVG Animations 2")}} | Aucun changement | +| {{SpecName("SVG1.1", "animate.html#MPathElement", "<mpath>")}} | {{Spec2("SVG1.1")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.mpath")}} + +## Voir aussi + +- {{SVGElement("animateMotion")}} diff --git a/files/fr/web/svg/element/path/index.md b/files/fr/web/svg/element/path/index.md index 9727d692be..bf0e4eb14c 100644 --- a/files/fr/web/svg/element/path/index.md +++ b/files/fr/web/svg/element/path/index.md @@ -5,65 +5,60 @@ tags: - SVG translation_of: Web/SVG/Element/path --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <code>path</code> est l'élément générique pour définir une forme. Toutes les formes basiques peuvent aussi être faites à partir de <code>path</code>.</p> +L'élément `path` est l'élément générique pour définir une forme. Toutes les formes basiques peuvent aussi être faites à partir de `path`. -<h2 id="Usage">Usage</h2> +## Usage -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: xml"><?xml version="1.0" standalone="no"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" - "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg width="100%" height="100%" viewBox="0 0 400 400" - xmlns="http://www.w3.org/2000/svg" version="1.1"> +```xml +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="100%" height="100%" viewBox="0 0 400 400" + xmlns="http://www.w3.org/2000/svg" version="1.1"> - <path d="M 100 100 L 300 100 L 200 300 z" - fill="red" stroke-width="3" /> -</svg> -</pre> + <path d="M 100 100 L 300 100 L 200 300 z" + fill="red" stroke-width="3" /> +</svg> +``` -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_Globaux">Attributs Globaux</h3> +### Attributs Globaux -<ul> - <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="fr/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> »</li> - <li><a href="/fr/SVG/Attribute#Core" title="fr/SVG/Attribute#Core">Attributs centraux</a> »</li> - <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="fr/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li> - <li><a href="/fr/SVG/Attribute#Presentation" title="fr/SVG/Attribute#Presentation">Attributs de présentation</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> - <li>{{ SVGAttr("transform") }}</li> -</ul> +- [Attributs conditionnels](/fr/SVG/Attribute#ConditionalProccessing "fr/SVG/Attribute#ConditionalProccessing") » +- [Attributs centraux](/fr/SVG/Attribute#Core "fr/SVG/Attribute#Core") » +- [Attributs d'événements graphiques](/fr/SVG/Attribute#GraphicalEvent "fr/SVG/Attribute#GraphicalEvent") » +- [Attributs de présentation](/fr/SVG/Attribute#Presentation "fr/SVG/Attribute#Presentation") » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("externalResourcesRequired") }} +- {{ SVGAttr("transform") }} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{ SVGAttr("d") }}</li> - <li>{{ SVGAttr("pathLength") }}</li> -</ul> +- {{ SVGAttr("d") }} +- {{ SVGAttr("pathLength") }} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGPathElement" title="en/DOM/SVGPathElement">SVGPathElement</a></code>.</p> +Cet élément implémente l'interface [`SVGPathElement`](/fr/DOM/SVGPathElement "en/DOM/SVGPathElement"). -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.path")}}</p> +{{Compat("svg.elements.path")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>{{ SVGElement("circle") }}</li> - <li>{{ SVGElement("ellipse") }}</li> - <li>{{ SVGElement("line") }}</li> - <li>{{ SVGElement("polygon") }}</li> - <li>{{ SVGElement("polyline") }}</li> - <li>{{ SVGElement("rect") }}</li> - <li><a href="/fr/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li> -</ul> +- {{ SVGElement("circle") }} +- {{ SVGElement("ellipse") }} +- {{ SVGElement("line") }} +- {{ SVGElement("polygon") }} +- {{ SVGElement("polyline") }} +- {{ SVGElement("rect") }} +- [The MDN SVG "Getting Started" tutorial : Path](/fr/SVG/Tutorial/Paths "en/SVG/Tutorial/Paths") diff --git a/files/fr/web/svg/element/pattern/index.md b/files/fr/web/svg/element/pattern/index.md index e15af97156..06c05cfa7a 100644 --- a/files/fr/web/svg/element/pattern/index.md +++ b/files/fr/web/svg/element/pattern/index.md @@ -5,95 +5,95 @@ tags: - Element - SVG - SVG Container -browser-compat: svg.elements.pattern translation_of: Web/SVG/Element/pattern +browser-compat: svg.elements.pattern --- -<div>{{SVGRef}}</div> - -<p>L'élément <strong><code><pattern></code></strong> définit un objet graphique qui peut être redessiné à des intervalles de coordonnées x et y répétés ("en mosaïque") pour couvrir une surface.</p> - -<p>Le <strong><code><pattern></code></strong> est référéne par les attributs {{SVGAttr("fill")}} et {{SVGAttr("stroke")}} sur les autres éléments graphiques, pour appliquer un remplissage ou une bordure sur ces éléments avec le motif référencé.</p> - -<h2>Exemple</h2> - -<pre class="brush: css hidden">html, body, svg { height: 100% }</pre> - -<pre class="brush: html"><svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> - <defs> - <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"> - <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> - </pattern> - </defs> - - <circle cx="50" cy="50" r="50" fill="url(#star)"/> - <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> -</svg></pre> - -<p>{{EmbedLiveSample('exemple', 150, '100%')}}</p> - -<h2 id="attributes">Attributs</h2> - -<dl> - <dt>{{SVGAttr("height")}}</dt> - <dd>Cet attribut détermine la hauteur du motif de mosaïque.<br> - <small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#Length"><strong><longueur></strong></a>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><strong><pourcentage></strong></a>; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable </em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("href")}}</dt> - <dd>Cet attribut référence un patron de motif qui fournit les valeurs par défaut des attributs de l'élément <code><pattern></code>.<br> - <small><em>Type de valeur</em>: <a href="/fr/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("patternContentUnits")}}</dt> - <dd><p>Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}. <small><em>Type de valeur </em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Valeur par défaut </em>: <code>userSpaceOnUse</code>; <em>Animable</em>: <strong>yes</strong></small></p> - <div class="note"> - <p><strong>Note :</strong> Cet attribut n'a pas d'effet si l'attribut <code>viewBox</code> est définit sur l'élément <code><pattern></code>.</p> -</div> - </dd> - <dt>{{SVGAttr("patternTransform")}}</dt> - <dd><p>Cet attribut contient la définition d'une transformation optionnelle supplémentaire du système de coordonnées du motif vers celui de la cible. <small><em>Type de valeur </em>: <strong><a href="/fr/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></p></dd> - <dt>{{SVGAttr("patternUnits")}}</dt> - <dd><p>Cet attribut définit le système de coordonnées pour les attributs <code>x</code>, <code>y</code>, <code>width</code> , et <code>height</code>.<small><em>Type de valeur </em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Valeur par défaut </em>: <code>objectBoundingBox</code>; <em>Animable</em>: <strong>yes</strong></small></p></dd> - <dt>{{SVGAttr("preserveAspectRatio")}}</dt> - <dd><p>Cet attribut définit comme le fragment SVG doit être déformé s'il est embarqué dans un conteneur avec un ratio d'aspect différent. - <small><em>Type de valeur </em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Valeur par défaut </em>: <code>xMidYMid meet</code>; <em>Animable</em>: <strong>yes</strong></small></p></dd> - <dt>{{SVGAttr("viewBox")}}</dt> - <dd><p>Cet attribut définit les limites de la fenêtre de rendu du SVG pour le fragment du motif.<small><em>Type de valeur </em>: <strong><a href="/fr/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Valeur par défaut </em>: none; <em>Animable</em>: <strong>yes</strong></small></p></dd> - <dt>{{SVGAttr("width")}}</dt> - <dd><p>Cet attribut détermine la largeur du motif de mosaïque.<br> - <small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable</em>: <strong>yes</strong></small></p></dd> - <dt>{{SVGAttr("x")}}</dt> - <dd><p>Cet attribut détermine le déplacement en coordonnée x du motif de mosaïque.<small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> - <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> - <dd>Cet attribut référence un patron de motif qui fournit des valeurs par défaut pour les attributs du <code><pattern></code>.<br> - <small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animable</em>: <strong>yes</strong></small></p> - <div class="note"> - <p><strong>Note :</strong> Pour les navigateurs implémentant <code>href</code>, si à la fois <code>href</code> et <code>xlink:href</code> sont définis, <code>xlink:href</code> sera ignoré et seulement <code>href</code> sera utilisé.</p> - </div> - </dd> - <dt>{{SVGAttr("y")}}</dt> - <dd><p>Cet attribut détermine le déplacement en coordonnée y du motif de mosaïque. <small><em>Type de valeur </em>: <a href="/fr/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/fr/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable</em>: <strong>yes</strong></small></p></dd> -</dl> - -<h3 id="global_attributes">Attributs globaux</h3> - -<dl> -<dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs principaux</a></dt> - <dd><small>Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> - <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt> - <dd><small>Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> - <dd><small>Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> - <dt>Attributs XLink</dt> - <dd><small>Plus notamment : {{SVGAttr("xlink:title")}}</small></dd> -</dl> - -<h2 id="usage_notes">Notes d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="specifications">Spécifications</h2> +{{SVGRef}} + +L'élément **`<pattern>`** définit un objet graphique qui peut être redessiné à des intervalles de coordonnées x et y répétés ("en mosaïque") pour couvrir une surface. + +Le **`<pattern>`** est référéne par les attributs {{SVGAttr("fill")}} et {{SVGAttr("stroke")}} sur les autres éléments graphiques, pour appliquer un remplissage ou une bordure sur ces éléments avec le motif référencé. + +## Exemple + +```css hidden +html, body, svg { height: 100% } +``` + +```html +<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"> + <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> + </pattern> + </defs> + + <circle cx="50" cy="50" r="50" fill="url(#star)"/> + <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> +</svg> +``` + +{{EmbedLiveSample('exemple', 150, '100%')}} + +## Attributs + +- {{SVGAttr("height")}} + - : Cet attribut détermine la hauteur du motif de mosaïque. + _Type de valeur_ : [**\<longueur>**](/fr/docs/Web/SVG/Content_type#Length)|[**\<pourcentage>**](/fr/docs/Web/SVG/Content_type#Percentage); _Valeur par défaut_ : `0`; _Animable_ : **oui** +- {{SVGAttr("href")}} + - : Cet attribut référence un patron de motif qui fournit les valeurs par défaut des attributs de l'élément `<pattern>`. + _Type de valeur_: [**\<URL>**](/fr/docs/Web/SVG/Content_type#URL); _Valeur par défaut_ : _none_; _Animable_: **yes** +- {{SVGAttr("patternContentUnits")}} + + - : Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}. _Type de valeur_ : `userSpaceOnUse`|`objectBoundingBox`; _Valeur par défaut_ : `userSpaceOnUse`; _Animable_: **yes** + + > **Note :** Cet attribut n'a pas d'effet si l'attribut `viewBox` est définit sur l'élément `<pattern>`. + +- {{SVGAttr("patternTransform")}} + - : Cet attribut contient la définition d'une transformation optionnelle supplémentaire du système de coordonnées du motif vers celui de la cible. _Type de valeur_ : **[\<transform-list>](/fr/docs/Web/SVG/Content_type#Transform-list)**; _Valeur par défaut_ : _none_; _Animatable_: **yes** +- {{SVGAttr("patternUnits")}} + - : Cet attribut définit le système de coordonnées pour les attributs `x`, `y`, `width` , et `height`._Type de valeur_ : `userSpaceOnUse`|`objectBoundingBox`; _Valeur par défaut_ : `objectBoundingBox`; _Animable_: **yes** +- {{SVGAttr("preserveAspectRatio")}} + - : Cet attribut définit comme le fragment SVG doit être déformé s'il est embarqué dans un conteneur avec un ratio d'aspect différent. + _Type de valeur_ : (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; _Valeur par défaut_ : `xMidYMid meet`; _Animable_: **yes** +- {{SVGAttr("viewBox")}} + - : Cet attribut définit les limites de la fenêtre de rendu du SVG pour le fragment du motif._Type de valeur_ : **[\<list-of-numbers>](/fr/docs/Web/SVG/Content_type#List-of-Ts)** ; _Valeur par défaut_ : none; _Animable_: **yes** +- {{SVGAttr("width")}} + - : Cet attribut détermine la largeur du motif de mosaïque. + _Type de valeur_ : [**\<length>**](/fr/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/fr/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_ : `0`; _Animable_: **yes** +- {{SVGAttr("x")}} + - : Cet attribut détermine le déplacement en coordonnée x du motif de mosaïque._Type de valeur_ : [**\<length>**](/fr/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/fr/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_ : `0`; _Animatable_: **yes** +- {{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}} + + - : Cet attribut référence un patron de motif qui fournit des valeurs par défaut pour les attributs du `<pattern>`. + _Type de valeur_ : [**\<URL>**](/fr/docs/Web/SVG/Content_type#URL); _Valeur par défaut_ : _none_; _Animable_: **yes** + + > **Note :** Pour les navigateurs implémentant `href`, si à la fois `href` et `xlink:href` sont définis, `xlink:href` sera ignoré et seulement `href` sera utilisé. + +- {{SVGAttr("y")}} + - : Cet attribut détermine le déplacement en coordonnée y du motif de mosaïque. _Type de valeur_ : [**\<length>**](/fr/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/fr/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_ : `0`; _Animable_: **yes** + +### Attributs globaux + +- [Attributs principaux](/fr/docs/Web/SVG/Attribute/Core) + - : Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}} +- [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute/Conditional_Processing) + - : Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}} +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) + - : Plus notamment : {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- Attributs XLink + - : Plus notamment : {{SVGAttr("xlink:title")}} + +## Notes d'utilisation + +{{svginfo}} + +## Spécifications {{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} diff --git a/files/fr/web/svg/element/polygon/index.md b/files/fr/web/svg/element/polygon/index.md index e410f82a01..629d0238b6 100644 --- a/files/fr/web/svg/element/polygon/index.md +++ b/files/fr/web/svg/element/polygon/index.md @@ -6,73 +6,71 @@ tags: - Reference - SVG - SVG Graphique -browser-compat: svg.elements.polygon translation_of: Web/SVG/Element/polygon +browser-compat: svg.elements.polygon --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <strong><code><polygon></code></strong> délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément {{SVGElement("polyline")}}.</p> +L'élément **`<polygon>`** délimite une forme close composée d'un groupe de plusieurs segments de droites. Le dernier point est relié au premier afin de fermer la forme et de relier les traits entre deux. Pour créer une forme ouverte, voir l'élément {{SVGElement("polyline")}}. -<h2>Exemple</h2> +## Exemple -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Exemple d'un polygone avec le remplissage par défaut --> - <polygon points="0,100 50,25 50,75 100,0" /> +```html +<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Exemple d'un polygone avec le remplissage par défaut --> + <polygon points="0,100 50,25 50,75 100,0" /> - <!-- Le même polygone sans remplissage et avec un contour --> - <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> -</svg></pre> + <!-- Le même polygone sans remplissage et avec un contour --> + <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100', '100')}}</p> +{{EmbedLiveSample('exemple', '100', '100')}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<dl> - <dt>{{SVGAttr('points')}}</dt> - <dd>Cette attribut défini une liste de point (paire de coordonnées absolue x et y ) nécessaire pour dessiner le polygone.<br> - <small><em>Type de valeur</em>: <a href="/fr/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>+ ; <em>Valeur par défaut</em>: <code>""</code>; <em>Peut être animé</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("pathLength")}}</dt> - <dd>Cet attribut spécifie la taille totale pour le chemin dans l'unité de l'utilisateur.<br> - <small><em>Type de valeur</em>: <a href="/fr/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>; <em>Valeur par défaut</em>: <em>aucune</em>; <em>Peut être animé</em>: <strong>oui</strong></small></dd> -</dl> +- {{SVGAttr('points')}} + - : Cette attribut défini une liste de point (paire de coordonnées absolue x et y ) nécessaire pour dessiner le polygone. + _Type de valeur_: [**\<number>**](/fr/docs/Web/SVG/Content_type#Number)+ ; _Valeur par défaut_: `""`; _Peut être animé_: **oui** +- {{SVGAttr("pathLength")}} + - : Cet attribut spécifie la taille totale pour le chemin dans l'unité de l'utilisateur. + _Type de valeur_: [**\<number>**](/fr/docs/Web/SVG/Content_type#Number); _Valeur par défaut_: _aucune_; _Peut être animé_: **oui** -<h3 id="Attributs_Globaux">Attributs Globaux</h3> +### Attributs Globaux -<dl> - <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attribut de base</a></dt> - <dd><small>Principalement: {{SVGAttr('id')}} et {{SVGAttr('tabindex')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attribut de style</a></dt> - <dd><small>{{SVGAttr('class')}} et {{SVGAttr('style')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs conditionnels</a></dt> - <dd><small>Principalement: {{SVGAttr('requiredExtensions')}} et {{SVGAttr('systemLanguage')}}</small></dd> - <dt>Attributs d'évènements</dt> - <dd><small><a href="/fr/docs/Web/SVG/Attribute/Events#global_event_attributes">Attribut d'évènement global</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#graphical_event_attributes">Attribut d'évènement graphique</a></small></dd> - <dt><a href="h/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt> - <dd><small>Principalement: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}} et {{SVGAttr('visibility')}}</small></dd> - <dt>Attributs ARIA</dt> - <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> -</dl> +- [Attribut de base](/fr/docs/Web/SVG/Attribute/Core) + - : Principalement: {{SVGAttr('id')}} et {{SVGAttr('tabindex')}} +- [Attribut de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}} et {{SVGAttr('style')}} +- [Attributs conditionnels](/fr/docs/Web/SVG/Attribute/Conditional_Processing) + - : Principalement: {{SVGAttr('requiredExtensions')}} et {{SVGAttr('systemLanguage')}} +- Attributs d'évènements + - : [Attribut d'évènement global](/fr/docs/Web/SVG/Attribute/Events#global_event_attributes), [Attribut d'évènement graphique](/fr/docs/Web/SVG/Attribute/Events#graphical_event_attributes) +- [Attributs de présentation](h/fr/docs/Web/SVG/Attribute/Presentation) + - : Principalement: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}} et {{SVGAttr('visibility')}} +- Attributs ARIA + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` -<h2 id="Contexte_dusage">Contexte d'usage</h2> +## Contexte d'usage -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGPolygonElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGPolygonElement")}}. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité avec les navigateurs</h2> +## Compatibilité avec les navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>Autres formes élémentaires en SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, <strong>{{ SVGElement('polyline') }}</strong> et <strong>{{ SVGElement('rect') }}.</strong></li> -</ul> +- Autres formes élémentaires en SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, **{{ SVGElement('polyline') }}** et **{{ SVGElement('rect') }}.** diff --git a/files/fr/web/svg/element/polyline/index.md b/files/fr/web/svg/element/polyline/index.md index 42325ffe60..a8052c0607 100644 --- a/files/fr/web/svg/element/polyline/index.md +++ b/files/fr/web/svg/element/polyline/index.md @@ -8,122 +8,104 @@ tags: - SVG translation_of: Web/SVG/Element/polyline --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément SVG <strong><code><polyline></code></strong> est une forme SVG basique qui crée des lignes entre plusieurs points. Un élément <code>polyline</code> est généralement utilisé pour créer des tracés ouverts car le dernier point n'est pas nécessairement connecté avec le premier. Lorsqu'on désire réaliser des formes fermées, on privilégiera l'élément {{SVGElement("polygon")}}.</p> +L'élément SVG **`<polyline>`** est une forme SVG basique qui crée des lignes entre plusieurs points. Un élément `polyline` est généralement utilisé pour créer des tracés ouverts car le dernier point n'est pas nécessairement connecté avec le premier. Lorsqu'on désire réaliser des formes fermées, on privilégiera l'élément {{SVGElement("polygon")}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_universels">Attributs universels</h3> +### Attributs universels -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel">Attributs de traitement conditionnel</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs principaux</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_d%27%C3%A9v%C3%A9nement_graphique">Attributs relatifs aux évènements graphiques</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> - <li>{{SVGAttr("transform")}}</li> -</ul> +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel) +- [Attributs principaux](/fr/docs/Web/SVG/Attribute#Attributs_de_base) +- [Attributs relatifs aux évènements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d%27%C3%A9v%C3%A9nement_graphique) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} +- {{SVGAttr("transform")}} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{SVGAttr("points")}}</li> -</ul> +- {{SVGAttr("points")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface {{domxref("SVGPolylineElement")}}.</p> +Cet élément implémente l'interface {{domxref("SVGPolylineElement")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_basique">Utilisation basique</h3> +### Utilisation basique -<h4 id="SVG">SVG</h4> +#### SVG -<pre class="brush: html"><svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> - <polyline fill="none" stroke="black" - points="20,100 40,60 70,80 100,20"/> -</svg></pre> +```html +<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> + <polyline fill="none" stroke="black" + points="20,100 40,60 70,80 100,20"/> +</svg> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Utilisation_basique", 120, 120)}}</p> +{{EmbedLiveSample("Utilisation_basique", 120, 120)}} -<h3 id="Escaliers">Escaliers</h3> +### Escaliers -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div class="contain-demo"> - <svg width="150" height="200"> - <desc> +```html +<div class="contain-demo"> + <svg width="150" height="200"> + <desc> Première polyligne orange avec remplissage blanc. - </desc> - <polyline + </desc> + <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" - fill="white" stroke="#D07735" stroke-width="6" /> - </svg> - <svg width="150" height="200"> - <desc> + fill="white" stroke="#D07735" stroke-width="6" /> + </svg> + <svg width="150" height="200"> + <desc> Seconde polyligne orange avec remplissage jaune. - </desc> - <polyline + </desc> + <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" - fill="#F9F38C" stroke="#D07735" stroke-width="6" /> - </svg> -</div> -</pre> + fill="#F9F38C" stroke="#D07735" stroke-width="6" /> + </svg> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">.contain-demo { +```css +.contain-demo { margin: 25px auto; text-align: center; -}</pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Escaliers", 400, 500)}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'shapes.html#PolylineElement', '<polyline>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.polyline")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("line")}}</li> - <li>{{SVGElement("polygon")}}</li> -</ul> +} +``` + +#### Résultat + +{{EmbedLiveSample("Escaliers", 400, 500)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- | +| {{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG1.1')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.polyline")}} + +## Voir aussi + +- {{SVGElement("line")}} +- {{SVGElement("polygon")}} diff --git a/files/fr/web/svg/element/radialgradient/index.md b/files/fr/web/svg/element/radialgradient/index.md index 052f193b4a..5cb5bbd0a6 100644 --- a/files/fr/web/svg/element/radialgradient/index.md +++ b/files/fr/web/svg/element/radialgradient/index.md @@ -7,97 +7,74 @@ tags: - SVG Dégradé translation_of: Web/SVG/Element/radialGradient --- -<div>{{SVGRef}}</div> +{{SVGRef}}L'élément [SVG ](/fr/docs/Web/SVG)**`<radialGradient>`** permet de définir un dégradé radial afin de dessiner un contour, ou de remplir des éléments SVG. -<div>L'élément <a href="/fr/docs/Web/SVG">SVG </a><strong><code><radialGradient></code></strong> permet de définir un dégradé radial afin de dessiner un contour, ou de remplir des éléments SVG.</div> +## Contexte d'utilisation -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +{{svginfo}} -<p>{{svginfo}}</p> +## Attributs -<h2 id="Attributs">Attributs</h2> +### Attributs globaux -<h3 id="Attributs_globaux">Attributs globaux</h3> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base) » +- [Références des attributs SVG](/fr/docs/Web/SVG/Attribute#Attributs_de_pr%C3%A9sentation) » +- [Attributs Xlink](/fr/docs/Web/SVG/Attribute#Attributs_XLink) » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_pr%C3%A9sentation">Références des attributs SVG</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs Xlink</a> »</li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> +### Attributs spécifiques -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +- {{SVGAttr("gradientUnits")}} +- {{SVGAttr("gradientTransform")}} +- {{SVGAttr("cx")}} +- {{SVGAttr("cy")}} +- {{SVGAttr("r")}} +- {{SVGAttr("fx")}} +- {{SVGAttr("fy")}} +- {{SVGAttr("fr")}} +- {{SVGAttr("spreadMethod")}} +- {{SVGAttr("xlink:href")}} -<ul> - <li>{{SVGAttr("gradientUnits")}}</li> - <li>{{SVGAttr("gradientTransform")}}</li> - <li>{{SVGAttr("cx")}}</li> - <li>{{SVGAttr("cy")}}</li> - <li>{{SVGAttr("r")}}</li> - <li>{{SVGAttr("fx")}}</li> - <li>{{SVGAttr("fy")}}</li> - <li>{{SVGAttr("fr")}}</li> - <li>{{SVGAttr("spreadMethod")}}</li> - <li>{{SVGAttr("xlink:href")}}</li> -</ul> +## DOM Interface -<h2 id="DOM_Interface">DOM Interface</h2> +Cet élément implémente l'interface {{domxref("SVGRadialGradientElement")}}. -<p>Cet élément implémente l'interface {{domxref("SVGRadialGradientElement")}}.</p> +## Exemple -<h2 id="Exemple">Exemple</h2> +### SVG -<h3 id="SVG">SVG</h3> +```html +<svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> -<pre class="brush: html"><svg width="120" height="120" viewBox="0 0 120 120" - xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="exampleGradient"> + <stop offset="10%" stop-color="gold"/> + <stop offset="95%" stop-color="green"/> + </radialGradient> + </defs> - <defs> - <radialGradient id="exampleGradient"> - <stop offset="10%" stop-color="gold"/> - <stop offset="95%" stop-color="green"/> - </radialGradient> - </defs> + <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/> +</svg> +``` - <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/> -</svg></pre> +### Résultat -<h3 id="Résultat">Résultat</h3> +{{ EmbedLiveSample('Exemple', 120, 120, '', 'Web/SVG/Element/radialGradient') }} -<p>{{ EmbedLiveSample('Exemple', 120, 120, '', 'Web/SVG/Element/radialGradient') }}</p> +## Spécifications -<h2 id="Spécifications">Spécifications</h2> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- | +| {{SpecName('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}} | {{Spec2('SVG2')}} | Added `fr` attribute | +| {{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}} | {{Spec2('SVG1.1')}} | Initial definition | -<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('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td>Added <code>fr</code> attribute</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("svg.elements.radialGradient")}} -<p>{{Compat("svg.elements.radialGradient")}}</p> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("linearGradient")}}</li> -</ul> +- {{SVGElement("linearGradient")}} diff --git a/files/fr/web/svg/element/rect/index.md b/files/fr/web/svg/element/rect/index.md index aa18e5a282..99f8d22bcd 100644 --- a/files/fr/web/svg/element/rect/index.md +++ b/files/fr/web/svg/element/rect/index.md @@ -7,66 +7,64 @@ tags: - SVG Reference translation_of: Web/SVG/Element/rect --- -<div>{{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}}</div> +{{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}} -<p>L'élément <code>rect</code> est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis.</p> +L'élément `rect` est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis. -<h2 id="Usage">Usage</h2> +## Usage -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: css hidden"><code>html,body,svg { height:100% }</code></pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><code><svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Simple rect element --> - <rect x="0" y="0" width="100" height="100" /> +```html +<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Simple rect element --> + <rect x="0" y="0" width="100" height="100" /> - <!-- Rounded corner rect element --> - <rect x="120" y="0" width="100" height="100" rx="15" ry="15" /> -</svg></code></pre> + <!-- Rounded corner rect element --> + <rect x="120" y="0" width="100" height="100" rx="15" ry="15" /> +</svg> +``` -<p>{{EmbedLiveSample('Exemple', 100, '100%')}}</p> +{{EmbedLiveSample('Exemple', 100, '100%')}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_Globaux">Attributs Globaux</h3> +### Attributs Globaux -<ul> - <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="fr/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> »</li> - <li><a href="/fr/SVG/Attribute#Core" title="fr/SVG/Attribute#Core">Attributs centraux</a> »</li> - <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="fr/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li> - <li><a href="/fr/SVG/Attribute#Presentation" title="fr/SVG/Attribute#Presentation">Attributs de présentation</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> - <li>{{ SVGAttr("transform") }}</li> -</ul> +- [Attributs conditionnels](/fr/SVG/Attribute#ConditionalProccessing "fr/SVG/Attribute#ConditionalProccessing") » +- [Attributs centraux](/fr/SVG/Attribute#Core "fr/SVG/Attribute#Core") » +- [Attributs d'événements graphiques](/fr/SVG/Attribute#GraphicalEvent "fr/SVG/Attribute#GraphicalEvent") » +- [Attributs de présentation](/fr/SVG/Attribute#Presentation "fr/SVG/Attribute#Presentation") » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("externalResourcesRequired") }} +- {{ SVGAttr("transform") }} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{ SVGAttr("x") }}</li> - <li>{{ SVGAttr("y") }}</li> - <li>{{ SVGAttr("width") }}</li> - <li>{{ SVGAttr("height") }}</li> - <li>{{ SVGAttr("rx") }}</li> - <li>{{ SVGAttr("ry") }}</li> -</ul> +- {{ SVGAttr("x") }} +- {{ SVGAttr("y") }} +- {{ SVGAttr("width") }} +- {{ SVGAttr("height") }} +- {{ SVGAttr("rx") }} +- {{ SVGAttr("ry") }} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> .</p> +Cet élément implémente l'interface [`SVGRectElement`](/fr/DOM/SVGRectElement "en/DOM/SVGRectElement") . -<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> +## Compatibilité avec les navigateurs -<p>{{Compat("svg.elements.rect")}}</p> +{{Compat("svg.elements.rect")}} -<p> </p> -<h2 id="Voir_également">Voir également</h2> -<ul> - <li>{{ SVGElement("path") }}</li> -</ul> +## Voir également + +- {{ SVGElement("path") }} diff --git a/files/fr/web/svg/element/stop/index.md b/files/fr/web/svg/element/stop/index.md index d5e19bfcff..1cfbc01ce9 100644 --- a/files/fr/web/svg/element/stop/index.md +++ b/files/fr/web/svg/element/stop/index.md @@ -3,96 +3,74 @@ title: <stop> slug: Web/SVG/Element/stop translation_of: Web/SVG/Element/stop --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <a href="/fr/docs/Web/SVG">SVG</a> <strong><code><stop></code></strong> définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}.</p> +L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Core_attributes">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Presentation_attributes">Attributs de présentation</a></li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Core_attributes) +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Presentation_attributes) +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} -<h3 id="Specific_attributes">Specific attributes</h3> +### Specific attributes -<ul> - <li>{{SVGAttr("offset")}}</li> - <li>{{SVGAttr("stop-color")}}</li> - <li>{{SVGAttr("stop-opacity")}}</li> -</ul> +- {{SVGAttr("offset")}} +- {{SVGAttr("stop-color")}} +- {{SVGAttr("stop-opacity")}} -<h2 id="DOM_Interface">DOM Interface</h2> +## DOM Interface -<p>Cet élément implémenté l'interface {{domxref("SVGStopElement")}}.</p> +Cet élément implémenté l'interface {{domxref("SVGStopElement")}}. -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="SVG">SVG</h3> +### SVG -<pre class="brush: html"><svg width="160" height="95" viewBox="0 0 80 40" - xmlns="http://www.w3.org/2000/svg"> +```html +<svg width="160" height="95" viewBox="0 0 80 40" + xmlns="http://www.w3.org/2000/svg"> - <defs> - <linearGradient id="MyGradient"> - <stop offset="5%" stop-color="#F60" /> - <stop offset="95%" stop-color="#FF6" /> - </linearGradient> - </defs> + <defs> + <linearGradient id="MyGradient"> + <stop offset="5%" stop-color="#F60" /> + <stop offset="95%" stop-color="#FF6" /> + </linearGradient> + </defs> - <!-- Contour de la zone de dessin en noir --> - <rect fill="none" stroke="black" - x="0.5" y="0.5" width="79" height="39"/> + <!-- Contour de la zone de dessin en noir --> + <rect fill="none" stroke="black" + x="0.5" y="0.5" width="79" height="39"/> - <!-- Le rectangle est rempli avec un dégradé linéaire --> - <rect fill="url(#MyGradient)" stroke="black" stroke-width="1" - x="10" y="10" width="60" height="20"/> -</svg> -</pre> + <!-- Le rectangle est rempli avec un dégradé linéaire --> + <rect fill="url(#MyGradient)" stroke="black" stroke-width="1" + x="10" y="10" width="60" height="20"/> +</svg> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemple", 160, 95)}}</p> +{{EmbedLiveSample("Exemple", 160, 95)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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('SVG2', 'pservers.html#GradientStops', '<stop>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'pservers.html#GradientStops', '<stop>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | +| {{SpecName('SVG2', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.stop")}}</p> +{{Compat("svg.elements.stop")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{SVGElement("linearGradient")}}</li> - <li>{{SVGElement("radialGradient")}}</li> -</ul> +- {{SVGElement("linearGradient")}} +- {{SVGElement("radialGradient")}} diff --git a/files/fr/web/svg/element/style/index.md b/files/fr/web/svg/element/style/index.md index 11454c2331..a106119925 100644 --- a/files/fr/web/svg/element/style/index.md +++ b/files/fr/web/svg/element/style/index.md @@ -7,86 +7,64 @@ tags: - SVG translation_of: Web/SVG/Element/style --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élément <code>style</code> permet d'intégrer directement des feuilles de style dans un contenu SVG. L'élément style de SVG possède les mêmes attributs que l'élément correspondant au format HTML (voir l'élément HTML {{HTMLElement("style")}}).</p> +L'élément `style` permet d'intégrer directement des feuilles de style dans un contenu SVG. L'élément style de SVG possède les mêmes attributs que l'élément correspondant au format HTML (voir l'élément HTML {{HTMLElement("style")}}). -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 100 100" - xmlns="http://www.w3.org/2000/svg"> - <style> - /* <![CDATA[ */ +```html +<svg width="100%" height="100%" viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg"> + <style> + /* <![CDATA[ */ circle { fill: orange; stroke: black; stroke-width: 10px; // Note that the value of a pixel depend on the viewBox } - /* ]]> */ - </style> + /* ]]> */ + </style> - <circle cx="50" cy="50" r="40" /> -</svg> -</pre> + <circle cx="50" cy="50" r="40" /> +</svg> +``` -<p>Résultat en direct:</p> +Résultat en direct: -<p>{{EmbedLiveSample("Exemple",150,165)}}</p> +{{EmbedLiveSample("Exemple",150,165)}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_Globaux">Attributs Globaux</h3> +### Attributs Globaux -<ul> - <li><a href="/fr/SVG/Attribute#Core">Core attributes</a> »</li> -</ul> +- [Core attributes](/fr/SVG/Attribute#Core) » -<h3 id="Attributs_Specifiques">Attributs Specifiques</h3> +### Attributs Specifiques -<ul> - <li>{{SVGAttr("type")}}</li> - <li>{{SVGAttr("media")}}</li> - <li>{{SVGAttr("title")}}</li> -</ul> +- {{SVGAttr("type")}} +- {{SVGAttr("media")}} +- {{SVGAttr("title")}} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implemente l'interface <code><a href="/fr/DOM/SVGStyleElement">SVGStyleElement</a></code>.</p> +Cet élément implemente l'interface [`SVGStyleElement`](/fr/DOM/SVGStyleElement). -<h2 id="Specifications">Specifications</h2> +## Specifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('SVG2', 'styling.html#StyleElement', '<style>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'styling.html#StyleElement', '<style>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> +| Specification | Status | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------ | ------------------ | +| {{SpecName('SVG2', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG1.1')}} | Initial definition | -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.style")}}</p> +{{Compat("svg.elements.style")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/HTML/Element/style"><style> element in HTML</a></li> -</ul> +- [\<style> element in HTML](/fr/HTML/Element/style) diff --git a/files/fr/web/svg/element/svg/index.md b/files/fr/web/svg/element/svg/index.md index f2f257c15a..b4c88d63f3 100644 --- a/files/fr/web/svg/element/svg/index.md +++ b/files/fr/web/svg/element/svg/index.md @@ -3,104 +3,87 @@ title: <svg> slug: Web/SVG/Element/svg translation_of: Web/SVG/Element/svg --- -<div>{{SVGRef}}</div> - -<p>L'élément <code>svg</code> peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres <a href="/fr/docs/">viewport</a> et système de coordonnée.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Exemple">Exemple</h2> - -<p>Prenons le fichier SVG suivant (représentant le drapeau nationnal de l'Italie) :</p> - -<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" - width="150" height="100" viewBox="0 0 3 2"> - - <rect width="1" height="2" x="0" fill="#008d46" /> - <rect width="1" height="2" x="1" fill="#ffffff" /> - <rect width="1" height="2" x="2" fill="#d2232c" /> -</svg></pre> - -<p>Ce fichier peut être inclus dans un document HTML5 de cette façon :</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <meta charset="UTF-8" /> - <title>Exemple mêlant HTML & SVG</title> -</head> - -<body> - - <svg width="150" height="100" viewBox="0 0 3 2"> - <rect width="1" height="2" x="0" fill="#008d46" /> - <rect width="1" height="2" x="1" fill="#ffffff" /> - <rect width="1" height="2" x="2" fill="#d2232c" /> - </svg> - -</body> -</html></pre> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#DocumentEvent">Document event attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> - -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> - -<ul> - <li>{{SVGAttr("version")}}</li> - <li>{{SVGAttr("baseProfile")}}</li> - <li>{{SVGAttr("x")}}</li> - <li>{{SVGAttr("y")}}</li> - <li>{{SVGAttr("width")}}</li> - <li>{{SVGAttr("height")}}</li> - <li>{{SVGAttr("preserveAspectRatio")}}</li> - <li>{{SVGAttr("contentScriptType")}}</li> - <li>{{SVGAttr("contentStyleType")}}</li> - <li>{{SVGAttr("viewBox")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cette élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGSVGElement">SVGSVGElement</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">Status</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.svg")}}</p> +{{SVGRef}} + +L'élément `svg` peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres [viewport](/fr/docs/) et système de coordonnée. + +## Contexte d'utilisation + +{{svginfo}} + +## Exemple + +Prenons le fichier SVG suivant (représentant le drapeau nationnal de l'Italie) : + +```xml +<svg xmlns="http://www.w3.org/2000/svg" + width="150" height="100" viewBox="0 0 3 2"> + + <rect width="1" height="2" x="0" fill="#008d46" /> + <rect width="1" height="2" x="1" fill="#ffffff" /> + <rect width="1" height="2" x="2" fill="#d2232c" /> +</svg> +``` + +Ce fichier peut être inclus dans un document HTML5 de cette façon : + +```html +<!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8" /> + <title>Exemple mêlant HTML & SVG</title> +</head> + +<body> + + <svg width="150" height="100" viewBox="0 0 3 2"> + <rect width="1" height="2" x="0" fill="#008d46" /> + <rect width="1" height="2" x="1" fill="#ffffff" /> + <rect width="1" height="2" x="2" fill="#d2232c" /> + </svg> + +</body> +</html> +``` + +## Attributs + +### Attributs globaux + +- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core) » +- [Document event attributes](/fr/docs/Web/SVG/Attribute#DocumentEvent) » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#GraphicalEvent) » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation) » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} + +### Attributs spécifiques + +- {{SVGAttr("version")}} +- {{SVGAttr("baseProfile")}} +- {{SVGAttr("x")}} +- {{SVGAttr("y")}} +- {{SVGAttr("width")}} +- {{SVGAttr("height")}} +- {{SVGAttr("preserveAspectRatio")}} +- {{SVGAttr("contentScriptType")}} +- {{SVGAttr("contentStyleType")}} +- {{SVGAttr("viewBox")}} + +## Interface DOM + +Cette élément implémente l'interface [`SVGSVGElement`](/fr/docs/Web/API/SVGSVGElement). + +## Spécifications + +| Spécification | Status | Commentaires | +| ------------------------------------------------------------------------------------ | ------------------------ | ------------------- | +| {{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.svg")}} diff --git a/files/fr/web/svg/element/switch/index.md b/files/fr/web/svg/element/switch/index.md index 60504ccf7a..dc44f26695 100644 --- a/files/fr/web/svg/element/switch/index.md +++ b/files/fr/web/svg/element/switch/index.md @@ -7,85 +7,68 @@ tags: - SVG Conteneur translation_of: Web/SVG/Element/switch --- -<div>{{SVGRef}}</div> - -<p>L'élément <code>switch</code> évalue les attributs {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("requiredExtensions") }} et {{ SVGAttr("systemLanguage") }} de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient <code>true</code>. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que {{ SVGElement("g") }}, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu.</p> - -<p>Notez que la valeur des propriétés <code>display</code> et <code>visibility</code> n'ont aucun effet sur le traitement du <code>switch</code>. En particulier, appliquer une propriété <code>display</code> à <code>none</code> sur l'élément enfant d'un <code>switch</code> n'a aucun effet sur le résultat du test <code>true/false</code> associé au traitement des éléments par le <code>switch</code>.</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel" title="en/SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Événement_graphiques" title="en/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a></li> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation" title="en/SVG/Attribute#Presentation">Attributs de présentation</a></li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> - <li>{{ SVGAttr("transform") }}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface <code><a href="/fr/docs/DOM/SVGSwitchElement" title="en/DOM/SVGSwitchElement">SVGSwitchElement</a></code>.</p> - -<h2 id="Exemple">Exemple</h2> - -<p>Cet exemple montre comment afficher un texte différent selon les paramètres de langue du navigateur. L'élément <code>switch</code> affichera le premier élément enfant dont l'attribut <code>systemLanguage</code> correspond au language de l'utilisateur, ou l'élément sans attribut <code>systemLanguage</code> si aucun ne correspond.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><svg width="100%" viewBox="0 -20 100 50"> - <switch> - <text systemLanguage="ar">مرحبا</text> - <text systemLanguage="de,nl">Hallo!</text> - <text systemLanguage="en">Hello!</text> - <text systemLanguage="en-us">Howdy!</text> - <text systemLanguage="en-gb">Wotcha!</text> - <text systemLanguage="en-au">G'day!</text> - <text systemLanguage="es">Hola!</text> - <text systemLanguage="fr">Bonjour!</text> - <text systemLanguage="ja">こんにちは</text> - <text systemLanguage="ru">Привет!</text> - <text>☺</text> - </switch> -</svg></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{ EmbedLiveSample('Exemple') }}</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('SVG2', 'struct.html#SwitchElement', '<switch>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td>Clarifie l'évaluation de l'attribut {{SVGAttr("systemLanguage")}}</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'struct.html#SwitchElement', '<switch>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.switch")}}</p> +{{SVGRef}} + +L'élément `switch` évalue les attributs {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("requiredExtensions") }} et {{ SVGAttr("systemLanguage") }} de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient `true`. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que {{ SVGElement("g") }}, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu. + +Notez que la valeur des propriétés `display` et `visibility` n'ont aucun effet sur le traitement du `switch`. En particulier, appliquer une propriété `display` à `none` sur l'élément enfant d'un `switch` n'a aucun effet sur le résultat du test `true/false` associé au traitement des éléments par le `switch`. + +## Contexte d'utilisation + +{{svginfo}} + +## Attributs + +### Attributs globaux + +- [Attributs de traitement conditionnel](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") +- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Événement_graphiques "en/SVG/Attribute#GraphicalEvent") +- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation "en/SVG/Attribute#Presentation") +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("externalResourcesRequired") }} +- {{ SVGAttr("transform") }} + +## Interface DOM + +Cet élément implémente l'interface [`SVGSwitchElement`](/fr/docs/DOM/SVGSwitchElement "en/DOM/SVGSwitchElement"). + +## Exemple + +Cet exemple montre comment afficher un texte différent selon les paramètres de langue du navigateur. L'élément `switch` affichera le premier élément enfant dont l'attribut `systemLanguage` correspond au language de l'utilisateur, ou l'élément sans attribut `systemLanguage` si aucun ne correspond. + +### HTML + +```html +<svg width="100%" viewBox="0 -20 100 50"> + <switch> + <text systemLanguage="ar">مرحبا</text> + <text systemLanguage="de,nl">Hallo!</text> + <text systemLanguage="en">Hello!</text> + <text systemLanguage="en-us">Howdy!</text> + <text systemLanguage="en-gb">Wotcha!</text> + <text systemLanguage="en-au">G'day!</text> + <text systemLanguage="es">Hola!</text> + <text systemLanguage="fr">Bonjour!</text> + <text systemLanguage="ja">こんにちは</text> + <text systemLanguage="ru">Привет!</text> + <text>☺</text> + </switch> +</svg> +``` + +### Résultat + +{{ EmbedLiveSample('Exemple') }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------- | +| {{SpecName('SVG2', 'struct.html#SwitchElement', '<switch>')}} | {{Spec2('SVG2')}} | Clarifie l'évaluation de l'attribut {{SVGAttr("systemLanguage")}} | +| {{SpecName('SVG1.1', 'struct.html#SwitchElement', '<switch>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.switch")}} diff --git a/files/fr/web/svg/element/symbol/index.md b/files/fr/web/svg/element/symbol/index.md index 66137a0100..74789fa1ef 100644 --- a/files/fr/web/svg/element/symbol/index.md +++ b/files/fr/web/svg/element/symbol/index.md @@ -6,112 +6,93 @@ tags: - SVG Conteneur translation_of: Web/SVG/Element/symbol --- -<div>{{SVGRef}}</div> - -<p>L'élément <strong><code><symbol></code></strong> est utilisé pour définir un template de graphique pouvant être instancié par un élément {{SVGElement("use")}}.</p> - -<p>L'utilisation d'éléments <code>symbol</code> pour les graphiques qui sont utilisés de multiples fois dans le même document permet d'améliorer la structure et la sémantique du document. Les documents fortement structurés peuvent plus facilement être rendus sous forme graphique, vocale, ou Braille, et ainsi favoriser leur accessibilité.</p> - -<h2>Exemple</h2> - -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> - -<pre class="brush: html"><svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <!-- Notre symbol a son propre système de coordonnées --> - <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> - <circle cx="1" cy="1" r="1" /> - </symbol> - - <!-- Une grille pour matérialiser le positionnement du symbole --> - <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> - - <!-- Multiples instances de notre symbole --> - <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" /> - <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> - <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /> - <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /> - <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> -</svg></pre> - -<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> - -<h2 id="Attributs">Attributs</h2> - -<dl> - <dt>{{SVGAttr("height")}}</dt> - <dd>Cet attribut détermine la hauteur du symbole.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut</em>: <code>auto</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("preserveAspectRatio")}}</dt> - <dd>Cet attribut définit comment le fragment svg doit être déformé s'il est inclus dans un conteneur ayant un ratio d'affichage (largeur:hauteur) différent.<br> - <small><em>Type de valeur</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Valeur par défaut</em>: <code>xMidYMid meet</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("refX")}}</dt> - <dd>Cet attribut détermine la coordonnée x du point de référence du symbole.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<code>left</code>|<code>center</code>|<code>right</code> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("refY")}}</dt> - <dd>Cet attribut détermine la coordonnée y du point de référence du symbole.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<code>top</code>|<code>center</code>|<code>bottom</code> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("viewBox")}}</dt> - <dd>Cet attribut définit les limites de la zone d'affichage du symbole.<br> - <small><em>Type de valeur</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Valeur par défaut</em>: aucune; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("width")}}</dt> - <dd>Cet attribut définit la largeur du symbole.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut</em>: <code>auto</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("x")}}</dt> - <dd>Cet attribut détermine la coordonnée x du symbole.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd> - <dt>{{SVGAttr("y")}}</dt> - <dd>Cet attribut détermine la coordonnée y du symbole.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd> -</dl> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<dl> - <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt> - <dd><small>Notamment: {{SVGAttr('id')}}</small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt> - <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> - <dt>Attributs d'événement</dt> - <dd><small><a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux">Attributs d'événement globaux</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document">Attributs d'événement des éléments du document</a>,<a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques"> Attributs d'événement graphiques</a></small></dd> - <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Atttributs de présentation</a></dt> - <dd><small>Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> - <dt>Attributs Aria</dt> - <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> -</dl> - -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> - -<p>{{svginfo}}</p> - -<div class="note"> - <p><strong>Note :</strong> Un élément <code><symbol></code> n'est pas destiné à être affiché par lui-même. Seules les instances d'un élément <code><symbol></code> (c'est à dire une référence vers un <code><symbol></code> par un élément {{SVGElement("use")}}) sont affichées. Cela signifie que certains navigateurs peuvent refuser d'afficher directement un élément <code><symbol></code> quand bien même la propriété CSS {{cssxref('display')}} indique le contraire.</p> -</div> - -<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('SVG2', 'struct.html#SymbolElement', '<symbol>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td>Permet aux propriétés de géométrie d'être spécifiées sur un symbole</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'struct.html#SymbolElement', '<symbol>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.symbol")}}</p> +{{SVGRef}} + +L'élément **`<symbol>`** est utilisé pour définir un template de graphique pouvant être instancié par un élément {{SVGElement("use")}}. + +L'utilisation d'éléments `symbol` pour les graphiques qui sont utilisés de multiples fois dans le même document permet d'améliorer la structure et la sémantique du document. Les documents fortement structurés peuvent plus facilement être rendus sous forme graphique, vocale, ou Braille, et ainsi favoriser leur accessibilité. + +## Exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Notre symbol a son propre système de coordonnées --> + <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> + <circle cx="1" cy="1" r="1" /> + </symbol> + + <!-- Une grille pour matérialiser le positionnement du symbole --> + <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> + + <!-- Multiples instances de notre symbole --> + <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" /> + <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> + <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /> + <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /> + <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> +</svg> +``` + +{{EmbedLiveSample('Exemple', 150, '100%')}} + +## Attributs + +- {{SVGAttr("height")}} + - : Cet attribut détermine la hauteur du symbole. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_: `auto`; _Animation_: **oui** +- {{SVGAttr("preserveAspectRatio")}} + - : Cet attribut définit comment le fragment svg doit être déformé s'il est inclus dans un conteneur ayant un ratio d'affichage (largeur:hauteur) différent. + _Type de valeur_: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; _Valeur par défaut_: `xMidYMid meet`; _Animation_: **oui** +- {{SVGAttr("refX")}} + - : Cet attribut détermine la coordonnée x du point de référence du symbole. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage)|`left`|`center`|`right` ; _Valeur par défaut_: `0`; _Animation_: **oui** +- {{SVGAttr("refY")}} + - : Cet attribut détermine la coordonnée y du point de référence du symbole. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage)|`top`|`center`|`bottom` ; _Valeur par défaut_: `0`; _Animation_: **oui** +- {{SVGAttr("viewBox")}} + - : Cet attribut définit les limites de la zone d'affichage du symbole. + _Type de valeur_: **[\<list-of-numbers>](/docs/Web/SVG/Content_type#List-of-Ts)** ; _Valeur par défaut_: aucune; _Animation_: **oui** +- {{SVGAttr("width")}} + - : Cet attribut définit la largeur du symbole. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_: `auto`; _Animation_: **oui** +- {{SVGAttr("x")}} + - : Cet attribut détermine la coordonnée x du symbole. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_: `0`; _Animation_: **oui** +- {{SVGAttr("y")}} + - : Cet attribut détermine la coordonnée y du symbole. + _Type de valeur_: [**\<length>**](/docs/Web/SVG/Content_type#Length)|[**\<percentage>**](/docs/Web/SVG/Content_type#Percentage) ; _Valeur par défaut_: `0`; _Animation_: **oui** + +### Attributs globaux + +- [Attributs de base](/fr/docs/Web/SVG/Attribute/Core) + - : Notamment: {{SVGAttr('id')}} +- [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) + - : {{SVGAttr('class')}}, {{SVGAttr('style')}} +- Attributs d'événement + - : [Attributs d'événement globaux](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux), [Attributs d'événement des éléments du document](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document),[ Attributs d'événement graphiques](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques) +- [Atttributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) + - : Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}} +- Attributs Aria + - : `aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role` + +## Notes d'utilisation + +{{svginfo}} + +> **Note :** Un élément `<symbol>` n'est pas destiné à être affiché par lui-même. Seules les instances d'un élément `<symbol>` (c'est à dire une référence vers un `<symbol>` par un élément {{SVGElement("use")}}) sont affichées. Cela signifie que certains navigateurs peuvent refuser d'afficher directement un élément `<symbol>` quand bien même la propriété CSS {{cssxref('display')}} indique le contraire. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------- | +| {{SpecName('SVG2', 'struct.html#SymbolElement', '<symbol>')}} | {{Spec2('SVG2')}} | Permet aux propriétés de géométrie d'être spécifiées sur un symbole | +| {{SpecName('SVG1.1', 'struct.html#SymbolElement', '<symbol>')}} | {{Spec2('SVG1.1')}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.symbol")}} diff --git a/files/fr/web/svg/element/text/index.md b/files/fr/web/svg/element/text/index.md index bc1e735223..dafd76e9fe 100644 --- a/files/fr/web/svg/element/text/index.md +++ b/files/fr/web/svg/element/text/index.md @@ -8,104 +8,102 @@ tags: - SVG contenu de texte translation_of: Web/SVG/Element/text --- -<div>{{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}}</div> +{{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}} -<p>L'élément SVG <code>text</code> définit un élément graphique contenant du texte. Notez qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre.</p> +L'élément SVG `text` définit un élément graphique contenant du texte. Notez qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre. -<p>Si du texte est écrit dans le SVG sans être intégré dans un balise <text>, il ne sera pas affiché. Le texte n'est pas <em>caché </em>par défaut, la propriété display ne le montre simplement pas.</p> +Si du texte est écrit dans le SVG sans être intégré dans un balise \<text>, il ne sera pas affiché. Le texte n'est pas _caché_ par défaut, la propriété display ne le montre simplement pas. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: xml"><?xml version="1.0"?> -<svg xmlns="http://www.w3.org/2000/svg" - width="100px" height="30px" viewBox="0 0 1000 300"> +```xml +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" + width="100px" height="30px" viewBox="0 0 1000 300"> - <text x="250" y="150" + <text x="250" y="150" font-family="Verdana" - font-size="55"> + font-size="55"> Bonjour tout le monde! - </text> + </text> - <!-- Dessine le contour de l'image --> - <rect x="1" y="1" width="998" height="298" - fill="none" stroke-width="2" /> -</svg> -</pre> + <!-- Dessine le contour de l'image --> + <rect x="1" y="1" width="998" height="298" + fill="none" stroke-width="2" /> +</svg> +``` -<p>L'élément <text> est utilisé pour dessiner des caractères de texte. L'exemple de code suivant écrit un text svg à l'aide de coordonnées x/y.</p> +L'élément \<text> est utilisé pour dessiner des caractères de texte. L'exemple de code suivant écrit un text svg à l'aide de coordonnées x/y. -<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> - <text x="10" y="20">SVG Text Example</text> -</svg> -</pre> +```xml +<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> + <text x="10" y="20">SVG Text Example</text> +</svg> +``` -<p>Le texte en SVG peut être pivoté. L'exemple de code suivant démontre la rotation de texte à l'aide de l'attribut transform.</p> +Le texte en SVG peut être pivoté. L'exemple de code suivant démontre la rotation de texte à l'aide de l'attribut transform. -<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> - <text x="10" y="20" - transform="rotate(30 20,40)"> +```xml +<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> + <text x="10" y="20" + transform="rotate(30 20,40)"> SVG Text Rotation example - </text> -</svg> -</pre> + </text> +</svg> +``` -<p>Le texte SVG peut également être stylisé avec du CSS contenant les propriétés SVG.</p> +Le texte SVG peut également être stylisé avec du CSS contenant les propriétés SVG. -<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> - <text x="10" y="20" +```xml +<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> + <text x="10" y="20" style="font-family: Times New Roman; font-size : 24; stroke : #00ff00; - fill : #0000ff;"> + fill : #0000ff;"> SVG text styling - </text> -</svg> -</pre> + </text> +</svg> +``` -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/fr/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/fr/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> - <li>{{ SVGAttr("transform") }}</li> -</ul> +- [Conditional processing attributes](/fr/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/fr/SVG/Attribute#Core "en/SVG/Attribute#Core") » +- [Graphical event attributes](/fr/SVG/Attribute#GraphicalEvent "en/SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/fr/SVG/Attribute#Presentation "en/SVG/Attribute#Presentation") » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} +- {{ SVGAttr("externalResourcesRequired") }} +- {{ SVGAttr("transform") }} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<ul> - <li>{{ SVGAttr("x") }}</li> - <li>{{ SVGAttr("y") }}</li> - <li>{{ SVGAttr("dx") }}</li> - <li>{{ SVGAttr("dy") }}</li> - <li>{{ SVGAttr("text-anchor") }}</li> - <li>{{ SVGAttr("rotate") }}</li> - <li>{{ SVGAttr("textLength") }}</li> - <li>{{ SVGAttr("lengthAdjust") }}</li> -</ul> +- {{ SVGAttr("x") }} +- {{ SVGAttr("y") }} +- {{ SVGAttr("dx") }} +- {{ SVGAttr("dy") }} +- {{ SVGAttr("text-anchor") }} +- {{ SVGAttr("rotate") }} +- {{ SVGAttr("textLength") }} +- {{ SVGAttr("lengthAdjust") }} -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGTextElement" title="en/DOM/SVGTextElement">SVGTextElement</a></code>.</p> +Cet élément implémente l'interface [`SVGTextElement`](/fr/DOM/SVGTextElement "en/DOM/SVGTextElement"). -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.text")}}</p> +{{Compat("svg.elements.text")}} -<h2 id="Articles_liés">Articles liés</h2> +## Articles liés -<ul> - <li>{{ SVGElement("tspan") }}</li> - <li>{{ SVGElement("tref") }}</li> - <li>{{ SVGElement("altGlyph") }}</li> -</ul> +- {{ SVGElement("tspan") }} +- {{ SVGElement("tref") }} +- {{ SVGElement("altGlyph") }} diff --git a/files/fr/web/svg/element/title/index.md b/files/fr/web/svg/element/title/index.md index e2b24d2990..8c1cafbe4c 100644 --- a/files/fr/web/svg/element/title/index.md +++ b/files/fr/web/svg/element/title/index.md @@ -8,77 +8,57 @@ tags: - SVG Description translation_of: Web/SVG/Element/title --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>Tout élément graphique ou conteneur dans un dessin SVG peut définir un titre en utilisant un élément <strong><code><title></code></strong>, ce titre ne peut contenir que du texte.</p> +Tout élément graphique ou conteneur dans un dessin SVG peut définir un titre en utilisant un élément **`<title>`**, ce titre ne peut contenir que du texte. -<p>Quand l'élément contenant un titre apparaît à l'utilisateur sous forme d'image, l'élément <code><title></code> n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en renplacement des éléments graphiques. De manière générale, cet élément améliore l'accessibilité des documents SVG.</p> +Quand l'élément contenant un titre apparaît à l'utilisateur sous forme d'image, l'élément `<title>` n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en renplacement des éléments graphiques. De manière générale, cet élément améliore l'accessibilité des documents SVG. -<p>L'élément <code><title></code> est souvent le premier enfant de son parent. Notons que les implémentations qui rendent l'élément title en infobulle ne le font que s'il est à cette place.</p> +L'élément `<title>` est souvent le premier enfant de son parent. Notons que les implémentations qui rendent l'élément title en infobulle ne le font que s'il est à cette place. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_globaux">Attributs globaux</h3> +### Attributs globaux -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> -</ul> +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » +- {{ SVGAttr("class") }} +- {{ SVGAttr("style") }} -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +### Attributs spécifiques -<p><em>(Aucun)</em></p> +_(Aucun)_ -<h2 id="Interface_DOM">Interface DOM</h2> +## Interface DOM -<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGTitleElement" title="en/DOM/SVGTitleElement">SVGTitleElement</a></code>.</p> +Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGTitleElement "en/DOM/SVGTitleElement"). -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: html"><svg width="220" height="70" xmlns="http://www.w3.org/2000/svg"> - <title>SVG Title Demo example</title> - <rect x="10" y="10" width="200" height="50" - style="fill:wheat; stroke:blue; stroke-width:1px"> -</svg> -</pre> +```html +<svg width="220" height="70" xmlns="http://www.w3.org/2000/svg"> + <title>SVG Title Demo example</title> + <rect x="10" y="10" width="200" height="50" + style="fill:wheat; stroke:blue; stroke-width:1px"> +</svg> +``` -<p>{{ EmbedLiveSample('Exemple', '100%', 100) }}</p> +{{ EmbedLiveSample('Exemple', '100%', 100) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<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('SVG2', 'struct.html#TitleElement', '<title>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'struct.html#DescriptionAndTitleElements', '<title>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- | +| {{SpecName('SVG2', 'struct.html#TitleElement', '<title>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'struct.html#DescriptionAndTitleElements', '<title>')}} | {{Spec2('SVG1.1')}} | Définition initiale | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.elements.title")}}</p> +{{Compat("svg.elements.title")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{ SVGElement("desc") }}</li> -</ul> +- {{ SVGElement("desc") }} diff --git a/files/fr/web/svg/element/tspan/index.md b/files/fr/web/svg/element/tspan/index.md index 0c80f3a94e..be8f6cad88 100644 --- a/files/fr/web/svg/element/tspan/index.md +++ b/files/fr/web/svg/element/tspan/index.md @@ -8,93 +8,74 @@ tags: - SVG translation_of: Web/SVG/Element/tspan --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>A l'intérieur d'un élément {{SVGElement("text")}}, les propriétés du texte et des polices, ainsi que la position actuelle du texte, peuvent être ajustées de façon absolue ou relative à partir des coodonnées précisées dans un élément <code>tspan</code>.</p> +A l'intérieur d'un élément {{SVGElement("text")}}, les propriétés du texte et des polices, ainsi que la position actuelle du texte, peuvent être ajustées de façon absolue ou relative à partir des coodonnées précisées dans un élément `tspan`. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation -<p>{{svginfo}}</p> +{{svginfo}} -<h2>Exemple</h2> +## Exemple -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html; highlight[9]"><svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> - <style> +```html +<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> + <style> text { font: italic 12px serif; } tspan { font: bold 10px sans-serif; fill: red; } - </style> + </style> - <text x="10" y="30" class="small"> + <text x="10" y="30" class="small"> Vous êtes - <tspan>not</tspan> + <tspan>not</tspan> une banane ! - </text> -</svg></pre> - -<p>{{EmbedLiveSample('exemple', 100, '100%')}}</p> - -<h2 id="Attributs">Attributs</h2> - -<h3 id="Attributs_globaux">Attributs globaux</h3> - -<ul> - <li><a href="/fr/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Attributs de base</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Attributs d'évènements graphiques</a> »</li> - <li><a href="/fr/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Attributs de présentation</a> »</li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> - -<h3 id="Specific_attributes">Specific attributes</h3> - -<ul> - <li>{{SVGAttr("x")}}</li> - <li>{{SVGAttr("y")}}</li> - <li>{{SVGAttr("dx")}}</li> - <li>{{SVGAttr("dy")}}</li> - <li>{{SVGAttr("rotate")}}</li> - <li>{{SVGAttr("textLength")}}</li> - <li>{{SVGAttr("lengthAdjust")}}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGTSpanElement">SVGTSpanElement</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('SVG2', 'text.html#TextElement', '<tspan>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'text.html#TSpanElement', '<tspan>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition originale</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.tspan")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{SVGElement("text")}}</li> -</ul> + </text> +</svg> +``` + +{{EmbedLiveSample('exemple', 100, '100%')}} + +## Attributs + +### Attributs globaux + +- [Attributs de traitement conditionnel](/fr/docs/SVG/Attribute#ConditionalProccessing "SVG/Attribute#ConditionalProccessing") » +- [Attributs de base](/fr/docs/SVG/Attribute#Core "SVG/Attribute#Core") » +- [Attributs d'évènements graphiques](/fr/docs/SVG/Attribute#GraphicalEvent "SVG/Attribute#GraphicalEvent") » +- [Attributs de présentation](/fr/docs/SVG/Attribute#Presentation "SVG/Attribute#Presentation") » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} + +### Specific attributes + +- {{SVGAttr("x")}} +- {{SVGAttr("y")}} +- {{SVGAttr("dx")}} +- {{SVGAttr("dy")}} +- {{SVGAttr("rotate")}} +- {{SVGAttr("textLength")}} +- {{SVGAttr("lengthAdjust")}} + +## Interface DOM + +Cet élément implémente l'interface [`SVGTSpanElement`](/fr/docs/Web/API/SVGTSpanElement). + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------ | -------------------- | +| {{SpecName('SVG2', 'text.html#TextElement', '<tspan>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'text.html#TSpanElement', '<tspan>')}} | {{Spec2('SVG1.1')}} | Définition originale | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.tspan")}} + +## Voir aussi + +- {{SVGElement("text")}} diff --git a/files/fr/web/svg/element/use/index.md b/files/fr/web/svg/element/use/index.md index fc4572cb94..a1a0a1c747 100644 --- a/files/fr/web/svg/element/use/index.md +++ b/files/fr/web/svg/element/use/index.md @@ -3,102 +3,80 @@ title: <use> slug: Web/SVG/Element/use translation_of: Web/SVG/Element/use --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'élement <strong><code><use> </code></strong>permet la duplication de <em>nodes </em>(noeuds du DOM, NDR) définis par <a href="/fr/docs/Web/SVG/Element/defs"><defs></a> afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément <code>use</code> tel que le permet les <a href="/fr/docs/Web/HTML/Element/template">éléments de gabarit</a> grâce à HTML5.<br> - <br> - Puisque les noeuds clonés par <code>use</code> ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style <a href="/fr/docs/Web/CSS" title="en/CSS">CSS</a> sur l'élément <code>use</code> et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les <a href="/fr/docs/Web/CSS/inheritance" title="en/CSS/inheritance">héritages CSS</a>.</p> +L'élement **`<use> `**permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. -<p>Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de <em>même-origine</em> (c'est-à-dire le couple domaine et port identiques) pour l'élément <code>use</code> ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut {{SVGAttr("href")}}.</p> +Puisque les noeuds clonés par `use` ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style [CSS](/fr/docs/Web/CSS "en/CSS") sur l'élément `use` et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les [héritages CSS](/fr/docs/Web/CSS/inheritance "en/CSS/inheritance"). -<div class="warning"> - <p><strong>Attention :</strong> Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations.</p> -</div> +Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de _même-origine_ (c'est-à-dire le couple domaine et port identiques) pour l'élément `use` ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut {{SVGAttr("href")}}. -<h2 id="Contexte_d'usage">Contexte d'usage</h2> +> **Attention :** Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations. -<p>{{svginfo}}</p> +## Contexte d'usage -<h2 id="Attributs">Attributs</h2> +{{svginfo}} -<h3 id="Attributs_globaux">Attributs globaux</h3> +## Attributs -<ul> - <li><a href="/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Graphical_event_attributes" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#Presentation_attributes" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> - <li><a href="/fr/docs/Web/SVG/Attribute#XLink_attributes" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> - <li>{{SVGAttr("transform")}}</li> -</ul> +### Attributs globaux -<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> +- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes "en/SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core_attributes "en/SVG/Attribute#Core") » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#Graphical_event_attributes "en/SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation_attributes "en/SVG/Attribute#Presentation") » +- [Xlink attributes](/fr/docs/Web/SVG/Attribute#XLink_attributes "en/SVG/Attribute#XLink") » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} +- {{SVGAttr("transform")}} -<ul> - <li>{{SVGAttr("x")}}</li> - <li>{{SVGAttr("y")}}</li> - <li>{{SVGAttr("width")}}</li> - <li>{{SVGAttr("height")}}</li> - <li>{{SVGAttr("href")}}</li> -</ul> +### Attributs spécifiques -<h2 id="Interface_DOM">Interface DOM</h2> +- {{SVGAttr("x")}} +- {{SVGAttr("y")}} +- {{SVGAttr("width")}} +- {{SVGAttr("height")}} +- {{SVGAttr("href")}} -<p>Cet élément est implanté par l'interface {{domxref("SVGUseElement")}}.</p> +## Interface DOM -<h2 id="Exemple">Exemple</h2> +Cet élément est implanté par l'interface {{domxref("SVGUseElement")}}. -<pre class="brush: html; highlight[15,17,19]"><svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - <style> +## Exemple + +```html +<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <style> .classA { fill: red; } - </style> - <defs> - <g id="Port"> - <circle style="fill: inherit;" r="10"/> - </g> - </defs> - - <text y="15">black</text> - <use x="50" y="10" href="#Port" /> - <text y="35">red</text> - <use x="50" y="30" href="#Port" class="classA"/> - <text y="55">blue</text> - <use x="50" y="50" href="#Port" style="fill: blue;"/> -</svg> -</pre> - -<p>{{EmbedLiveSample("Exemple", 80, 80)}}</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('SVG2', 'struct.html#UseElement', '<use>')}}</td> - <td>{{Spec2('SVG2')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.elements.use")}}</p> + </style> + <defs> + <g id="Port"> + <circle style="fill: inherit;" r="10"/> + </g> + </defs> + + <text y="15">black</text> + <use x="50" y="10" href="#Port" /> + <text y="35">red</text> + <use x="50" y="30" href="#Port" class="classA"/> + <text y="55">blue</text> + <use x="50" y="50" href="#Port" style="fill: blue;"/> +</svg> +``` + +{{EmbedLiveSample("Exemple", 80, 80)}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------ | ------------------ | +| {{SpecName('SVG2', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG1.1')}} | Initial definition | + +## Compatibilité des navigateurs + +{{Compat("svg.elements.use")}} |