diff options
Diffstat (limited to 'files/fr')
127 files changed, 10430 insertions, 11636 deletions
diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md index db0d54be2a..443c129b0b 100644 --- a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md +++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md @@ -4,221 +4,237 @@ slug: Web/SVG/Applying_SVG_effects_to_HTML_content translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content original_slug: Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML --- -<p>Les navigateurs modernes supportent le format <a href="/fr-FR/docs/SVG">SVG</a> utilisant du <a href="/fr-FR/docs/Web/CSS" title="Cascading Style Sheets">CSS</a> pour appliquer des effets graphiques au contenu HTML.</p> +Les navigateurs modernes supportent le format [SVG](/fr-FR/docs/SVG) utilisant du [CSS](/fr-FR/docs/Web/CSS "Cascading Style Sheets") pour appliquer des effets graphiques au contenu HTML. -<p>Vous pouvez éditer un SVG avec du CSS, soit directement dans le document, soit dans une feuille de style externe. Il y a 3 propriétés que vous pouvez utiliser : <a href="/fr-FR/docs/Web/CSS/mask"><code>mask</code></a>, <a href="/fr-FR/docs/Web/CSS/clip-path"><code>clip-path</code></a> et <a href="/fr-FR/docs/Web/CSS/filter"><code>filter</code></a>.</p> +Vous pouvez éditer un SVG avec du CSS, soit directement dans le document, soit dans une feuille de style externe. Il y a 3 propriétés que vous pouvez utiliser : [`mask`](/fr-FR/docs/Web/CSS/mask), [`clip-path`](/fr-FR/docs/Web/CSS/clip-path) et [`filter`](/fr-FR/docs/Web/CSS/filter). -<div class="note"> - <p><strong>Note :</strong> Dans des fichiers externes, les références à un SVG doivent être à la <a href="/fr-FR/docs/Web/Security/Same-origin_policy">même origine</a> que le document de référence. - </p> -</div> +> **Note :** Dans des fichiers externes, les références à un SVG doivent être à la [même origine](/fr-FR/docs/Web/Security/Same-origin_policy) que le document de référence. -<h2 id="Utilisation_de_SVG_intégré">Utilisation de SVG intégré</h2> +## Utilisation de SVG intégré -<p>Pour appliquer un effet CSS à un SVG, vous devez dans un premier temps créer la feuille CSS qui fait référence au SVG à éditer.</p> +Pour appliquer un effet CSS à un SVG, vous devez dans un premier temps créer la feuille CSS qui fait référence au SVG à éditer. -<pre class="brush: html"><style>p { mask: url(#my-mask); }</style> -</pre> +```html +<style>p { mask: url(#my-mask); }</style> +``` -<p>Dans l'exemple ci-dessus, tous les paragraphes utilisent un <a href="/fr/docs/Web/SVG/Element/mask">SVG <code><mask></code></a> avec l'<a href="/fr-FR/docs/Web/HTML/Global_attributes/id">ID</a> de <code>my-mask</code>.</p> +Dans l'exemple ci-dessus, tous les paragraphes utilisent un [SVG `<mask>`](/fr/docs/Web/SVG/Element/mask) avec l'[ID](/fr-FR/docs/Web/HTML/Global_attributes/id) de `my-mask`. -<h3 id="Appliquer_un_masque">Appliquer un masque</h3> +### Appliquer un masque -<p>Par exemple, vous pouvez appliquer un dégradé à du contenu HTML à l'intérieur de votre document en utilisant SVG et du code CSS similaire à celui-ci :</p> +Par exemple, vous pouvez appliquer un dégradé à du contenu HTML à l'intérieur de votre document en utilisant SVG et du code CSS similaire à celui-ci : -<pre class="brush: html"><svg height="0"> - <mask id="mask-1"> - <linearGradient id="gradient-1" y2="1"> - <stop stop-color="white" offset="0"/> - <stop stop-opacity="0" offset="1"/> - </linearGradient> - <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> - <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> - </mask> -</svg> -</pre> +```html +<svg height="0"> + <mask id="mask-1"> + <linearGradient id="gradient-1" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> + </mask> +</svg> +``` -<pre class="brush: css">.target { +```css +.target { mask: url(#mask-1); } p { width: 300px; border: 1px solid #000; display: inline-block; -}</pre> +} +``` -<p>Notez que dans ce code CSS, le masque est spécifié à l'aide d'une URL à l'ID <code>#mask-1</code>, qui est l'ID du masque SVG spécifié précédemment. Tout le reste concerne le dégradé.</p> +Notez que dans ce code CSS, le masque est spécifié à l'aide d'une URL à l'ID `#mask-1`, qui est l'ID du masque SVG spécifié précédemment. Tout le reste concerne le dégradé. -<p>L'application d'effet SVG à du (X)HTML est réalisé en affectant la classe cible définie ci-dessus à un élément, comme ceci :</p> +L'application d'effet SVG à du (X)HTML est réalisé en affectant la classe cible définie ci-dessus à un élément, comme ceci : -<pre class="brush: html"><p class="target" style="background:lime;"> +```html +<p class="target" style="background:lime;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. -</p> -<p> +</p> +<p> Lorem ipsum dolor sit amet, consectetur adipisicing - <b class="target">elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua.</b> + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> Ut enim ad minim veniam. -</p> -</pre> +</p> +``` -<p>L'exemple ci-dessus serait rendu avec le masque appliqué.</p> +L'exemple ci-dessus serait rendu avec le masque appliqué. -<p>{{EmbedLiveSample('Appliquer_un_masque', 650, 200)}}</p> +{{EmbedLiveSample('Appliquer_un_masque', 650, 200)}} -<h3 id="Exemple_Rogner">Exemple : Rogner</h3> +### Exemple : Rogner -<p>Cet exemple montre comment utiliser un SVG pour rogner du contenu HTML. Remarquez que même les zones cliquables (les liens) sont rognées.</p> +Cet exemple montre comment utiliser un SVG pour rogner du contenu HTML. Remarquez que même les zones cliquables (les liens) sont rognées. -<pre class="brush: html"><p class="target" style="background:lime;"> +```html +<p class="target" style="background:lime;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. -</p> -<p> +</p> +<p> Lorem ipsum dolor sit amet, consectetur adipisicing - <b class="target">elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua.</b> + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> Ut enim ad minim veniam. -</p> +</p> -<button onclick="toggleRadius()">Toggle radius</button> +<button onclick="toggleRadius()">Toggle radius</button> -<svg height="0"> - <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"> - <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> - <rect x="0.5" y="0.2" width="0.5" height="0.8"/> - </clipPath> -</svg> -</pre> +<svg height="0"> + <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> + <rect x="0.5" y="0.2" width="0.5" height="0.8"/> + </clipPath> +</svg> +``` -<pre class="brush: css">.target { +```css +.target { clip-path: url(#clipping-path-1); } p { width: 300px; border: 1px solid #000; display: inline-block; -}</pre> +} +``` -<p>Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID<code> #clipping-path-1</code> qui est référencé dans le CSS. <code>clip-path</code> peut être associé à n'importe quel élément avec la classe <code>target</code>.</p> +Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID` #clipping-path-1` qui est référencé dans le CSS. `clip-path` peut être associé à n'importe quel élément avec la classe `target`. -<p>Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du <code>clip-path</code> établi ci-dessus :</p> +Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du `clip-path` établi ci-dessus : -<pre class="brush: js">function toggleRadius() { +```js +function toggleRadius() { var circle = document.getElementById("circle"); circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; } -</pre> +``` -<p>{{EmbedLiveSample('Exemple_Rogner', 650, 200)}}</p> +{{EmbedLiveSample('Exemple_Rogner', 650, 200)}} -<h3 id="Exemple_Filtres">Exemple : Filtres</h3> +### Exemple : Filtres -<p>Cet exemple montre comment utiliser des filtres avec un SVG. À l'aide du CSS, nous appliquons plusieurs filtres à trois éléments à la fois dans leur état normal, que quand ils sont survolés par la souris (<a href="/fr-FR/docs/Web/CSS/:hover">hover</a>).</p> +Cet exemple montre comment utiliser des filtres avec un SVG. À l'aide du CSS, nous appliquons plusieurs filtres à trois éléments à la fois dans leur état normal, que quand ils sont survolés par la souris ([hover](/fr-FR/docs/Web/CSS/:hover)). -<pre class="brush: html"><p class="target" style="background: lime;"> +```html +<p class="target" style="background: lime;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. -</p> -<pre class="target">lorem</pre> -<p> +</p> +<pre class="target">lorem</pre> +<p> Lorem ipsum dolor sit amet, consectetur adipisicing - <b class="target">elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua.</b> + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> Ut enim ad minim veniam. -</p> -</pre> +</p> +``` -<p>N'importe quel filtre SVG peut être appliqué de cette façon. Par exemple, pour appliquer un effet de flou, vous pouvez utiliser :</p> +N'importe quel filtre SVG peut être appliqué de cette façon. Par exemple, pour appliquer un effet de flou, vous pouvez utiliser : -<pre class="brush: html"><svg height="0"> - <filter id="f1"> - <feGaussianBlur stdDeviation="3"/> - </filter> -</svg></pre> +```html +<svg height="0"> + <filter id="f1"> + <feGaussianBlur stdDeviation="3"/> + </filter> +</svg> +``` -<p>Vous pouvez aussi appliquer une matrice de transformation des couleurs :</p> +Vous pouvez aussi appliquer une matrice de transformation des couleurs : -<pre class="brush: html"><svg height="0"> - <filter id="f2"> - <feColorMatrix values="0.3333 0.3333 0.3333 0 0 +```html +<svg height="0"> + <filter id="f2"> + <feColorMatrix values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 - 0 0 0 1 0"/> - </filter> -</svg> -</pre> - -<p>Et encore d'autres filtres :</p> - -<pre class="brush: html"><svg height="0"> - <filter id="f3"> - <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" - order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> - </filter> - <filter id="f4"> - <feSpecularLighting surfaceScale="5" specularConstant="1" - specularExponent="10" lighting-color="white"> - <fePointLight x="-5000" y="-10000" z="20000"/> - </feSpecularLighting> - </filter> - <filter id="f5"> - <feColorMatrix values="1 0 0 0 0 + 0 0 0 1 0"/> + </filter> +</svg> +``` + +Et encore d'autres filtres : + +```html +<svg height="0"> + <filter id="f3"> + <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> + </filter> + <filter id="f4"> + <feSpecularLighting surfaceScale="5" specularConstant="1" + specularExponent="10" lighting-color="white"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + </filter> + <filter id="f5"> + <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 - 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> - </filter> -</svg></pre> + 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> + </filter> +</svg> +``` -<p>Les cinq filtres sont appliqués en utilisant le CSS suivant :</p> +Les cinq filtres sont appliqués en utilisant le CSS suivant : -<pre class="brush: css">p.target { filter:url(#f3); } +```css +p.target { filter:url(#f3); } p.target:hover { filter:url(#f5); } b.target { filter:url(#f1); } b.target:hover { filter:url(#f4); } pre.target { filter:url(#f2); } pre.target:hover { filter:url(#f3); } -</pre> +``` -<p>{{EmbedLiveSample('Exemple_Filtres', 650, 200)}}</p> +{{EmbedLiveSample('Exemple_Filtres', 650, 200)}} -<h3 id="Exemple_Texte_flouté">Exemple : Texte flouté</h3> +### Exemple : Texte flouté -<p>Pour flouter le texte, Webkit a un filtre CSS (préfixé) appelé blur (voir aussi <a href="/fr-FR/docs/Web/CSS/filter#blur%28%29_2">CSS filter</a>). Vous pouvez obtenir le même effet en utilisant des filtres SVG.</p> +Pour flouter le texte, Webkit a un filtre CSS (préfixé) appelé blur (voir aussi [CSS filter](/fr-FR/docs/Web/CSS/filter#blur%28%29_2)). Vous pouvez obtenir le même effet en utilisant des filtres SVG. -<pre class="brush: html"><p class="blur">Time to clean my glasses</p> -<svg height="0"> - <defs> - <filter id="wherearemyglasses" x="0" y="0"> - <feGaussianBlur in="SourceGraphic" stdDeviation="1"/> - </filter> - </defs> -</svg> -</pre> +```html +<p class="blur">Time to clean my glasses</p> +<svg height="0"> + <defs> + <filter id="wherearemyglasses" x="0" y="0"> + <feGaussianBlur in="SourceGraphic" stdDeviation="1"/> + </filter> + </defs> +</svg> +``` -<p>Vous pouvez appliquer le filtre SVG et le filtre CSS à la même classe :</p> +Vous pouvez appliquer le filtre SVG et le filtre CSS à la même classe : -<pre class="brush: css">.blur { filter: url(#wherearemyglasses); }</pre> +```css +.blur { filter: url(#wherearemyglasses); } +``` -<p>{{ EmbedLiveSample('Exemple_Texte_flouté', 300, 100) }}</p> +{{ EmbedLiveSample('Exemple_Texte_flouté', 300, 100) }} -<p>Le floutage est un calcul assez lourd alors utilisez le avec précaution et faites particulièrement attention aux éléments scrollables ou animés.</p> +Le floutage est un calcul assez lourd alors utilisez le avec précaution et faites particulièrement attention aux éléments scrollables ou animés. -<h2 id="Utilisation_de_références_externes">Utilisation de références externes</h2> +## Utilisation de références externes -<p>Vous pouvez utiliser des fichiers externes pour rogner ou pour appliquer des masques et des filtres SVG, tant que cette source vient de la même origine que le document HTML auquel il est appliqué.</p> +Vous pouvez utiliser des fichiers externes pour rogner ou pour appliquer des masques et des filtres SVG, tant que cette source vient de la même origine que le document HTML auquel il est appliqué. -<p>Par exemple, si votre CSS est un fichier nommé <code>default.css</code>, il pourrait contenir le code ci-dessous :</p> +Par exemple, si votre CSS est un fichier nommé `default.css`, il pourrait contenir le code ci-dessous : -<pre class="brush: css">.target { clip-path: url(resources.svg#c1); }</pre> +```css +.target { clip-path: url(resources.svg#c1); } +``` -<p>Le SVG est alors importé depuis un fichier nommé <code>resources.svg</code>, utilisant <code>clip-path</code> avec l'ID <code>c1</code>.</p> +Le SVG est alors importé depuis un fichier nommé `resources.svg`, utilisant `clip-path` avec l'ID `c1`. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr-FR/docs/SVG" title="SVG">SVG</a></li> - <li><a href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">SVG Effects for HTML Content</a> (blog post)</li> - <li><a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog » Blog Archive » SVG External Document References</a></li> -</ul> +- [SVG](/fr-FR/docs/SVG "SVG") +- [SVG Effects for HTML Content](http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html) (blog post) +- [\[archive.org\] Web Tech Blog » Blog Archive » SVG External Document References](http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/ "Web Tech Blog » Blog Archive » SVG External Document References") diff --git a/files/fr/web/svg/attribute/accent-height/index.md b/files/fr/web/svg/attribute/accent-height/index.md index d720356008..7f6314794c 100644 --- a/files/fr/web/svg/attribute/accent-height/index.md +++ b/files/fr/web/svg/attribute/accent-height/index.md @@ -10,41 +10,50 @@ tags: - SVG translation_of: Web/SVG/Attribute/accent-height --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>accent-height</code></strong> définit la distance entre l'origine et le haut des accents placés sur les caractères. Cette distance est mesurée dans le système de coordonnées de la police.</p> +L'attribut **`accent-height`** définit la distance entre l'origine et le haut des accents placés sur les caractères. Cette distance est mesurée dans le système de coordonnées de la police. -<p>Si cet attribut n'est pas défini, l'effet obtenu est identique à celui obtenu avec la valeur de l'attribut {{SVGAttr("ascent")}}.</p> +Si cet attribut n'est pas défini, l'effet obtenu est identique à celui obtenu avec la valeur de l'attribut {{SVGAttr("ascent")}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Aucune</td> - </tr> - <tr> - <th scope="row">Type de valeur</th> - <td><a href="/fr/docs/Web/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a></td> - </tr> - <tr> - <th scope="row">Peut être animé</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Spécification</th> - <td><a href="https://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute">SVG 1.1 (seconde édition)</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>Aucune</td> + </tr> + <tr> + <th scope="row">Type de valeur</th> + <td> + <a + href="/fr/docs/Web/SVG/Content_type#Length" + title="https://developer.mozilla.org/en/SVG/Content_type#Number" + ><number></a + > + </td> + </tr> + <tr> + <th scope="row">Peut être animé</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Spécification</th> + <td> + <a + href="https://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute" + >SVG 1.1 (seconde édition)</a + > + </td> + </tr> + </tbody> </table> -<p>{{page("/fr/docs/Web/SVG/Content_type","Number")}}</p> +{{page("/fr/docs/Web/SVG/Content_type","Number")}} -<h2 id="Éléments">Éléments</h2> +## Éléments -<p>On peut utiliser l'attribut <code>accent-height</code> sur les éléments suivants :</p> +On peut utiliser l'attribut `accent-height` sur les éléments suivants : -<ul> - <li>{{SVGElement("font-face")}}</li> -</ul> +- {{SVGElement("font-face")}} diff --git a/files/fr/web/svg/attribute/clip-path/index.md b/files/fr/web/svg/attribute/clip-path/index.md index 7aceae680c..bb69c317d3 100644 --- a/files/fr/web/svg/attribute/clip-path/index.md +++ b/files/fr/web/svg/attribute/clip-path/index.md @@ -6,98 +6,82 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/clip-path --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>clip-path</code></strong> permet d'appliquer un détourage à un élément.</p> +L'attribut **`clip-path`** permet d'appliquer un détourage à un élément. -<div class="note"> - <p><strong>Note :</strong> <code>clip-path</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `clip-path` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}</p> +Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}} -<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 20 20" xmlns="http://www.w3.org/2000/svg"> - <clipPath id="myClip" clipPathUnits="objectBoundingBox"> - <circle cx=".5" cy=".5" r=".5" /> - </clipPath> +```html +<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <clipPath id="myClip" clipPathUnits="objectBoundingBox"> + <circle cx=".5" cy=".5" r=".5" /> + </clipPath> - <!-- En haut à gauche: Applique un détourage précédemment crée --> - <rect x="1" y="1" width="8" height="8" stroke="green" - clip-path="url(#myClip)" /> + <!-- En haut à gauche: Applique un détourage précédemment crée --> + <rect x="1" y="1" width="8" height="8" stroke="green" + clip-path="url(#myClip)" /> - <!-- En haut à droite: Applique un détourage sur fill-box via une forme CSS. - Revient à créer un détourage avec clipPathUnits="objectBoundingBox" --> - <rect x="11" y="1" width="8" height="8" stroke="green" - clip-path="circle() fill-box" /> + <!-- En haut à droite: Applique un détourage sur fill-box via une forme CSS. + Revient à créer un détourage avec clipPathUnits="objectBoundingBox" --> + <rect x="11" y="1" width="8" height="8" stroke="green" + clip-path="circle() fill-box" /> - <!-- En bas à gauche: Applique un détourage sur stroke-box via une forme CSS. --> - <rect x="1" y="11" width="8" height="8" stroke="green" - clip-path="circle() stroke-box" /> + <!-- En bas à gauche: Applique un détourage sur stroke-box via une forme CSS. --> + <rect x="1" y="11" width="8" height="8" stroke="green" + clip-path="circle() stroke-box" /> - <!-- En bas à droite: Applique un détourage sur view-box via une forme CSS. - Revient à créer un détourage avec clipPathUnits="userSpaceOnUse" --> - <rect x="11" y="11" width="8" height="8" stroke="green" - clip-path="circle() view-box" /> -</svg></pre> + <!-- En bas à droite: Applique un détourage sur view-box via une forme CSS. + Revient à créer un détourage avec clipPathUnits="userSpaceOnUse" --> + <rect x="11" y="11" width="8" height="8" stroke="green" + clip-path="circle() view-box" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="Notes_d'usage">Notes d'usage</h2> +## Notes d'usage <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>{{cssxref('url')}} | [ {{cssxref('basic-shape')}} || <geometry-box> ] | <code>none</code></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>none</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + {{cssxref('url')}} | [ {{cssxref('basic-shape')}} || + <geometry-box> ] | <code>none</code> + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<dl> - <dt><geometry-box></dt> - <dd>une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: <code>fill-box</code> indique d'utiliser la zone de sélection de l'objet ; <code>stroke-box</code> d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; <code>view-box</code> d'utiliser le document SVG parent.</dd> -</dl> +- \<geometry-box> + - : une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: `fill-box` indique d'utiliser la zone de sélection de l'objet ; `stroke-box` d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; `view-box` d'utiliser le document SVG parent. -<div class="note"> - <p><strong>Note:</strong> Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}.</p> -</div> +> **Note :** Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}. -<h2>Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.clip-path")}}</p> +{{Compat("svg.attributes.presentation.clip-path")}} -<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("CSS Masks", "#the-clip-path", 'clip-path')}}</td> - <td>{{Spec2('CSS Masks')}}</td> - <td>Étend son application aux éléments HTML. La propriété <code>clip-path</code> remplace la propriété {{cssxref("clip")}} dépréciée.</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale (s'applique sur les éléments SVG uniquement).</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}} | {{Spec2('CSS Masks')}} | Étend son application aux éléments HTML. La propriété `clip-path` remplace la propriété {{cssxref("clip")}} dépréciée. | +| {{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}} | {{Spec2('SVG1.1')}} | Définition initiale (s'applique sur les éléments SVG uniquement). | diff --git a/files/fr/web/svg/attribute/color/index.md b/files/fr/web/svg/attribute/color/index.md index d1475d4c18..1dc36653d5 100644 --- a/files/fr/web/svg/attribute/color/index.md +++ b/files/fr/web/svg/attribute/color/index.md @@ -6,62 +6,68 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/color --- -<p>{{SVGRef}}</p> +{{SVGRef}} -<p>L'attribut <code>color</code> est utilisé pour définir indirectement une valeur potentielle (<code>currentColor</code>) pour les attributs {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }}, {{ SvgAttr("stop-color") }}, {{ SVGAttr("flood-color") }} et {{ SVGAttr("lighting-color") }}.</p> +L'attribut `color` est utilisé pour définir indirectement une valeur potentielle (`currentColor`) pour les attributs {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }}, {{ SvgAttr("stop-color") }}, {{ SVGAttr("flood-color") }} et {{ SVGAttr("lighting-color") }}. -<div class="note"> - <p><strong>Note :</strong> <code>color</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir {{ cssxref("color","CSS color") }} pour plus d'informations.</p> -</div> +> **Note :** `color` étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir {{ cssxref("color","CSS color") }} pour plus d'informations. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Attribut de présentation</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td><a href="/fr/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | inherit</td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Yes</td> - </tr> - <tr> - <th scope="row">Document normatif</th> - <td><a href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>Attribut de présentation</td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td> + <a href="/fr/SVG/Content_type#Color" title="en/SVG/Content_type#Color" + ><color></a + > + | inherit + </td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Document normatif</th> + <td> + <a href="http://www.w3.org/TR/SVG11/color.html#ColorProperty" + >SVG 1.1 (2nd Edition)</a + > + </td> + </tr> + </tbody> </table> -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: html"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> - <g color="green"> - <rect width="50" height="50" fill="currentColor" /> - <circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" /> - </g> -</svg> -</pre> +```html +<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <g color="green"> + <rect width="50" height="50" fill="currentColor" /> + <circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" /> + </g> +</svg> +``` -<p>{{ EmbedLiveSample('Exemple', '100%', '110') }}</p> +{{ EmbedLiveSample('Exemple', '100%', '110') }} -<h2 id="Éléments">Éléments</h2> +## Éléments -<p>Les éléments suivants peuvent utiliser l'attribut <code>color</code>:</p> +Les éléments suivants peuvent utiliser l'attribut `color`: -<ul> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel" title="en/SVG/Element#Text_content_elements">Éléments de contenu textuel</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_formes" title="en/SVG/Element#Shape_elements">Éléments de formes</a> »</li> - <li>{{ SVGElement("stop") }}</li> - <li>{{ SVGElement("feFlood") }}</li> - <li>{{ SVGElement("feDiffuseLighting") }}</li> - <li>{{ SVGElement("feSpecularLighting") }}</li> -</ul> +- [Éléments de contenu textuel](/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel "en/SVG/Element#Text_content_elements") » +- [Éléments de formes](/fr/docs/Web/SVG/Element#Éléments_de_formes "en/SVG/Element#Shape_elements") » +- {{ SVGElement("stop") }} +- {{ SVGElement("feFlood") }} +- {{ SVGElement("feDiffuseLighting") }} +- {{ SVGElement("feSpecularLighting") }} -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.color")}}</p> +{{Compat("svg.attributes.presentation.color")}} diff --git a/files/fr/web/svg/attribute/conditional_processing/index.md b/files/fr/web/svg/attribute/conditional_processing/index.md index fe0f0c644d..a753991283 100644 --- a/files/fr/web/svg/attribute/conditional_processing/index.md +++ b/files/fr/web/svg/attribute/conditional_processing/index.md @@ -3,32 +3,28 @@ title: Attributs SVG de traitement conditionnel slug: Web/SVG/Attribute/Conditional_Processing translation_of: Web/SVG/Attribute/Conditional_Processing --- -<p>Les <em>attributs SVG de traitement conditionnel</em> sont tous les attributs qui peuvent être spécifiés sur des éléments SVG pour contrôler si l'élément sur lequel il s'applique doit s'afficher ou non.</p> +Les _attributs SVG de traitement conditionnel_ sont tous les attributs qui peuvent être spécifiés sur des éléments SVG pour contrôler si l'élément sur lequel il s'applique doit s'afficher ou non. -<ul> - <li>externalResourcesRequired</li> - <li>requiredExtensions</li> - <li>requiredFeatures</li> - <li>systemLanguage</li> -</ul> +- externalResourcesRequired +- requiredExtensions +- requiredFeatures +- systemLanguage -<h2 id="Attributs">Attributs</h2> +## Attributs -<dl> - <dt>{{SVGAttr('externalResourcesRequired')}} {{deprecated_inline('svg2')}}</dt> - <dd>Si sa valeur vaut <code>true</code>, cela indique que le navigateur doit attendre que toutes les ressources externes nécessaires au rendu de cet élément soient chargées avant de traiter l'élément associé.<br> - <small><em>Valeur</em>: <strong><code>false</code></strong>|<code>true</code>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt>{{SVGAttr('requiredExtensions')}}</dt> - <dd>Liste toutes les fonctionnalités devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.<br> - <small><em>Valeur</em>: Une liste d'URI séparées par des espaces; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt>{{SVGAttr('requiredFeatures')}} {{deprecated_inline('svg2')}}</dt> - <dd>Liste toutes les fonctionnalités, <a href="https://www.w3.org/TR/SVG11/feature.html">telles que définies dans la spécification SVG 1.1</a>, devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.<br> - <small><em>Valeur</em>: Une list d'URI séparées par espaces; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt>{{SVGAttr('systemLanguage')}}</dt> - <dd>Indique la langue que l'utilisatteur doit avoir choisit pour autoriser l'affichage l'élément associé.<br> - <small><em>Valeur</em>: Une liste d'<a href="http://www.ietf.org/rfc/bcp/bcp47.txt">ID de langage</a> séparés par des virgules; <em>Animation</em>: <strong>Non</strong></small></dd> -</dl> +- {{SVGAttr('externalResourcesRequired')}} {{deprecated_inline('svg2')}} + - : Si sa valeur vaut `true`, cela indique que le navigateur doit attendre que toutes les ressources externes nécessaires au rendu de cet élément soient chargées avant de traiter l'élément associé. + _Valeur_: **`false`**|`true`; _Animation_: **Non** +- {{SVGAttr('requiredExtensions')}} + - : Liste toutes les fonctionnalités devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé. + _Valeur_: Une liste d'URI séparées par des espaces; _Animation_: **Non** +- {{SVGAttr('requiredFeatures')}} {{deprecated_inline('svg2')}} + - : Liste toutes les fonctionnalités, [telles que définies dans la spécification SVG 1.1](https://www.w3.org/TR/SVG11/feature.html), devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé. + _Valeur_: Une list d'URI séparées par espaces; _Animation_: **Non** +- {{SVGAttr('systemLanguage')}} + - : Indique la langue que l'utilisatteur doit avoir choisit pour autoriser l'affichage l'élément associé. + _Valeur_: Une liste d'[ID de langage](http://www.ietf.org/rfc/bcp/bcp47.txt) séparés par des virgules; _Animation_: **Non** -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.conditional_processing")}}</p> +{{Compat("svg.attributes.conditional_processing")}} diff --git a/files/fr/web/svg/attribute/core/index.md b/files/fr/web/svg/attribute/core/index.md index bb0b65989e..68eba8a13f 100644 --- a/files/fr/web/svg/attribute/core/index.md +++ b/files/fr/web/svg/attribute/core/index.md @@ -3,61 +3,50 @@ title: Attributs SVG de base slug: Web/SVG/Attribute/Core translation_of: Web/SVG/Attribute/Core --- -<p>Les <em>attributs SVG de base</em> sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG.</p> - -<ul> - <li><code>id</code></li> - <li><code>lang</code></li> - <li><code>tabindex</code></li> - <li><code>xml:base</code></li> - <li><code>xml:lang</code></li> - <li><code>xml:space</code></li> -</ul> - -<h2 id="Attributs">Attributs</h2> - -<dl> - <dt>{{SVGAttr('id')}}</dt> - <dd>Définit un identifiant (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément pour pouvoir y faire référence plus tard, comme identificateur de fragment, dans du code, ou pour appliquer du style (avec CSS).<br> - <small><em>Valuer</em>: Tout ID valide; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt>{{SVGAttr('lang')}}</dt> - <dd> - <p>Définit le langage de l'élément — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">document IETF "Tags for Identifying Languages" (BCP47)</a>.</p> - - <div class="note"> - <p><strong>Note :</strong> SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p> - </div> - - <p><small><em>Valeur</em>: Tout ID de langage valide; <em>Animation</em>: <strong>Non</strong></small></p> - </dd> - <dt>{{SVGAttr('tabindex')}}</dt> - <dd>L'attribut SVG tabindex permet de contrôler si un élément peut prendre le focus et définit l'ordre relatif des éléments pour la navigation via tabulation.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Integer"><integer></a>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt>{{SVGAttr('xml:base')}}</dt> - <dd>Spécifie une IRI de base autre que celle du document.<br> - <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt>{{SVGAttr('xml:lang')}}</dt> - <dd> - <p>C'est un attribut universel autorisé dans tous les documents XML pour définir le langage du texte présent dans l'élément. Son utilisation est presque identique à celle de l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels/lang">lang</a> en HTML, hormis que les documents XML 1.0 ne permettent pas l'utilisation d'une valeur d'attribut nulle (<code>xml:lang=""</code>) pour indiquer un langage inconnu. À la place, utiliser <code>xml:lang="und"</code>.</p> - - <div class="note"> - <p><strong>Note :</strong> SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p> - </div> - - <p><small><em>Valeur</em>: Tout ID de langage valide; <em>Animation</em>: <strong>Non</strong></small></p> - </dd> - <dt>{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}</dt> - <dd> - <p>SVG prend en charge l'attribut XML standard <code>xml:space</code> pour spécifier le traitement des caractères d'espaces dans les données d'un élément {{ SVGElement("text") }} donné.</p> - - <div class="note"> - <p><strong>Note:</strong> Plutôt qu'utiliser l'attribut <code>xml:space</code> vous devriez utiliser la propriété CSS {{cssxref('white-space')}} à la place.</p> - </div> - - <p><small><em>Valeur</em>: <code><strong>default</strong></code> | <code>preserve</code>; <em>Animation</em>: <strong>Non</strong></small></p> - </dd> -</dl> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.attributes.core")}}</p> +Les _attributs SVG de base_ sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG. + +- `id` +- `lang` +- `tabindex` +- `xml:base` +- `xml:lang` +- `xml:space` + +## Attributs + +- {{SVGAttr('id')}} + - : Définit un identifiant (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément pour pouvoir y faire référence plus tard, comme identificateur de fragment, dans du code, ou pour appliquer du style (avec CSS). + _Valuer_: Tout ID valide; _Animation_: **Non** +- {{SVGAttr('lang')}} + + - : Définit le langage de l'élément — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le [document IETF "Tags for Identifying Languages" (BCP47)](https://www.ietf.org/rfc/bcp/bcp47.txt). + + > **Note :** SVG 2 introduit l'attribut `lang`. Si les attributs `lang` et `xml:lang` sont tous les deux définis, `xml:lang` a la priorité sur `lang`. + + _Valeur_: Tout ID de langage valide; _Animation_: **Non** + +- {{SVGAttr('tabindex')}} + - : L'attribut SVG tabindex permet de contrôler si un élément peut prendre le focus et définit l'ordre relatif des éléments pour la navigation via tabulation. + _Type de valeur_: [\<integer>](/docs/Web/SVG/Content_type#Integer); _Animation_: **Non** +- {{SVGAttr('xml:base')}} + - : Spécifie une IRI de base autre que celle du document. + _Type de valeur_: [\<IRI>](/docs/Web/SVG/Content_type#IRI); _Animation_: **Non** +- {{SVGAttr('xml:lang')}} + + - : C'est un attribut universel autorisé dans tous les documents XML pour définir le langage du texte présent dans l'élément. Son utilisation est presque identique à celle de l'attribut [lang](/fr/docs/Web/HTML/Attributs_universels/lang) en HTML, hormis que les documents XML 1.0 ne permettent pas l'utilisation d'une valeur d'attribut nulle (`xml:lang=""`) pour indiquer un langage inconnu. À la place, utiliser `xml:lang="und"`. + + > **Note :** SVG 2 introduit l'attribut `lang`. Si les attributs `lang` et `xml:lang` sont tous les deux définis, `xml:lang` a la priorité sur `lang`. + + _Valeur_: Tout ID de langage valide; _Animation_: **Non** + +- {{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}} + + - : SVG prend en charge l'attribut XML standard `xml:space` pour spécifier le traitement des caractères d'espaces dans les données d'un élément {{ SVGElement("text") }} donné. + + > **Note :** Plutôt qu'utiliser l'attribut `xml:space` vous devriez utiliser la propriété CSS {{cssxref('white-space')}} à la place. + + _Valeur_: **`default`** | `preserve`; _Animation_: **Non** + +## Compatibilité des navigateurs + +{{Compat("svg.attributes.core")}} diff --git a/files/fr/web/svg/attribute/cx/index.md b/files/fr/web/svg/attribute/cx/index.md index 02eeedde0c..fdc7a96f5c 100644 --- a/files/fr/web/svg/attribute/cx/index.md +++ b/files/fr/web/svg/attribute/cx/index.md @@ -6,167 +6,166 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/cx --- -<p>{{SVGRef}}</p> +{{SVGRef}} -<p>L'attribut <strong><code>cx</code></strong> définit la coordonnée de l'axe x pour le point central d'un élément.</p> +L'attribut **`cx`** définit la coordonnée de l'axe x pour le point central d'un élément. -<p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p> +Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}} -<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 300 100" xmlns="http://www.w3.org/2000/svg"> - <radialGradient cx="25%" id="myGradient"> - <stop offset="0" stop-color="white" /> - <stop offset="100%" stop-color="black" /> - </radialGradient> +```html +<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <radialGradient cx="25%" id="myGradient"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> - <circle cx="50" cy="50" r="45"/> - <ellipse cx="150" cy="50" rx="45" ry="25" /> - <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /> -</svg></pre> + <circle cx="50" cy="50" r="45"/> + <ellipse cx="150" cy="50" rx="45" ry="25" /> + <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', 100, 100)}}</p> +{{EmbedLiveSample('exemple', 100, 100)}} -<h2 id="circle">circle</h2> +## circle -<p>Pour un élément {{SVGElement('circle')}}, <code>cx</code> définit la coordonnée x de son centre.</p> +Pour un élément {{SVGElement('circle')}}, `cx` définit la coordonnée x de son centre. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + | + <strong + ><a href="/docs/Web/SVG/Content_type#Percentage" + ><percentage></a + ></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note:</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p> -</div> +> **Note :** À partir de SVG2, `cx` est une _propriété de géométrie_, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles. -<h2 id="ellipse">ellipse</h2> +## ellipse -<p>Pour un élément {{SVGElement('ellipse')}}, <code>cx</code> définit la coordonnées x de son centre.</p> +Pour un élément {{SVGElement('ellipse')}}, `cx` définit la coordonnées x de son centre. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + | + <strong + ><a href="/docs/Web/SVG/Content_type#Percentage" + ><percentage></a + ></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p> -</div> +> **Note :** À partir de SVG2, `cx` est une _propriété de géométrie_, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses. -<h2 id="radialGradient">radialGradient</h2> +## radialGradient -<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cx</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="/fr/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite du dégradé</a> à <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p> +Pour un élément {{SVGElement('radialGradient')}}, `cx` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite du dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") à **100%** corresponde au périmètre de ce plus grand cercle. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>50%</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h4 id="autre_exemple">Autre exemple</h4> - -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> - -<pre class="brush: html"><svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> - <defs> - <radialGradient cx="0" id="myGradient000"> - <stop offset="0%" stop-color="gold" /> - <stop offset="50%" stop-color="green" /> - <stop offset="100%" stop-color="white" /> - </radialGradient> - - <radialGradient cx="50%" id="myGradient050"> - <stop offset="0%" stop-color="gold" /> - <stop offset="50%" stop-color="green" /> - <stop offset="100%" stop-color="white" /> - </radialGradient> - - <radialGradient cx="100%" id="myGradient100"> - <stop offset="0%" stop-color="gold" /> - <stop offset="50%" stop-color="green" /> - <stop offset="100%" stop-color="white" /> - </radialGradient> - </defs> - - <rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /> - <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /> - <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /> -</svg></pre> - -<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</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", "geometry.html#CX", "cx")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition comme propriété de géométrie</td> - </tr> - <tr> - <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour SVG2</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><radialGradient></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><ellipse></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><circle></code></td> - </tr> - </tbody> -</table> +#### Autre exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient cx="0" id="myGradient000"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cx="50%" id="myGradient050"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cx="100%" id="myGradient100"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + </defs> + + <rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /> + <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /> + <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /> +</svg> +``` + +{{EmbedLiveSample('radialGradient', 150, '100%')}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------- | +| {{SpecName("SVG2", "geometry.html#CX", "cx")}} | {{Spec2("SVG2")}} | Définition comme propriété de géométrie | +| {{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}} | {{Spec2("SVG2")}} | Définition pour SVG2 | +| {{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<radialGradient>` | +| {{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<ellipse>` | +| {{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<circle>` | diff --git a/files/fr/web/svg/attribute/cy/index.md b/files/fr/web/svg/attribute/cy/index.md index 24ec4c6c58..b230dfd661 100644 --- a/files/fr/web/svg/attribute/cy/index.md +++ b/files/fr/web/svg/attribute/cy/index.md @@ -6,167 +6,166 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/cy --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>cy</code></strong> définit la coordonnée de l'axe y pour le point central d'un élément.</p> +L'attribut **`cy`** définit la coordonnée de l'axe y pour le point central d'un élément. -<p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p> +Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}} -<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 300" xmlns="http://www.w3.org/2000/svg"> - <radialGradient cy="25%" id="myGradient"> - <stop offset="0" stop-color="white" /> - <stop offset="100%" stop-color="black" /> - </radialGradient> +```html +<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> + <radialGradient cy="25%" id="myGradient"> + <stop offset="0" stop-color="white" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> - <circle cy="50" cx="50" r="45"/> - <ellipse cy="150" cx="50" rx="45" ry="25" /> - <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /> -</svg></pre> + <circle cy="50" cx="50" r="45"/> + <ellipse cy="150" cx="50" rx="45" ry="25" /> + <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 300)}}</p> +{{EmbedLiveSample('exemple', '100%', 300)}} -<h2 id="circle">circle</h2> +## circle -<p>Pour un élément {{SVGElement('circle')}}, <code>cy</code> définit la coordonnée y de son centre.</p> +Pour un élément {{SVGElement('circle')}}, `cy` définit la coordonnée y de son centre. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + | + <strong + ><a href="/docs/Web/SVG/Content_type#Percentage" + ><percentage></a + ></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note:</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p> -</div> +> **Note :** À partir de SVG2, `cy` est une _propriété de géométrie_, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles. -<h2 id="ellipse">ellipse</h2> +## ellipse -<p>Pour un élément {{SVGElement('ellipse')}}, <code>cy</code> définit la coordonnée y de son centre.</p> +Pour un élément {{SVGElement('ellipse')}}, `cy` définit la coordonnée y de son centre. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + | + <strong + ><a href="/docs/Web/SVG/Content_type#Percentage" + ><percentage></a + ></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p> -</div> +> **Note :** À partir de SVG2, `cy` est une _propriété de géométrie_, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses. -<h2 id="radialGradient">radialGradient</h2> +## radialGradient -<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cy</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="/fr/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite de dégradé</a> de <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p> +Pour un élément {{SVGElement('radialGradient')}}, `cy` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite de dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") de **100%** corresponde au périmètre de ce plus grand cercle. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>50%</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h4 id="autre_exemple">Autre exemple</h4> - -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> - -<pre class="brush: html"><svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> - <defs> - <radialGradient cy="0" id="myGradient000"> - <stop offset="0%" stop-color="gold" /> - <stop offset="50%" stop-color="green" /> - <stop offset="100%" stop-color="white" /> - </radialGradient> - - <radialGradient cy="50%" id="myGradient050"> - <stop offset="0%" stop-color="gold" /> - <stop offset="50%" stop-color="green" /> - <stop offset="100%" stop-color="white" /> - </radialGradient> - - <radialGradient cy="100%" id="myGradient100"> - <stop offset="0%" stop-color="gold" /> - <stop offset="50%" stop-color="green" /> - <stop offset="100%" stop-color="white" /> - </radialGradient> - </defs> - - <rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /> - <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /> - <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /> -</svg></pre> - -<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</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", "geometry.html#CY", "cy")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition comme propriété de géométrie</td> - </tr> - <tr> - <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour SVG2</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><radialGradient></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><ellipse></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><circle></code></td> - </tr> - </tbody> -</table> +#### Autre exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient cy="0" id="myGradient000"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cy="50%" id="myGradient050"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + + <radialGradient cy="100%" id="myGradient100"> + <stop offset="0%" stop-color="gold" /> + <stop offset="50%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </radialGradient> + </defs> + + <rect x="1" y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /> + <rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /> + <rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /> +</svg> +``` + +{{EmbedLiveSample('radialGradient', 150, '100%')}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------- | +| {{SpecName("SVG2", "geometry.html#CY", "cy")}} | {{Spec2("SVG2")}} | Définition comme propriété de géométrie | +| {{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}} | {{Spec2("SVG2")}} | Définition pour SVG2 | +| {{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<radialGradient>` | +| {{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<ellipse>` | +| {{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<circle>` | diff --git a/files/fr/web/svg/attribute/d/index.md b/files/fr/web/svg/attribute/d/index.md index 8593128d7e..95bd172da6 100644 --- a/files/fr/web/svg/attribute/d/index.md +++ b/files/fr/web/svg/attribute/d/index.md @@ -6,194 +6,188 @@ tags: - SVG translation_of: Web/SVG/Attribute/d --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>d</code></strong> définit un tracé à dessiner.</p> +L'attribut **`d`** définit un tracé à dessiner. -<p>La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.</p> +La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous. -<p>Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}</p> +Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}} -<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"> - <path fill="none" stroke="red" +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" d="M 10,30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30 Q 90, 60 50, 90 - Q 10, 60 10, 30 z" /> -</svg></pre> + Q 10, 60 10, 30 z" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="Tracé">Tracé</h2> +## Tracé -<p>Pour un {{SVGElement('path')}}, <code>d</code> est une chaîne de caractère qui contient une série de commandes de tracé qui définissent le tracé à dessiner.</p> +Pour un {{SVGElement('path')}}, `d` est une chaîne de caractère qui contient une série de commandes de tracé qui définissent le tracé à dessiner. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#String"><string></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="glyph">glyph</h2> +## glyph -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.</p> -</div> +> **Attention :** Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé. -<p>Pour un {{SVGElement('glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p> +Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#String"><string></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> Le point d'origine (coordonnée <code>0,0</code>) est généralement le point du <em>coin en haut à gauche</em> du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.</p> -</div> +> **Note :** Le point d'origine (coordonnée `0,0`) est généralement le point du _coin en haut à gauche_ du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe. -<h2 id="missing-glyph">missing-glyph</h2> +## missing-glyph -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.</p> -</div> +> **Attention :** Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé. -<p>Pour un {{SVGElement('missing-glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p> +Pour un {{SVGElement('missing-glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#String"><string></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="Commandes_de_tracé">Commandes de tracé</h2> +## Commandes de tracé -<p>Les commandes de tracé sont des instructions qui définissent un tracé à dessiner. Chaque commande est composée d'une lettre de commande et de nombres qui représentent les paramètres de la commande.</p> +Les commandes de tracé sont des instructions qui définissent un tracé à dessiner. Chaque commande est composée d'une lettre de commande et de nombres qui représentent les paramètres de la commande. -<p>SVG définit 6 types de commandes, pour un total de 20 commandes :</p> +SVG définit 6 types de commandes, pour un total de 20 commandes : -<ul> - <li>Aller à (Moveto)</li> - <li>Tracer une ligne jusqu'à (Lineto)</li> - <li>Tracer une courbe jusqu'à (Curveto)</li> - <li>Tracer un arc de cercle jusqu'à (Arcto)</li> - <li>Fermer le chemin (ClosePath)</li> -</ul> +- Aller à (Moveto) +- Tracer une ligne jusqu'à (Lineto) +- Tracer une courbe jusqu'à (Curveto) +- Tracer un arc de cercle jusqu'à (Arcto) +- Fermer le chemin (ClosePath) -<div class="note"> - <p><strong>Note:</strong> Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.</p> -</div> +> **Note :** Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point. -<p>Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions <code>x</code> et <code>y</code> seront interprétées commandes coordonnées négatives; des valeurs <code>x</code> négatives se déplaceront vers la gauche; et des valeurs <code>y</code> négatives se déplaceront vers le haut.</p> +Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions `x` et `y` seront interprétées commandes coordonnées négatives; des valeurs `x` négatives se déplaceront vers la gauche; et des valeurs `y` négatives se déplaceront vers le haut. -<h2 id="Moveto_(aller_à)">Moveto (aller à)</h2> +## Moveto (aller à) -<p>Cette instuction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Une bonne pratique consiste à commencer tous ses chemins par une instruction Moveto car, sans un positionnement initial, les instructions du chemin commencerons à un point quelconque ce qui peut donner des résultats non désirés.</p> +Cette instuction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Une bonne pratique consiste à commencer tous ses chemins par une instruction Moveto car, sans un positionnement initial, les instructions du chemin commencerons à un point quelconque ce qui peut donner des résultats non désirés. -<p>Syntaxe:</p> +Syntaxe: -<ul> - <li><strong><code>M x, y</code></strong> où x et y sont des coordonnées absolues, respectivement horizontale et verticale.</li> - <li><strong><code>m dx, dy</code></strong> où dx et dy sont des distances relatives à la position courante, respectivement vers la droite et vers le bas.</li> -</ul> +- **`M x, y`** où x et y sont des coordonnées absolues, respectivement horizontale et verticale. +- **`m dx, dy`** où dx et dy sont des distances relatives à la position courante, respectivement vers la droite et vers le bas. -<p>Exemples :</p> +Exemples : -<ul> - <li>Positionnement absolu en x = 50, y = 100 : <code><path d="M 50, 100..." /></code></li> - <li>Déplacement de 50 vers la droite et 100 vers le bas : <code><path d="m 50, 100..." /></code></li> -</ul> +- Positionnement absolu en x = 50, y = 100 : `<path d="M 50, 100..." />` +- Déplacement de 50 vers la droite et 100 vers le bas : `<path d="m 50, 100..." />` -<h2 id="Lineto_(tracer_une_ligne_jusqu'à)">Lineto (tracer une ligne jusqu'à)</h2> +## Lineto (tracer une ligne jusqu'à) -<p>À l'opposé de l'instruction Moveto, Lineto trace réellement une ligne de la position courante à la position définie. La syntaxe générique est <code>L x, y</code> ou <code>l dx, dy</code> avec <code>x, y</code> des coordonnées absolues et <code>dx, dy</code> des distances relatives au point courant, respectivement dans les sens de gauche à droite pour <code>dx</code> et de haut en bas pour <code>dy</code>.</p> +À l'opposé de l'instruction Moveto, Lineto trace réellement une ligne de la position courante à la position définie. La syntaxe générique est `L x, y` ou `l dx, dy` avec `x, y` des coordonnées absolues et `dx, dy` des distances relatives au point courant, respectivement dans les sens de gauche à droite pour `dx` et de haut en bas pour `dy`. -<p>Il existe aussi des raccourcis pour définir des lignes horizontales (H) ou verticales (V). Leur syntaxe est similaire à celle de L, mais il n'y a qu'une valeur à donner.</p> +Il existe aussi des raccourcis pour définir des lignes horizontales (H) ou verticales (V). Leur syntaxe est similaire à celle de L, mais il n'y a qu'une valeur à donner. -<p>Exemples :</p> +Exemples : -<ul> - <li>Dessiner un carré (avec coordonnées relatives) : <code><path d="M -10, -10 h 50 v 50 h -50 v -50"/></code></li> - <li>Dessiner un carré (avec coordonnées absolues) : <code><path d="M -10, -10 H 40 V 40 H -10 V -10"/></code></li> -</ul> +- Dessiner un carré (avec coordonnées relatives) : `<path d="M -10, -10 h 50 v 50 h -50 v -50"/>` +- Dessiner un carré (avec coordonnées absolues) : `<path d="M -10, -10 H 40 V 40 H -10 V -10"/>` -<h2 id="Curveto">Curveto</h2> +## Curveto -<p>L'instruction Curveto trace une courbe de Bézier. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.</p> +L'instruction Curveto trace une courbe de Bézier. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant. -<p>Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est <code>C c1x, c1y c2x, c2y x, y</code> ou <code>c dc1x, dc1y dc2x, dc2y dx, dy</code>.</p> +Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est `C c1x, c1y c2x, c2y x, y` ou `c dc1x, dc1y dc2x, dc2y dx, dy`. +Pour réaliser des chaînes de courbes de Bézier "adoucies", il est possible d'utiliser les commandes T et S. Leur syntaxe est plus simple que les autres commandes Curveto car elles estiment que le premier point de contrôle est le symétrique du point de contrôle précédent par rapport au point terminal de la courbe précédente, ou que c'est le point précédent lui-même s'il n'y a pas eu de courbe tracée directement avant. La syntaxe de T est `T x, y` ou `t dx, dy` pour un point d'arrivée de position absolue ou relatives et sert à créer des courbes quadratiques de Bézier. S sert donc à faire des courbes cubiques de Bézier avec la syntaxe `S cx, cy x, y` ou `s dcx,dcy dx,dy`, où (d)cx indique le second point de contrôle. +Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polybézier" en spécifiant tous les paramètres successivement après la commande initiale. En conséquence, les deux commandes suivantes sont équivalentes en résultat : +`<path d="c 50, 0 50, 100 100, 100 50, 0 50, -100 100, -100" /> <path d="c 50, 0 50, 100 100, 100 c 50, 0 50, -100 100, -100" />` -<p>Pour réaliser des chaînes de courbes de Bézier "adoucies", il est possible d'utiliser les commandes T et S. Leur syntaxe est plus simple que les autres commandes Curveto car elles estiment que le premier point de contrôle est le symétrique du point de contrôle précédent par rapport au point terminal de la courbe précédente, ou que c'est le point précédent lui-même s'il n'y a pas eu de courbe tracée directement avant. La syntaxe de T est <code>T x, y</code> ou <code>t dx, dy</code> pour un point d'arrivée de position absolue ou relatives et sert à créer des courbes quadratiques de Bézier. S sert donc à faire des courbes cubiques de Bézier avec la syntaxe <code>S cx, cy x, y</code> ou <code>s dcx,dcy dx,dy</code>, où (d)cx indique le second point de contrôle.</p> +## Arcto -<p>Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polybézier" en spécifiant tous les paramètres successivement après la commande initiale. En conséquence, les deux commandes suivantes sont équivalentes en résultat :</p> +Parfois il est plus simple de définir un `path` comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises `path`. -<p><code><path d="c 50, 0 50, 100 100, 100 50, 0 50, -100 100, -100" /><br> - <path d="c 50, 0 50, 100 100, 100 c 50, 0 50, -100 100, -100" /></code></p> +La définition d'un Arcto est relativement complexe : `A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y`, où `rx` et `ry` représentent les rayons sur les axes x et y, respectivement ; `LargeArcFlag` est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; `SweepFlag` est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin `x` et `y` sont les coordonnées de destination. -<h2 id="Arcto">Arcto</h2> +La propriété `xAxisRotate` est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7. -<p>Parfois il est plus simple de définir un <code>path</code> comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises <code>path</code>.</p> +## ClosePath (fermer un chemin) -<p>La définition d'un Arcto est relativement complexe : <code>A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y</code>, où <code>rx</code> et <code>ry</code> représentent les rayons sur les axes x et y, respectivement ; <code>LargeArcFlag</code> est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; <code>SweepFlag</code> est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin <code>x</code> et <code>y</code> sont les coordonnées de destination.</p> +L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z"). -<p>La propriété <code>xAxisRotate</code> est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7.</p> +## Éléments -<h2 id="ClosePath_(fermer_un_chemin)">ClosePath (fermer un chemin)</h2> +Les éléments suivants peuvent utiliser l'attribut **d** : -<p>L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z").</p> +- {{SVGElement("path")}} +- {{SVGElement("glyph")}} -<h2 id="Éléments">Éléments</h2> +De plus, les mêmes règles s'appliquent aux animations de chemin {{SVGElement("animate")}}. -<p>Les éléments suivants peuvent utiliser l'attribut <strong>d</strong> :</p> +## Notes -<ul> - <li>{{SVGElement("path")}}</li> - <li>{{SVGElement("glyph")}}</li> -</ul> - -<p>De plus, les mêmes règles s'appliquent aux animations de chemin {{SVGElement("animate")}}.</p> - -<h2 id="Notes">Notes</h2> - -<p>Le point d'origine (de coordonnées 0,0) est habituellement le <strong>coin supérieur gauche</strong> du contexte. Cependant, l'élément {{SVGElement("glyph")}} a son origine dans le <strong>coin inférieur gauche</strong> de la boîte contenant son caractère.</p> +Le point d'origine (de coordonnées 0,0) est habituellement le **coin supérieur gauche** du contexte. Cependant, l'élément {{SVGElement("glyph")}} a son origine dans le **coin inférieur gauche** de la boîte contenant son caractère. diff --git a/files/fr/web/svg/attribute/dx/index.md b/files/fr/web/svg/attribute/dx/index.md index a77d19da24..9f2ae06637 100644 --- a/files/fr/web/svg/attribute/dx/index.md +++ b/files/fr/web/svg/attribute/dx/index.md @@ -6,289 +6,286 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/dx --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>dx</code></strong> indique un décalage sur l'axe x de la position d'un élément ou de son contenu.</p> +L'attribut **`dx`** indique un décalage sur l'axe x de la position d'un élément ou de son contenu. -<p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<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"> - <!-- Lignes indiquant la position des glyphes --> - <line x1="0" x2="100%" y1="50%" y2="50%" /> - <line x1="10%" x2="10%" y1="0" y2="100%" /> - <line x1="60%" x2="60%" y1="0" y2="100%" /> +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Lignes indiquant la position des glyphes --> + <line x1="0" x2="100%" y1="50%" y2="50%" /> + <line x1="10%" x2="10%" y1="0" y2="100%" /> + <line x1="60%" x2="60%" y1="0" y2="100%" /> - <!-- Un texte de référence --> - <text x="10%" y="50%" fill="grey">SVG</text> + <!-- Un texte de référence --> + <text x="10%" y="50%" fill="grey">SVG</text> - <!-- Le même texte avec un décalage sur l'axe x --> - <text dx="50%" x="10%" y="50%">SVG</text> -</svg></pre> + <!-- Le même texte avec un décalage sur l'axe x --> + <text dx="50%" x="10%" y="50%">SVG</text> +</svg> +``` -<pre class="brush: css">line { +```css +line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; -}</pre> +} +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="altGlyph">altGlyph</h2> +## altGlyph -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> -</div> +> **Attention :** Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé. -<p>Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour l'ensemble des glyphes.</p> +Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour l'ensemble des glyphes. -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="feDropShadow">feDropShadow</h2> +## feDropShadow -<p>Pour {{SVGElement('feDropShadow')}}, <code>dx</code> définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p> +Pour {{SVGElement('feDropShadow')}}, `dx` définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>2</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>2</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="feOffset">feOffset</h2> +## feOffset -<p>Pour {{SVGElement('feOffset')}}, <code>dx</code> définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p> +Pour {{SVGElement('feOffset')}}, `dx` définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="glyphRef">glyphRef</h2> +## glyphRef -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> -</div> +> **Attention :** Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé. -<p>Pour {{SVGElement('glyphRef')}}, <code>dx</code> définit le décalage x du glyphe, dans le système métrique de la police.</p> +Pour {{SVGElement('glyphRef')}}, `dx` définit le décalage x du glyphe, dans le système métrique de la police. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="text">text</h2> +## text -<p>Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p> +Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes. -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="Exemple">Exemple</h3> - -<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"> - <!-- Linges indiquant la position des glyphes --> - <line x1="0" x2="100%" y1="25%" y2="25%" /> - <line x1="0" x2="100%" y1="50%" y2="50%" /> - <line x1="0" x2="100%" y1="75%" y2="75%" /> - - <line x1="10%" x2="10%" y1="0" y2="100%" /> - <line x1="30%" x2="30%" y1="0" y2="100%" /> - <line x1="60%" x2="60%" y1="0" y2="100%" /> - - <!-- Le comportement change en fonction du nombre - de valeurs de l'attribut --> - <text dx="20%" x="10%" y="25%">SVG</text> - <text dx="0 10%" x="10%" y="50%">SVG</text> - <text dx="0 10% 20%" x="10%" y="75%">SVG</text> -</svg></pre> - -<pre class="brush: css">line { +### Exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Linges indiquant la position des glyphes --> + <line x1="0" x2="100%" y1="25%" y2="25%" /> + <line x1="0" x2="100%" y1="50%" y2="50%" /> + <line x1="0" x2="100%" y1="75%" y2="75%" /> + + <line x1="10%" x2="10%" y1="0" y2="100%" /> + <line x1="30%" x2="30%" y1="0" y2="100%" /> + <line x1="60%" x2="60%" y1="0" y2="100%" /> + + <!-- Le comportement change en fonction du nombre + de valeurs de l'attribut --> + <text dx="20%" x="10%" y="25%">SVG</text> + <text dx="0 10%" x="10%" y="50%">SVG</text> + <text dx="0 10% 20%" x="10%" y="75%">SVG</text> +</svg> +``` + +```css +line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; -}</pre> +} +``` -<p>{{EmbedLiveSample('text', '100%', 100)}}</p> +{{EmbedLiveSample('text', '100%', 100)}} -<h2 id="tref">tref</h2> +## tref -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> -</div> +> **Attention :** Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé. -<p>Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p> +Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes. + +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> -<p> </p> <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="tspan">tspan</h2> +## tspan -<p> </p> -<p>Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p> -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> +Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes. -<p> </p> +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. -<table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> -</table> -<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', '#element-attrdef-fedropshadow-dx', 'dx') }}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Définition initiale pour <code><feDropShadow></code></td> - </tr> - <tr> - <td>{{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dx', 'dx') }}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Définition pour <code><feOffset></code></td> - </tr> - <tr> - <td>{{SpecName("SVG2", "text.html#TextElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour <code><text></code> et <code><tspan></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feOffsetDxAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><feOffset></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#AltGlyphElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><altGlyph></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#GlyphRefElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><glyphRef></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#TextElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><text></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#TSpanElementDXAttribute", "dx")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><tref></code> et <code><tspan></code></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------- | +| {{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dx', 'dx') }} | {{Spec2('Filters 1.0')}} | Définition initiale pour `<feDropShadow>` | +| {{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dx', 'dx') }} | {{Spec2('Filters 1.0')}} | Définition pour `<feOffset>` | +| {{SpecName("SVG2", "text.html#TextElementDXAttribute", "dx")}} | {{Spec2("SVG2")}} | Définition pour `<text>` et `<tspan>` | +| {{SpecName("SVG1.1", "filters.html#feOffsetDxAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<feOffset>` | +| {{SpecName("SVG1.1", "text.html#AltGlyphElementDXAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<altGlyph>` | +| {{SpecName("SVG1.1", "text.html#GlyphRefElementDXAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<glyphRef>` | +| {{SpecName("SVG1.1", "text.html#TextElementDXAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<text>` | +| {{SpecName("SVG1.1", "text.html#TSpanElementDXAttribute", "dx")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<tref>` et `<tspan>` | diff --git a/files/fr/web/svg/attribute/dy/index.md b/files/fr/web/svg/attribute/dy/index.md index 08d75f48a1..45b758a28c 100644 --- a/files/fr/web/svg/attribute/dy/index.md +++ b/files/fr/web/svg/attribute/dy/index.md @@ -6,284 +6,281 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/dy --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>dy</code></strong> indique un décalage sur l'axe y de la position d'un élément ou de son contenu.</p> +L'attribut **`dy`** indique un décalage sur l'axe y de la position d'un élément ou de son contenu. -<p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<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"> - <!-- Lignes indiquant la position des glyphes --> - <line x1="10%" x2="10%" y1="0" y2="100%" /> - <line x1="0" x2="100%" y1="30%" y2="30%" /> - <line x1="0" x2="100%" y1="80%" y2="80%" /> +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Lignes indiquant la position des glyphes --> + <line x1="10%" x2="10%" y1="0" y2="100%" /> + <line x1="0" x2="100%" y1="30%" y2="30%" /> + <line x1="0" x2="100%" y1="80%" y2="80%" /> - <!-- Un texte de référence --> - <text x="10%" y="30%" fill="grey">SVG</text> + <!-- Un texte de référence --> + <text x="10%" y="30%" fill="grey">SVG</text> - <!-- Le même texte avec un décalage sur l'axe y --> - <text dy="50%" x="10%" y="30%">SVG</text> -</svg></pre> + <!-- Le même texte avec un décalage sur l'axe y --> + <text dy="50%" x="10%" y="30%">SVG</text> +</svg> +``` -<pre class="brush: css">line { +```css +line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; -}</pre> +} +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="altGlyph">altGlyph</h2> +## altGlyph -<div class="warning"> - <p><strong>Attention :</strong> Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> -</div> +> **Attention :** Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé. -<p>Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, <code>dy</code> définit un décalge sur l'axe y pour tous les glyphes.</p> +Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, `dy` définit un décalge sur l'axe y pour tous les glyphes. -<p>S'il a plusieurs valeurs, <code>dy</code> définit un décalage sur l'axe y individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent la valeur <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs restantes sont ignorées.</p> +S'il a plusieurs valeurs, `dy` définit un décalage sur l'axe y individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent la valeur `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs restantes sont ignorées. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="feDropShadow">feDropShadow</h2> +## feDropShadow -<p>Pour {{SVGElement('feDropShadow')}}, <code>dy</code> définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p> +Pour {{SVGElement('feDropShadow')}}, `dy` définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>2</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>2</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="feOffset">feOffset</h2> +## feOffset -<p>Pour {{SVGElement('feOffset')}}, <code>dy</code> définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p> +Pour {{SVGElement('feOffset')}}, `dy` définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="glyphRef">glyphRef</h2> +## glyphRef -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> -</div> +> **Attention :** Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé. -<p>Pour {{SVGElement('glyphRef')}}, <code>dy</code> définit le décalage x du glyphe, dans le système métrique de la police.</p> +Pour {{SVGElement('glyphRef')}}, `dy` définit le décalage x du glyphe, dans le système métrique de la police. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="text">text</h2> +## text -<p>Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p> +Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes. -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="Exemple">Exemple</h3> - -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> - -<pre class="brush: html"><svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Lignes horizontales --> - <line x1="0" x2="100%" y1="30" y2="30" /> - <line x1="0" x2="100%" y1="40" y2="40" /> - <line x1="0" x2="100%" y1="50" y2="50" /> - <line x1="0" x2="100%" y1="60" y2="60" /> - - <!-- Lignes verticales --> - <line x1="10" x2="10" y1="0" y2="100%" /> - <line x1="50" x2="50" y1="0" y2="100%" /> - <line x1="90" x2="90" y1="0" y2="100%" /> - - <!-- Le comportement change en fonction du nombre de valeurs de l'attribut --> - <text dy="20" x="10" y="30">SVG</text> - <text dy="0 10" x="50" y="30">SVG</text> - <text dy="0 10 20" x="90" y="30">SVG</text> -</svg></pre> - -<pre class="brush: css">line { +### Exemple + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Lignes horizontales --> + <line x1="0" x2="100%" y1="30" y2="30" /> + <line x1="0" x2="100%" y1="40" y2="40" /> + <line x1="0" x2="100%" y1="50" y2="50" /> + <line x1="0" x2="100%" y1="60" y2="60" /> + + <!-- Lignes verticales --> + <line x1="10" x2="10" y1="0" y2="100%" /> + <line x1="50" x2="50" y1="0" y2="100%" /> + <line x1="90" x2="90" y1="0" y2="100%" /> + + <!-- Le comportement change en fonction du nombre de valeurs de l'attribut --> + <text dy="20" x="10" y="30">SVG</text> + <text dy="0 10" x="50" y="30">SVG</text> + <text dy="0 10 20" x="90" y="30">SVG</text> +</svg> +``` + +```css +line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; -}</pre> +} +``` -<p>{{EmbedLiveSample('text', '100%', 100)}}</p> +{{EmbedLiveSample('text', '100%', 100)}} -<h2 id="tref">tref</h2> +## tref -<div class="warning"> - <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> -</div> +> **Attention :** Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé. -<p>Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p> +Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes. -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="tspan">tspan</h2> +## tspan -<p>Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p> +Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, `dx` définit un décalage sur l'axe x pour tous les glyphes. -<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p> +S'il a plusieurs valeurs, `dx` définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de `0`. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + Liste de + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<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', '#element-attrdef-fedropshadow-dy', 'dy') }}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Définition initiale pour <code><feDropShadow></code></td> - </tr> - <tr> - <td>{{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dy', 'dy') }}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td>Définition pour <code><feOffset></code></td> - </tr> - <tr> - <td>{{SpecName("SVG2", "text.html#TextElementDYAttribute", "dy")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour <code><text></code> et <code><tspan></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "filters.html#feOffsetDyAttribute", "dy")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><feOffset></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#AltGlyphElementDYAttribute", "dy")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><altGlyph></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#GlyphRefElementDYAttribute", "dy")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><glyphRef></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#TextElementDYAttribute", "dy")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><text></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "text.html#TSpanElementDYAttribute", "dy")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour <code><tref></code> et <code><tspan></code></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------- | +| {{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dy', 'dy') }} | {{Spec2('Filters 1.0')}} | Définition initiale pour `<feDropShadow>` | +| {{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dy', 'dy') }} | {{Spec2('Filters 1.0')}} | Définition pour `<feOffset>` | +| {{SpecName("SVG2", "text.html#TextElementDYAttribute", "dy")}} | {{Spec2("SVG2")}} | Définition pour `<text>` et `<tspan>` | +| {{SpecName("SVG1.1", "filters.html#feOffsetDyAttribute", "dy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<feOffset>` | +| {{SpecName("SVG1.1", "text.html#AltGlyphElementDYAttribute", "dy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<altGlyph>` | +| {{SpecName("SVG1.1", "text.html#GlyphRefElementDYAttribute", "dy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<glyphRef>` | +| {{SpecName("SVG1.1", "text.html#TextElementDYAttribute", "dy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<text>` | +| {{SpecName("SVG1.1", "text.html#TSpanElementDYAttribute", "dy")}} | {{Spec2("SVG1.1")}} | Définition initiale pour `<tref>` et `<tspan>` | diff --git a/files/fr/web/svg/attribute/events/index.md b/files/fr/web/svg/attribute/events/index.md index b34fa715e6..d5c9470a0a 100644 --- a/files/fr/web/svg/attribute/events/index.md +++ b/files/fr/web/svg/attribute/events/index.md @@ -6,36 +6,36 @@ tags: - SVG translation_of: Web/SVG/Attribute/Events --- -<p>Tout attribut d'événement a un nom qui commence par "on" suivit du nom de l'événement auquel il est rattaché. Ces attributs spécifient quel script exécuter lorsque l'événement du type donné est déclenché sur l'élément.</p> +Tout attribut d'événement a un nom qui commence par "on" suivit du nom de l'événement auquel il est rattaché. Ces attributs spécifient quel script exécuter lorsque l'événement du type donné est déclenché sur l'élément. -<p>SVG prend en charge tous les types d'événement pris en charge par le navigateur, en suivant les mêmes spécifications que les attributs d'événement HTML.</p> +SVG prend en charge tous les types d'événement pris en charge par le navigateur, en suivant les mêmes spécifications que les attributs d'événement HTML. -<p>Les attributs d'événements globaux sont disponibles sur <em>tous les éléments SVG</em>. Les autres attributs d'événement sont disponible au cas par cas sur les différents éléments.</p> +Les attributs d'événements globaux sont disponibles sur _tous les éléments SVG_. Les autres attributs d'événement sont disponible au cas par cas sur les différents éléments. -<p>Tous les attributs d'événements <em>ne peuvent pas être animés.</em></p> +Tous les attributs d'événements _ne peuvent pas être animés._ -<h2 id="Attributs">Attributs</h2> +## Attributs -<h3 id="Attributs_d'événement_d'animation">Attributs d'événement d'animation</h3> +### Attributs d'événement d'animation -<p><code><strong>onbegin</strong></code>, <code><strong>onend</strong></code>, <code><strong>onrepeat</strong></code></p> +**`onbegin`**, **`onend`**, **`onrepeat`** -<h3 id="Attributs_d'événement_du_document">Attributs d'événement du document</h3> +### Attributs d'événement du document -<p><code><strong>onabort</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onunload</strong></code></p> +**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`** -<h3 id="Attributs_d'événement_des_éléments_du_document">Attributs d'événement des éléments du document</h3> +### Attributs d'événement des éléments du document -<p><strong><code>oncopy</code></strong>, <strong><code>oncut</code></strong>, <strong><code>onpaste</code></strong></p> +**`oncopy`**, **`oncut`**, **`onpaste`** -<h3 id="Attributs_d'événement_globaux">Attributs d'événement globaux</h3> +### Attributs d'événement globaux -<p><code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code></p> +**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`** -<h3 id="Attributs_d'événement_graphiques">Attributs d'événement graphiques</h3> +### Attributs d'événement graphiques -<p><code><strong>onactivate</strong></code>, <code><strong>onfocusin</strong></code>, <code><strong>onfocusout</strong></code></p> +**`onactivate`**, **`onfocusin`**, **`onfocusout`** -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.events")}}</p> +{{Compat("svg.attributes.events")}} diff --git a/files/fr/web/svg/attribute/fill-opacity/index.md b/files/fr/web/svg/attribute/fill-opacity/index.md index 82e5f456c3..1d8d621138 100644 --- a/files/fr/web/svg/attribute/fill-opacity/index.md +++ b/files/fr/web/svg/attribute/fill-opacity/index.md @@ -6,86 +6,76 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/fill-opacity --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>fill-opacity</code></strong> définit l'opacité du remplissage (<em>couleur, dégradé, motif</em>, etc) appliqué à une forme.</p> +L'attribut **`fill-opacity`** définit l'opacité du remplissage (_couleur, dégradé, motif_, etc) appliqué à une forme. -<div class="note"> - <p><strong>Note :</strong> <code>fill-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill-opacity` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<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 400 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Opacité par défaut: 1 --> - <circle cx="50" cy="50" r="40" /> +```html +<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Opacité par défaut: 1 --> + <circle cx="50" cy="50" r="40" /> - <!-- Définit l'opacité avec un nombre --> - <circle cx="150" cy="50" r="40" - fill-opacity="0.7" /> + <!-- Définit l'opacité avec un nombre --> + <circle cx="150" cy="50" r="40" + fill-opacity="0.7" /> - <!-- Définit l'opaité avec un pourcentage --> - <circle cx="250" cy="50" r="40" - fill-opacity="50%" /> + <!-- Définit l'opaité avec un pourcentage --> + <circle cx="250" cy="50" r="40" + fill-opacity="50%" /> - <!-- Définit l'opacité avec une propriété CSS --> - <circle cx="350" cy="50" r="40" - style="fill-opacity: .25;" /> -</svg></pre> + <!-- Définit l'opacité avec une propriété CSS --> + <circle cx="350" cy="50" r="40" + style="fill-opacity: .25;" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> +{{EmbedLiveSample('exemple', '100%', 150)}} -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +## Notes d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>[0-1]</code> | <strong><a href="/docs/Web/SVG/Content_type#Paint"><percentage></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>1</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <code>[0-1]</code> | + <strong + ><a href="/docs/Web/SVG/Content_type#Paint" + ><percentage></a + ></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> SVG2 introduit les valeurs en pourcentage pour <code>fill-opacity</code>. Cependant, ce n'est pas souvent pris en charge pour le moment (<em>Voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p> -</div> +> **Note :** SVG2 introduit les valeurs en pourcentage pour `fill-opacity`. Cependant, ce n'est pas souvent pris en charge pour le moment (_Voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.fill-opacity")}}</p> +{{Compat("svg.attributes.presentation.fill-opacity")}} -<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", "painting.html#FillOpacityProperty", "fill-opacity")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et le texte.</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#FillOpacityProperty", "fill-opacity")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et le texte.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------ | +| {{SpecName("SVG2", "painting.html#FillOpacityProperty", "fill-opacity")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte. | +| {{SpecName("SVG1.1", "painting.html#FillOpacityProperty", "fill-opacity")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte. | diff --git a/files/fr/web/svg/attribute/fill-rule/index.md b/files/fr/web/svg/attribute/fill-rule/index.md index 04872838d2..cd1066edd3 100644 --- a/files/fr/web/svg/attribute/fill-rule/index.md +++ b/files/fr/web/svg/attribute/fill-rule/index.md @@ -6,155 +6,146 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/fill-rule --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>fill-rule</code></strong> définit l'algorithme à utiliser pour déterminer les parties qui sont considérées <em>à l'intérieur</em> de la forme.</p> +L'attribut **`fill-rule`** définit l'algorithme à utiliser pour déterminer les parties qui sont considérées _à l'intérieur_ de la forme. -<div class="note"> - <p><strong>Note :</strong> <code>fill-rule</code> est un attribut de présentation et peut donc être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill-rule` est un attribut de présentation et peut donc être utilisé comme propriété CSS. -<p>Cet attribut peut être appliqué à n'importe quel élément mais n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué à n'importe quel élément mais n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<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="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> - <!-- Valeur par défaut pour fill-rule --> - <polygon fill-rule="nonzero" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> +```html +<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> + <!-- Valeur par défaut pour fill-rule --> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> - <!-- + <!-- Les points au centre de la forme ont 2 segments (matérialisés par le trait rouge) Avec la règle evenodd, ils sont considérés en dehors de la forme, et l'intérieur de l'étoile est donc vide. - --> - <polygon fill-rule="evenodd" stroke="red" - points="150,0 121,90 198,35 102,35 179,90"/> -</svg></pre> + --> + <polygon fill-rule="evenodd" stroke="red" + points="150,0 121,90 198,35 102,35 179,90"/> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="Usage">Usage</h2> +## Usage <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>nonzero</code> | <code>evenodd</code></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>nonzero</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Yes</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><code>nonzero</code> | <code>evenodd</code></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>nonzero</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Yes</td> + </tr> + </tbody> </table> -<p>L'attribut <code>fill-rule</code> peut prendre deux valeurs:</p> +L'attribut `fill-rule` peut prendre deux valeurs: -<h3 id="nonzero">nonzero</h3> +### nonzero -<p>La valeur <code>nonzero</code> détermine si un point est à l'intérieur d'une forme en dessinant un rayon à partir de ce point vers l'infini dans toutes les directions, puis examine les endroits où un segment de la forme traverse le rayon.</p> +La valeur `nonzero` détermine si un point est à l'intérieur d'une forme en dessinant un rayon à partir de ce point vers l'infini dans toutes les directions, puis examine les endroits où un segment de la forme traverse le rayon. -<p>À chaque fois qu'un segment traverse le rayon de gauche à droite, on ajoute un. À chaque fois qu'un segment traverse le rayon de droite à gauche, on soustrait un. Si au final, le compte est égal à zéro, le point est l'extérieur. Dans le cas contraire, il est à l'intérieur.</p> +À chaque fois qu'un segment traverse le rayon de gauche à droite, on ajoute un. À chaque fois qu'un segment traverse le rayon de droite à gauche, on soustrait un. Si au final, le compte est égal à zéro, le point est l'extérieur. Dans le cas contraire, il est à l'intérieur. -<h4 id="Exemple">Exemple</h4> +#### 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="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la règle de remplissage sur les segments qui se croisent --> - <polygon fill-rule="nonzero" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> +```html +<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> + <!-- Effet de la règle de remplissage sur les segments qui se croisent --> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> - <!-- + <!-- Effet sur une forme dans une forme lorsque le segment va dans la même direction (vers la droite) - --> - <path fill-rule="nonzero" stroke="red" + --> + <path fill-rule="nonzero" stroke="red" d="M110,0 h90 v90 h-90 z - M130,20 h50 v50 h-50 z"/> + M130,20 h50 v50 h-50 z"/> - <!-- + <!-- Effet sur une forme dans une forme lorsque le segment va dans la direction opposée (vers la gauche contre vers la droite) - --> - <path fill-rule="nonzero" stroke="red" + --> + <path fill-rule="nonzero" stroke="red" d="M210,0 h90 v90 h-90 z - M230,20 v50 h50 v-50 z"/> -</svg></pre> + M230,20 v50 h50 v-50 z"/> +</svg> +``` -<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p> +{{EmbedLiveSample('nonzero', '100%', 200)}} -<h3 id="evenodd">evenodd</h3> +### evenodd -<p>La valeur <code>evenodd</code> détermine si un point est à l'intérieur d'une forme en dessinant un rayon de à partir de ce point vers l'infini dans toutes les directions, et compte le nombre de segments de la forme qui traversent ce rayon. Si ce nombre est impair (<em>odd</em> en anglais), alors le point est à l'intérieur. Si le nombre est pair (<em>even</em> en anglais), alors le point est à l'extérieur.</p> +La valeur `evenodd` détermine si un point est à l'intérieur d'une forme en dessinant un rayon de à partir de ce point vers l'infini dans toutes les directions, et compte le nombre de segments de la forme qui traversent ce rayon. Si ce nombre est impair (_odd_ en anglais), alors le point est à l'intérieur. Si le nombre est pair (_even_ en anglais), alors le point est à l'extérieur. -<h4 id="Exemple_2">Exemple</h4> +#### 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="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la règle de remplissage sur les segments qui se croisent --> - <polygon fill-rule="evenodd" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> +```html +<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> + <!-- Effet de la règle de remplissage sur les segments qui se croisent --> + <polygon fill-rule="evenodd" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> - <!-- + <!-- Effet sur une forme dans une forme lorsque le segment va dans la même direction (vers la droite) - --> - <path fill-rule="evenodd" stroke="red" + --> + <path fill-rule="evenodd" stroke="red" d="M110,0 h90 v90 h-90 z - M130,20 h50 v50 h-50 z"/> + M130,20 h50 v50 h-50 z"/> - <!-- + <!-- Effet sur une forme dans une forme lorsque le segment va dans la direction opposée (vers la gauche contre vers la droite) - --> - <path fill-rule="evenodd" stroke="red" + --> + <path fill-rule="evenodd" stroke="red" d="M210,0 h90 v90 h-90 z - M230,20 v50 h50 v-50 z"/> -</svg></pre> + M230,20 v50 h50 v-50 z"/> +</svg> +``` -<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p> +{{EmbedLiveSample('evenodd', '100%', 200)}} -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p> +{{Compat("svg.attributes.presentation.fill-rule")}} -<h2 id="Spécification">Spécification</h2> +## Spécification -<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", "painting.html#FillRuleProperty", "fill-rule")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et le texte</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et le texte</td> - </tr> - </tbody> -</table> - -<p> </p> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- | +| {{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte | +| {{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte | diff --git a/files/fr/web/svg/attribute/fill/index.md b/files/fr/web/svg/attribute/fill/index.md index bca17a20a8..c0aef89760 100644 --- a/files/fr/web/svg/attribute/fill/index.md +++ b/files/fr/web/svg/attribute/fill/index.md @@ -6,474 +6,490 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/fill --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>fill</code></strong> a deux significations différentes: 1. pour les formes et le texte, il définit le remplissage (<em>couleur, dégradé, motif, etc</em>); 2. pour les animations, il définit l'état final.</p> +L'attribut **`fill`** a deux significations différentes: 1. pour les formes et le texte, il définit le remplissage (_couleur, dégradé, motif, etc_); 2. pour les animations, il définit l'état final. -<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les formes suivantes: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les formes suivantes: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<p>Pour les animations, il s'applique à cinq éléments: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, et {{SVGElement('set')}}</p> +Pour les animations, il s'applique à cinq éléments: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, et {{SVGElement('set')}} -<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 300 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Remplir avec une simple couleur --> - <circle cx="50" cy="50" r="40" fill="pink" /> +```html +<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Remplir avec une simple couleur --> + <circle cx="50" cy="50" r="40" fill="pink" /> - <!-- Remplir avec un dégradé --> - <defs> - <radialGradient id="myGradient"> - <stop offset="0%" stop-color="pink" /> - <stop offset="100%" stop-color="black" /> - </radialGradient> - </defs> - <circle cx="150" cy="50" r="40" fill="url(#myGradient)" /> + <!-- Remplir avec un dégradé --> + <defs> + <radialGradient id="myGradient"> + <stop offset="0%" stop-color="pink" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + </defs> + <circle cx="150" cy="50" r="40" fill="url(#myGradient)" /> - <!-- Définit l'état final d'un cercle animé --> - <circle cx="250" cy="50" r="20"> - <animate attributeType="XML" + <!-- Définit l'état final d'un cercle animé --> + <circle cx="250" cy="50" r="20"> + <animate attributeType="XML" attributeName="r" from="0" to="40" dur="5s" - fill="freeze" /> - </circle> -</svg> -</pre> + fill="freeze" /> + </circle> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="altGlyph">altGlyph</h2> +## altGlyph -<div class="warning"> - <p><strong>Attention :</strong> {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> -</div> +> **Attention :** {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé. -<p>Pour {{SVGElement('altGlyph')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du glyphe.</p> +Pour {{SVGElement('altGlyph')}}, `fill` est un attribut de présentation qui définit la couleur du glyphe. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="animate">animate</h2> +## animate -<p>Pour {{SVGElement('animate')}}, <code>fill</code> définit l'état final de l'animation.</p> +Pour {{SVGElement('animate')}}, `fill` définit l'état final de l'animation. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>remove</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Non</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <code>freeze</code> (<em>Conserver la dernière image de l'animation</em + >) | <code>remove</code> (<em + >Conserver la première image de l'animation</em + >) + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Non</td> + </tr> + </tbody> </table> -<h2 id="animateColor">animateColor</h2> +## animateColor -<div class="warning"> - <p><strong>Attention :</strong> {{SVGElement('animateColor')}} est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser {{SVGElement('animate')}} à la place.</p> -</div> +> **Attention :** {{SVGElement('animateColor')}} est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser {{SVGElement('animate')}} à la place. -<p>Pour {{SVGElement('animateColor')}}, <code>fill</code> définit l'état final de l'animation.</p> +Pour {{SVGElement('animateColor')}}, `fill` définit l'état final de l'animation. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>remove</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Non</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <code>freeze</code> (<em>Conserver la dernière image de l'animation</em + >) | <code>remove</code> (<em + >Conserver la première image de l'animation</em + >) + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Non</td> + </tr> + </tbody> </table> -<h2 id="animateMotion">animateMotion</h2> +## animateMotion -<p>Pour {{SVGElement('animateMotion')}}, <code>fill</code> définit l'état final de l'animation.</p> +Pour {{SVGElement('animateMotion')}}, `fill` définit l'état final de l'animation. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>remove</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Non</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <code>freeze</code> (<em>Conserver la dernière image de l'animation</em + >) | <code>remove</code> (<em + >Conserver la première image de l'animation</em + >) + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Non</td> + </tr> + </tbody> </table> -<h2 id="animateTransform">animateTransform</h2> +## animateTransform -<p>Pour {{SVGElement('animateTransform')}}, <code>fill</code> définit l'état final de l'animation.</p> +Pour {{SVGElement('animateTransform')}}, `fill` définit l'état final de l'animation. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>remove</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Non</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <code>freeze</code> (<em>Conserver la dernière image de l'animation</em + >) | <code>remove</code> (<em + >Conserver la première image de l'animation</em + >) + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Non</td> + </tr> + </tbody> </table> -<h2 id="circle">circle</h2> +## circle -<p>Pour {{SVGElement('circle')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage du cercle.</p> +Pour {{SVGElement('circle')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage du cercle. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="ellipse">ellipse</h2> +## ellipse -<p>Pour {{SVGElement('ellipse')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage du cercle.</p> +Pour {{SVGElement('ellipse')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage du cercle. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="path">path</h2> +## path -<p>Pour {{SVGElement('path')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage de la forme. (<em>Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}</em>)</p> +Pour {{SVGElement('path')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage de la forme. (_Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}_) <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="polygon">polygon</h2> +## polygon -<p>Pour {{SVGElement('polygon')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage de la forme. (<em>Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}</em>)</p> +Pour {{SVGElement('polygon')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage de la forme. (_Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}_) <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="polyline">polyline</h2> +## polyline -<p>For {{SVGElement('polyline')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage de la forme. (<em>Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}</em>)</p> +For {{SVGElement('polyline')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage de la forme. (_Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}_) <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="rect">rect</h2> +## rect -<p>Pour {{SVGElement('rect')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage du rectangle.</p> +Pour {{SVGElement('rect')}}, `fill` est un attribut de présentation qui définit la couleur de remplissage du rectangle. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="set">set</h2> +## set -<p>Pour {{SVGElement('set')}}, <code>fill</code> définit l'état final de l'animation.</p> +Pour {{SVGElement('set')}}, `fill` définit l'état final de l'animation. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>remove</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Non</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <code>freeze</code> (<em>Conserver la dernière image de l'animation</em + >) | <code>remove</code> (<em + >Conserver la première image de l'animation</em + >) + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Non</td> + </tr> + </tbody> </table> -<h2 id="text">text</h2> +## text -<p>Pour {{SVGElement('text')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p> +Pour {{SVGElement('text')}}, `fill` est un attribut de présentation qui définit la couleur du texte. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="textPath">textPath</h2> +## textPath -<p>Pour {{SVGElement('textPath')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p> +Pour {{SVGElement('textPath')}}, `fill` est un attribut de présentation qui définit la couleur du texte. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="tref">tref</h2> +## tref -<div class="warning"> - <p><strong>Attention :</strong> {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> -</div> +> **Attention :** {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé. -<p>Pour {{SVGElement('tref')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p> +Pour {{SVGElement('tref')}}, `fill` est un attribut de présentation qui définit la couleur du texte. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<h2 id="tspan">tspan</h2> +## tspan -<p>Pour {{SVGElement('tspan')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p> +Pour {{SVGElement('tspan')}}, `fill` est un attribut de présentation qui définit la couleur du texte. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>black</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `fill` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<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", "#FillAttribute", "transform")}}</td> - <td>{{Spec2("SVG Animations 2")}}</td> - <td>Définition pour les animations.</td> - </tr> - <tr> - <td>{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et le texte.<br> - Ajoute <code>context-fill</code> et <code>context-stroke</code>.</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les animations.</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et le texte.</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------------------------------------------------------------- | +| {{SpecName("SVG Animations 2", "#FillAttribute", "transform")}} | {{Spec2("SVG Animations 2")}} | Définition pour les animations. | +| {{SpecName("SVG2", "painting.html#FillProperty", "fill")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte. Ajoute `context-fill` et `context-stroke`. | +| {{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les animations. | +| {{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte. | -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.fill")}}</p> +{{Compat("svg.attributes.presentation.fill")}} -<div class="note"> - <p><strong>Note :</strong> Pour plus d'informations sur les valeurs de <code>context-fill</code> (et <code>context-stroke</code>) dans des documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.</p> -</div> +> **Note :** Pour plus d'informations sur les valeurs de `context-fill` (et `context-stroke`) dans des documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}. diff --git a/files/fr/web/svg/attribute/height/index.md b/files/fr/web/svg/attribute/height/index.md index d0caca7baf..e8b1b9f7e9 100644 --- a/files/fr/web/svg/attribute/height/index.md +++ b/files/fr/web/svg/attribute/height/index.md @@ -6,66 +6,91 @@ tags: - SVG translation_of: Web/SVG/Attribute/height --- -<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +« [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute") -<p>Cet attribut indique une dimension verticale <code><length></code> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).</p> +Cet attribut indique une dimension verticale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). -<p>Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.</p> +Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Aucune</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td><a href="/fr/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Documents normatif</th> - <td><a href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> - <a href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute">SVG 1.1 (2nd Edition): image element</a><br> - <a href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> - <a href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute">SVG 1.1 (2nd Edition): rect element</a><br> - <a href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute">SVG 1.1 (2nd Edition): svg element</a><br> - <a href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute">SVG 1.1 (2nd Edition): use element</a><br> - <a href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> - <a href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute">SVG 1.1 (2nd Edition): mask element</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>Aucune</td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td> + <a + href="/fr/SVG/Content_type#Length" + title="https://developer.mozilla.org/en/SVG/Content_type#Length" + ><length></a + > + </td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Documents normatif</th> + <td> + <a + href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute" + >SVG 1.1 (2nd Edition): foreignObject element</a + ><br /><a + href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute" + >SVG 1.1 (2nd Edition): image element</a + ><br /><a + href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute" + >SVG 1.1 (2nd Edition): pattern element</a + ><br /><a + href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute" + >SVG 1.1 (2nd Edition): rect element</a + ><br /><a + href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute" + >SVG 1.1 (2nd Edition): svg element</a + ><br /><a + href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute" + >SVG 1.1 (2nd Edition): use element</a + ><br /><a + href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute" + >SVG 1.1 (2nd Edition): Filter primitive</a + ><br /><a + href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute" + >SVG 1.1 (2nd Edition): mask element</a + > + </td> + </tr> + </tbody> </table> -<p>{{ page("fr/docs/Web/SVG/Content_type","Length") }}</p> +{{ page("fr/docs/Web/SVG/Content_type","Length") }} -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: xml"><?xml version="1.0"?> -<svg width="120" height="120" +```xml +<?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" - xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg"> - <rect x="10" y="10" width="100" height="100"/> -</svg></pre> + <rect x="10" y="10" width="100" height="100"/> +</svg> +``` -<h2 id="Eléments">Eléments</h2> +## Eléments -<p>Les éléments suivants peuvent utiliser l'attribut <code>height</code> :</p> +Les éléments suivants peuvent utiliser l'attribut `height` : -<ul> - <li><a href="/fr/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> - <li>{{ SVGElement("filter") }}</li> - <li>{{ SVGElement("foreignObject") }}</li> - <li>{{ SVGElement("image") }}</li> - <li>{{ SVGElement("pattern") }}</li> - <li>{{ SVGElement("rect") }}</li> - <li>{{ SVGElement("svg") }}</li> - <li>{{ SVGElement("use") }}</li> - <li>{{ SVGElement("mask") }}</li> -</ul> +- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » +- {{ SVGElement("filter") }} +- {{ SVGElement("foreignObject") }} +- {{ SVGElement("image") }} +- {{ SVGElement("pattern") }} +- {{ SVGElement("rect") }} +- {{ SVGElement("svg") }} +- {{ SVGElement("use") }} +- {{ SVGElement("mask") }} diff --git a/files/fr/web/svg/attribute/in/index.md b/files/fr/web/svg/attribute/in/index.md index 3c4eb4f139..f4ce9edcd6 100644 --- a/files/fr/web/svg/attribute/in/index.md +++ b/files/fr/web/svg/attribute/in/index.md @@ -7,97 +7,105 @@ tags: - SVG Filter translation_of: Web/SVG/Attribute/in --- -<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +« [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute") -<p>L'attribut <code>in</code> identifie l'entrée pour la primitive de filtre donnée.</p> +L'attribut `in` identifie l'entrée pour la primitive de filtre donnée. -<p>Cet attribut peut prendre pour valeur un des six mots-clés définis ci-dessous ou la valeur d'un attribut {{SVGAttr("result")}} d'une primitive précédente dans le même élément {{SVGElement("filter")}}. Si aucune valeur n'est définit et qu'il s'agit de la première primitive du filtre, alors la valeur par défaut est <code>SourceGraphic</code>. Si aucune valeur n'est définit et qu'il ne s'agit pas de la première primitive, alors la valeur par défaut est le résultat de la primitive précédente.<br> - <br> - Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits dans un élément {{SVGElement("filter")}} donné, c'est la primitive de filtre avec cette valeur de {{SVGAttr("result")}} précédant la primitive en cours qui est la plus proche qui est utilisée.</p> +Cet attribut peut prendre pour valeur un des six mots-clés définis ci-dessous ou la valeur d'un attribut {{SVGAttr("result")}} d'une primitive précédente dans le même élément {{SVGElement("filter")}}. Si aucune valeur n'est définit et qu'il s'agit de la première primitive du filtre, alors la valeur par défaut est `SourceGraphic`. Si aucune valeur n'est définit et qu'il ne s'agit pas de la première primitive, alors la valeur par défaut est le résultat de la primitive précédente. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits dans un élément {{SVGElement("filter")}} donné, c'est la primitive de filtre avec cette valeur de {{SVGAttr("result")}} précédant la primitive en cours qui est la plus proche qui est utilisée. + +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>None</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td><code>SourceGraphic</code> | <code>SourceAlpha</code> | <code>BackgroundImage</code> | <code>BackgroundAlpha</code> | <code>FillPaint</code> | <code>StrokePaint</code> | <filter-primitive-reference></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Document normatif</th> - <td><a href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td> + <code>SourceGraphic</code> | <code>SourceAlpha</code> | + <code>BackgroundImage</code> | <code>BackgroundAlpha</code> | + <code>FillPaint</code> | <code>StrokePaint</code> | + <filter-primitive-reference> + </td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Document normatif</th> + <td> + <a + href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute" + >SVG 1.1 (2nd Edition)</a + > + </td> + </tr> + </tbody> </table> -<dl> - <dt>SourceGraphic</dt> - <dd>Ce mot-clé désigne l'élément graphique sur lequel s'applique le {{SVGElement("filter")}}.</dd> - <dt>SourceAlpha</dt> - <dd><code>SourceAlpha</code> fonctionne de la même manière que <code>SourceGraphic</code> à la différence près que seul le canal alpha (la transparence) est utilisé.</dd> - <dt>BackgroundImage</dt> - <dd>Ce mot-clé désigne une capture de l'image du document SVG sous la région du filtre au moment où l'élément {{SVGElement("filter")}} a été invoqué.</dd> - <dt>BackgroundAlpha</dt> - <dd>Même principe que <code>BackgroundImage</code> à la différence près que seul le canal alpha est utilisé.</dd> - <dt>FillPaint</dt> - <dd>Ce mot-clé désigné la valeur de la propriété {{SVGAttr("fill")}} sur l'élément cible du filtre. Dans la plupart des cas, <code>FillPaint</code> est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.</dd> - <dt>StrokePaint</dt> - <dd>Ce mot-clé désigne la valeur de la propriété {{SVGAttr("stroke")}} sur l'élément cible du filtre. Dans la plupart des cas, <code>StrokePaint</code> est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.</dd> -</dl> +- SourceGraphic + - : Ce mot-clé désigne l'élément graphique sur lequel s'applique le {{SVGElement("filter")}}. +- SourceAlpha + - : `SourceAlpha` fonctionne de la même manière que `SourceGraphic` à la différence près que seul le canal alpha (la transparence) est utilisé. +- BackgroundImage + - : Ce mot-clé désigne une capture de l'image du document SVG sous la région du filtre au moment où l'élément {{SVGElement("filter")}} a été invoqué. +- BackgroundAlpha + - : Même principe que `BackgroundImage` à la différence près que seul le canal alpha est utilisé. +- FillPaint + - : Ce mot-clé désigné la valeur de la propriété {{SVGAttr("fill")}} sur l'élément cible du filtre. Dans la plupart des cas, `FillPaint` est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes. +- StrokePaint + - : Ce mot-clé désigne la valeur de la propriété {{SVGAttr("stroke")}} sur l'élément cible du filtre. Dans la plupart des cas, `StrokePaint` est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes. -<h2 id="Contournement_pour_BackgroundImage">Contournement pour BackgroundImage</h2> +## Contournement pour BackgroundImage -<p>À la place de <code>in="BackgroundImage"</code>, on peut importer une image à fusionner à l'intérieur du filtre avec l'élément <code><feImage></code>.</p> +À la place de `in="BackgroundImage"`, on peut importer une image à fusionner à l'intérieur du filtre avec l'élément `<feImage>`. -<pre class="brush: html"><div style="width: 420px; height: 220px;"> -<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="backgroundMultiply"> - <!-- Ça ne marchera pas. --> - <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> - </filter> - </defs> - <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> - <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /> -</svg> +```html +<div style="width: 420px; height: 220px;"> +<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="backgroundMultiply"> + <!-- Ça ne marchera pas. --> + <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /> +</svg> -<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="imageMultiply"> - <!-- Solution de contournement. --> - <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> - <feBlend in2="SourceGraphic" mode="multiply"/> - </filter> - </defs> - <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> -</svg> -</div></pre> +<svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="imageMultiply"> + <!-- Solution de contournement. --> + <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <feBlend in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> +</svg> +</div> +``` -<p>{{ EmbedLiveSample('Contournement_pour_BackgroundImage') }}</p> +{{ EmbedLiveSample('Contournement_pour_BackgroundImage') }} -<h2>Éléments</h2> +## Éléments -<p>Les éléments suivants peuvent utiliser l'attribut <code>in</code>:</p> +Les éléments suivants peuvent utiliser l'attribut `in`: -<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("feGaussianBlur")}}</li> - <li>{{SVGElement("feMorphology")}}</li> - <li>{{SVGElement("feOffset")}}</li> - <li>{{SVGElement("feSpecularLighting")}}</li> - <li>{{SVGElement("feTile")}}</li> -</ul> +- {{SVGElement("feBlend")}} +- {{SVGElement("feColorMatrix")}} +- {{SVGElement("feComponentTransfer")}} +- {{SVGElement("feComposite")}} +- {{SVGElement("feConvolveMatrix")}} +- {{SVGElement("feDiffuseLighting")}} +- {{SVGElement("feDisplacementMap")}} +- {{SVGElement("feGaussianBlur")}} +- {{SVGElement("feMorphology")}} +- {{SVGElement("feOffset")}} +- {{SVGElement("feSpecularLighting")}} +- {{SVGElement("feTile")}} diff --git a/files/fr/web/svg/attribute/index.md b/files/fr/web/svg/attribute/index.md index aa176af715..31d76ba1a5 100644 --- a/files/fr/web/svg/attribute/index.md +++ b/files/fr/web/svg/attribute/index.md @@ -10,472 +10,418 @@ tags: - TopicStub translation_of: Web/SVG/Attribute --- -<div>{{SVGRef}}</div> - -<p>Les éléments SVG peuvent être modifiés en utilisant des attributs qui spécifient comment les éléments doivent être traités ou présentés.</p> - -<p>Ci-dessous, la liste de tous les attributs disponibles en SVG ainsi que des liens vers leur documentation pour vous aider à apprendre sur quels éléments ils s'appliquent et comment ils fonctionnent.</p> - -<h2 id="Attributs_SVG_de_A_à_Z">Attributs SVG de A à Z</h2> - - -<h3 id="A">A</h3> - -<ul> - <li>{{SVGAttr("accent-height")}}</li> - <li>{{SVGAttr("accumulate")}}</li> - <li>{{SVGAttr("additive")}}</li> - <li>{{SVGAttr("alignment-baseline")}}</li> - <li>{{SVGAttr("allowReorder")}}</li> - <li>{{SVGAttr("alphabetic")}}</li> - <li>{{SVGAttr("amplitude")}}</li> - <li>{{SVGAttr("arabic-form")}}</li> - <li>{{SVGAttr("ascent")}}</li> - <li>{{SVGAttr("attributeName")}}</li> - <li>{{SVGAttr("attributeType")}}</li> - <li>{{SVGAttr("autoReverse")}}</li> - <li>{{SVGAttr("azimuth")}}</li> -</ul> - -<h3 id="B">B</h3> - -<ul> - <li>{{SVGAttr("baseFrequency")}}</li> - <li>{{SVGAttr("baseline-shift")}}</li> - <li>{{SVGAttr("baseProfile")}}</li> - <li>{{SVGAttr("bbox")}}</li> - <li>{{SVGAttr("begin")}}</li> - <li>{{SVGAttr("bias")}}</li> - <li>{{SVGAttr("by")}}</li> -</ul> - -<h3 id="C">C</h3> - -<ul> - <li>{{SVGAttr("calcMode")}}</li> - <li>{{SVGAttr("cap-height")}}</li> - <li>{{SVGAttr("class")}}</li> - <li>{{SVGAttr("clip")}}</li> - <li>{{SVGAttr("clipPathUnits")}}</li> - <li>{{SVGAttr("clip-path")}}</li> - <li>{{SVGAttr("clip-rule")}}</li> - <li>{{SVGAttr("color")}}</li> - <li>{{SVGAttr("color-interpolation")}}</li> - <li>{{SVGAttr("color-interpolation-filters")}}</li> - <li>{{SVGAttr("color-profile")}}</li> - <li>{{SVGAttr("color-rendering")}}</li> - <li>{{SVGAttr("contentScriptType")}}</li> - <li>{{SVGAttr("contentStyleType")}}</li> - <li>{{SVGAttr("cursor")}}</li> - <li>{{SVGAttr("cx")}}</li> - <li>{{SVGAttr("cy")}}</li> -</ul> - -<h3 id="D">D</h3> - -<ul> - <li>{{SVGAttr("d")}}</li> - <li>{{SVGAttr("decelerate")}}</li> - <li>{{SVGAttr("descent")}}</li> - <li>{{SVGAttr("diffuseConstant")}}</li> - <li>{{SVGAttr("direction")}}</li> - <li>{{SVGAttr("display")}}</li> - <li>{{SVGAttr("divisor")}}</li> - <li>{{SVGAttr("dominant-baseline")}}</li> - <li>{{SVGAttr("dur")}}</li> - <li>{{SVGAttr("dx")}}</li> - <li>{{SVGAttr("dy")}}</li> -</ul> - -<h3 id="E">E</h3> - -<ul> - <li>{{SVGAttr("edgeMode")}}</li> - <li>{{SVGAttr("elevation")}}</li> - <li>{{SVGAttr("enable-background")}}</li> - <li>{{SVGAttr("end")}}</li> - <li>{{SVGAttr("exponent")}}</li> - <li>{{SVGAttr("externalResourcesRequired")}}</li> -</ul> - -<h3 id="F">F</h3> - -<ul> - <li>{{SVGAttr("fill")}}</li> - <li>{{SVGAttr("fill-opacity")}}</li> - <li>{{SVGAttr("fill-rule")}}</li> - <li>{{SVGAttr("filter")}}</li> - <li>{{SVGAttr("filterRes")}}</li> - <li>{{SVGAttr("filterUnits")}}</li> - <li>{{SVGAttr("flood-color")}}</li> - <li>{{SVGAttr("flood-opacity")}}</li> - <li>{{SVGAttr("font-family")}}</li> - <li>{{SVGAttr("font-size")}}</li> - <li>{{SVGAttr("font-size-adjust")}}</li> - <li>{{SVGAttr("font-stretch")}}</li> - <li>{{SVGAttr("font-style")}}</li> - <li>{{SVGAttr("font-variant")}}</li> - <li>{{SVGAttr("font-weight")}}</li> - <li>{{SVGAttr("format")}}</li> - <li>{{SVGAttr("from")}}</li> - <li>{{SVGAttr("fr")}}</li> - <li>{{SVGAttr("fx")}}</li> - <li>{{SVGAttr("fy")}}</li> -</ul> - -<h3 id="G">G</h3> - -<ul> - <li>{{SVGAttr("g1")}}</li> - <li>{{SVGAttr("g2")}}</li> - <li>{{SVGAttr("glyph-name")}}</li> - <li>{{SVGAttr("glyph-orientation-horizontal")}}</li> - <li>{{SVGAttr("glyph-orientation-vertical")}}</li> - <li>{{SVGAttr("glyphRef")}}</li> - <li>{{SVGAttr("gradientTransform")}}</li> - <li>{{SVGAttr("gradientUnits")}}</li> -</ul> - -<h3 id="H">H</h3> - -<ul> - <li>{{SVGAttr("hanging")}}</li> - <li>{{SVGAttr("height")}}</li> - <li>{{SVGAttr("href")}}</li> - <li>{{SVGAttr("hreflang")}}</li> - <li>{{SVGAttr("horiz-adv-x")}}</li> - <li>{{SVGAttr("horiz-origin-x")}}</li> -</ul> - -<h3 id="I">I</h3> - -<ul> - <li>{{SVGAttr("id")}}</li> - <li>{{SVGAttr("ideographic")}}</li> - <li>{{SVGAttr("image-rendering")}}</li> - <li>{{SVGAttr("in")}}</li> - <li>{{SVGAttr("in2")}}</li> - <li>{{SVGAttr("intercept")}}</li> -</ul> - -<h3 id="K">K</h3> - -<ul> - <li>{{SVGAttr("k")}}</li> - <li>{{SVGAttr("k1")}}</li> - <li>{{SVGAttr("k2")}}</li> - <li>{{SVGAttr("k3")}}</li> - <li>{{SVGAttr("k4")}}</li> - <li>{{SVGAttr("kernelMatrix")}}</li> - <li>{{SVGAttr("kernelUnitLength")}}</li> - <li>{{SVGAttr("kerning")}}</li> - <li>{{SVGAttr("keyPoints")}}</li> - <li>{{SVGAttr("keySplines")}}</li> - <li>{{SVGAttr("keyTimes")}}</li> -</ul> - -<h3 id="L">L</h3> - -<ul> - <li>{{SVGAttr("lang")}}</li> - <li>{{SVGAttr("lengthAdjust")}}</li> - <li>{{SVGAttr("letter-spacing")}}</li> - <li>{{SVGAttr("lighting-color")}}</li> - <li>{{SVGAttr("limitingConeAngle")}}</li> - <li>{{SVGAttr("local")}}</li> -</ul> - -<h3 id="M">M</h3> - -<ul> - <li>{{SVGAttr("marker-end")}}</li> - <li>{{SVGAttr("marker-mid")}}</li> - <li>{{SVGAttr("marker-start")}}</li> - <li>{{SVGAttr("markerHeight")}}</li> - <li>{{SVGAttr("markerUnits")}}</li> - <li>{{SVGAttr("markerWidth")}}</li> - <li>{{SVGAttr("mask")}}</li> - <li>{{SVGAttr("maskContentUnits")}}</li> - <li>{{SVGAttr("maskUnits")}}</li> - <li>{{SVGAttr("mathematical")}}</li> - <li>{{SVGAttr("max")}}</li> - <li>{{SVGAttr("media")}}</li> - <li>{{SVGAttr("method")}}</li> - <li>{{SVGAttr("min")}}</li> - <li>{{SVGAttr("mode")}}</li> -</ul> - -<h3 id="N">N</h3> - -<ul> - <li>{{SVGAttr("name")}}</li> - <li>{{SVGAttr("numOctaves")}}</li> -</ul> - -<h3 id="O">O</h3> - -<ul> - <li>{{SVGAttr("offset")}}</li> - <li>{{SVGAttr("opacity")}}</li> - <li>{{SVGAttr("operator")}}</li> - <li>{{SVGAttr("order")}}</li> - <li>{{SVGAttr("orient")}}</li> - <li>{{SVGAttr("orientation")}}</li> - <li>{{SVGAttr("origin")}}</li> - <li>{{SVGAttr("overflow")}}</li> - <li>{{SVGAttr("overline-position")}}</li> - <li>{{SVGAttr("overline-thickness")}}</li> -</ul> - -<h3 id="P">P</h3> - -<ul> - <li>{{SVGAttr("panose-1")}}</li> - <li>{{SVGAttr("paint-order")}}</li> - <li>{{SVGAttr("path")}}</li> - <li>{{SVGAttr("pathLength")}}</li> - <li>{{SVGAttr("patternContentUnits")}}</li> - <li>{{SVGAttr("patternTransform")}}</li> - <li>{{SVGAttr("patternUnits")}}</li> - <li>{{SVGAttr("ping")}}</li> - <li>{{SVGAttr("pointer-events")}}</li> - <li>{{SVGAttr("points")}}</li> - <li>{{SVGAttr("pointsAtX")}}</li> - <li>{{SVGAttr("pointsAtY")}}</li> - <li>{{SVGAttr("pointsAtZ")}}</li> - <li>{{SVGAttr("preserveAlpha")}}</li> - <li>{{SVGAttr("preserveAspectRatio")}}</li> - <li>{{SVGAttr("primitiveUnits")}}</li> -</ul> - -<h3 id="R">R</h3> - -<ul> - <li>{{SVGAttr("r")}}</li> - <li>{{SVGAttr("radius")}}</li> - <li>{{SVGAttr("referrerPolicy")}}</li> - <li>{{SVGAttr("refX")}}</li> - <li>{{SVGAttr("refY")}}</li> - <li>{{SVGAttr("rel")}}</li> - <li>{{SVGAttr("rendering-intent")}}</li> - <li>{{SVGAttr("repeatCount")}}</li> - <li>{{SVGAttr("repeatDur")}}</li> - <li>{{SVGAttr("requiredExtensions")}}</li> - <li>{{SVGAttr("requiredFeatures")}}</li> - <li>{{SVGAttr("restart")}}</li> - <li>{{SVGAttr("result")}}</li> - <li>{{SVGAttr("rotate")}}</li> - <li>{{SVGAttr("rx")}}</li> - <li>{{SVGAttr("ry")}}</li> -</ul> - -<h3 id="S">S</h3> - -<ul> - <li>{{SVGAttr("scale")}}</li> - <li>{{SVGAttr("seed")}}</li> - <li>{{SVGAttr("shape-rendering")}}</li> - <li>{{SVGAttr("slope")}}</li> - <li>{{SVGAttr("spacing")}}</li> - <li>{{SVGAttr("specularConstant")}}</li> - <li>{{SVGAttr("specularExponent")}}</li> - <li>{{SVGAttr("speed")}}</li> - <li>{{SVGAttr("spreadMethod")}}</li> - <li>{{SVGAttr("startOffset")}}</li> - <li>{{SVGAttr("stdDeviation")}}</li> - <li>{{SVGAttr("stemh")}}</li> - <li>{{SVGAttr("stemv")}}</li> - <li>{{SVGAttr("stitchTiles")}}</li> - <li>{{SVGAttr("stop-color")}}</li> - <li>{{SVGAttr("stop-opacity")}}</li> - <li>{{SVGAttr("strikethrough-position")}}</li> - <li>{{SVGAttr("strikethrough-thickness")}}</li> - <li>{{SVGAttr("string")}}</li> - <li>{{SVGAttr("stroke")}}</li> - <li>{{SVGAttr("stroke-dasharray")}}</li> - <li>{{SVGAttr("stroke-dashoffset")}}</li> - <li>{{SVGAttr("stroke-linecap")}}</li> - <li>{{SVGAttr("stroke-linejoin")}}</li> - <li>{{SVGAttr("stroke-miterlimit")}}</li> - <li>{{SVGAttr("stroke-opacity")}}</li> - <li>{{SVGAttr("stroke-width")}}</li> - <li>{{SVGAttr("style")}}</li> - <li>{{SVGAttr("surfaceScale")}}</li> - <li>{{SVGAttr("systemLanguage")}}</li> -</ul> - -<h3 id="T">T</h3> - -<ul> - <li>{{SVGAttr("tabindex")}}</li> - <li>{{SVGAttr("tableValues")}}</li> - <li>{{SVGAttr("target")}}</li> - <li>{{SVGAttr("targetX")}}</li> - <li>{{SVGAttr("targetY")}}</li> - <li>{{SVGAttr("text-anchor")}}</li> - <li>{{SVGAttr("text-decoration")}}</li> - <li>{{SVGAttr("text-rendering")}}</li> - <li>{{SVGAttr("textLength")}}</li> - <li>{{SVGAttr("to")}}</li> - <li>{{SVGAttr("transform")}}</li> - <li>{{SVGAttr("type")}}</li> -</ul> - -<h3 id="U">U</h3> - -<ul> - <li>{{SVGAttr("u1")}}</li> - <li>{{SVGAttr("u2")}}</li> - <li>{{SVGAttr("underline-position")}}</li> - <li>{{SVGAttr("underline-thickness")}}</li> - <li>{{SVGAttr("unicode")}}</li> - <li>{{SVGAttr("unicode-bidi")}}</li> - <li>{{SVGAttr("unicode-range")}}</li> - <li>{{SVGAttr("units-per-em")}}</li> -</ul> - -<h3 id="V">V</h3> - -<ul> - <li>{{SVGAttr("v-alphabetic")}}</li> - <li>{{SVGAttr("v-hanging")}}</li> - <li>{{SVGAttr("v-ideographic")}}</li> - <li>{{SVGAttr("v-mathematical")}}</li> - <li>{{SVGAttr("values")}}</li> - <li>{{SVGAttr("vector-effect")}}</li> - <li>{{SVGAttr("version")}}</li> - <li>{{SVGAttr("vert-adv-y")}}</li> - <li>{{SVGAttr("vert-origin-x")}}</li> - <li>{{SVGAttr("vert-origin-y")}}</li> - <li>{{SVGAttr("viewBox")}}</li> - <li>{{SVGAttr("viewTarget")}}</li> - <li>{{SVGAttr("visibility")}}</li> -</ul> - -<h3 id="W">W</h3> - -<ul> - <li>{{SVGAttr("width")}}</li> - <li>{{SVGAttr("widths")}}</li> - <li>{{SVGAttr("word-spacing")}}</li> - <li>{{SVGAttr("writing-mode")}}</li> -</ul> - -<h3 id="X">X</h3> - -<ul> - <li>{{SVGAttr("x")}}</li> - <li>{{SVGAttr("x-height")}}</li> - <li>{{SVGAttr("x1")}}</li> - <li>{{SVGAttr("x2")}}</li> - <li>{{SVGAttr("xChannelSelector")}}</li> - <li>{{SVGAttr("xlink:actuate")}}</li> - <li>{{SVGAttr("xlink:arcrole")}}</li> - <li>{{SVGAttr("xlink:href")}}</li> - <li>{{SVGAttr("xlink:role")}}</li> - <li>{{SVGAttr("xlink:show")}}</li> - <li>{{SVGAttr("xlink:title")}}</li> - <li>{{SVGAttr("xlink:type")}}</li> - <li>{{SVGAttr("xml:base")}}</li> - <li>{{SVGAttr("xml:lang")}}</li> - <li>{{SVGAttr("xml:space")}}</li> -</ul> +{{SVGRef}} + +Les éléments SVG peuvent être modifiés en utilisant des attributs qui spécifient comment les éléments doivent être traités ou présentés. + +Ci-dessous, la liste de tous les attributs disponibles en SVG ainsi que des liens vers leur documentation pour vous aider à apprendre sur quels éléments ils s'appliquent et comment ils fonctionnent. + +## Attributs SVG de A à Z + +### A + +- {{SVGAttr("accent-height")}} +- {{SVGAttr("accumulate")}} +- {{SVGAttr("additive")}} +- {{SVGAttr("alignment-baseline")}} +- {{SVGAttr("allowReorder")}} +- {{SVGAttr("alphabetic")}} +- {{SVGAttr("amplitude")}} +- {{SVGAttr("arabic-form")}} +- {{SVGAttr("ascent")}} +- {{SVGAttr("attributeName")}} +- {{SVGAttr("attributeType")}} +- {{SVGAttr("autoReverse")}} +- {{SVGAttr("azimuth")}} + +### B + +- {{SVGAttr("baseFrequency")}} +- {{SVGAttr("baseline-shift")}} +- {{SVGAttr("baseProfile")}} +- {{SVGAttr("bbox")}} +- {{SVGAttr("begin")}} +- {{SVGAttr("bias")}} +- {{SVGAttr("by")}} + +### C + +- {{SVGAttr("calcMode")}} +- {{SVGAttr("cap-height")}} +- {{SVGAttr("class")}} +- {{SVGAttr("clip")}} +- {{SVGAttr("clipPathUnits")}} +- {{SVGAttr("clip-path")}} +- {{SVGAttr("clip-rule")}} +- {{SVGAttr("color")}} +- {{SVGAttr("color-interpolation")}} +- {{SVGAttr("color-interpolation-filters")}} +- {{SVGAttr("color-profile")}} +- {{SVGAttr("color-rendering")}} +- {{SVGAttr("contentScriptType")}} +- {{SVGAttr("contentStyleType")}} +- {{SVGAttr("cursor")}} +- {{SVGAttr("cx")}} +- {{SVGAttr("cy")}} + +### D + +- {{SVGAttr("d")}} +- {{SVGAttr("decelerate")}} +- {{SVGAttr("descent")}} +- {{SVGAttr("diffuseConstant")}} +- {{SVGAttr("direction")}} +- {{SVGAttr("display")}} +- {{SVGAttr("divisor")}} +- {{SVGAttr("dominant-baseline")}} +- {{SVGAttr("dur")}} +- {{SVGAttr("dx")}} +- {{SVGAttr("dy")}} + +### E + +- {{SVGAttr("edgeMode")}} +- {{SVGAttr("elevation")}} +- {{SVGAttr("enable-background")}} +- {{SVGAttr("end")}} +- {{SVGAttr("exponent")}} +- {{SVGAttr("externalResourcesRequired")}} + +### F + +- {{SVGAttr("fill")}} +- {{SVGAttr("fill-opacity")}} +- {{SVGAttr("fill-rule")}} +- {{SVGAttr("filter")}} +- {{SVGAttr("filterRes")}} +- {{SVGAttr("filterUnits")}} +- {{SVGAttr("flood-color")}} +- {{SVGAttr("flood-opacity")}} +- {{SVGAttr("font-family")}} +- {{SVGAttr("font-size")}} +- {{SVGAttr("font-size-adjust")}} +- {{SVGAttr("font-stretch")}} +- {{SVGAttr("font-style")}} +- {{SVGAttr("font-variant")}} +- {{SVGAttr("font-weight")}} +- {{SVGAttr("format")}} +- {{SVGAttr("from")}} +- {{SVGAttr("fr")}} +- {{SVGAttr("fx")}} +- {{SVGAttr("fy")}} + +### G + +- {{SVGAttr("g1")}} +- {{SVGAttr("g2")}} +- {{SVGAttr("glyph-name")}} +- {{SVGAttr("glyph-orientation-horizontal")}} +- {{SVGAttr("glyph-orientation-vertical")}} +- {{SVGAttr("glyphRef")}} +- {{SVGAttr("gradientTransform")}} +- {{SVGAttr("gradientUnits")}} + +### H + +- {{SVGAttr("hanging")}} +- {{SVGAttr("height")}} +- {{SVGAttr("href")}} +- {{SVGAttr("hreflang")}} +- {{SVGAttr("horiz-adv-x")}} +- {{SVGAttr("horiz-origin-x")}} + +### I + +- {{SVGAttr("id")}} +- {{SVGAttr("ideographic")}} +- {{SVGAttr("image-rendering")}} +- {{SVGAttr("in")}} +- {{SVGAttr("in2")}} +- {{SVGAttr("intercept")}} + +### K + +- {{SVGAttr("k")}} +- {{SVGAttr("k1")}} +- {{SVGAttr("k2")}} +- {{SVGAttr("k3")}} +- {{SVGAttr("k4")}} +- {{SVGAttr("kernelMatrix")}} +- {{SVGAttr("kernelUnitLength")}} +- {{SVGAttr("kerning")}} +- {{SVGAttr("keyPoints")}} +- {{SVGAttr("keySplines")}} +- {{SVGAttr("keyTimes")}} + +### L + +- {{SVGAttr("lang")}} +- {{SVGAttr("lengthAdjust")}} +- {{SVGAttr("letter-spacing")}} +- {{SVGAttr("lighting-color")}} +- {{SVGAttr("limitingConeAngle")}} +- {{SVGAttr("local")}} + +### M + +- {{SVGAttr("marker-end")}} +- {{SVGAttr("marker-mid")}} +- {{SVGAttr("marker-start")}} +- {{SVGAttr("markerHeight")}} +- {{SVGAttr("markerUnits")}} +- {{SVGAttr("markerWidth")}} +- {{SVGAttr("mask")}} +- {{SVGAttr("maskContentUnits")}} +- {{SVGAttr("maskUnits")}} +- {{SVGAttr("mathematical")}} +- {{SVGAttr("max")}} +- {{SVGAttr("media")}} +- {{SVGAttr("method")}} +- {{SVGAttr("min")}} +- {{SVGAttr("mode")}} + +### N + +- {{SVGAttr("name")}} +- {{SVGAttr("numOctaves")}} + +### O + +- {{SVGAttr("offset")}} +- {{SVGAttr("opacity")}} +- {{SVGAttr("operator")}} +- {{SVGAttr("order")}} +- {{SVGAttr("orient")}} +- {{SVGAttr("orientation")}} +- {{SVGAttr("origin")}} +- {{SVGAttr("overflow")}} +- {{SVGAttr("overline-position")}} +- {{SVGAttr("overline-thickness")}} + +### P + +- {{SVGAttr("panose-1")}} +- {{SVGAttr("paint-order")}} +- {{SVGAttr("path")}} +- {{SVGAttr("pathLength")}} +- {{SVGAttr("patternContentUnits")}} +- {{SVGAttr("patternTransform")}} +- {{SVGAttr("patternUnits")}} +- {{SVGAttr("ping")}} +- {{SVGAttr("pointer-events")}} +- {{SVGAttr("points")}} +- {{SVGAttr("pointsAtX")}} +- {{SVGAttr("pointsAtY")}} +- {{SVGAttr("pointsAtZ")}} +- {{SVGAttr("preserveAlpha")}} +- {{SVGAttr("preserveAspectRatio")}} +- {{SVGAttr("primitiveUnits")}} + +### R + +- {{SVGAttr("r")}} +- {{SVGAttr("radius")}} +- {{SVGAttr("referrerPolicy")}} +- {{SVGAttr("refX")}} +- {{SVGAttr("refY")}} +- {{SVGAttr("rel")}} +- {{SVGAttr("rendering-intent")}} +- {{SVGAttr("repeatCount")}} +- {{SVGAttr("repeatDur")}} +- {{SVGAttr("requiredExtensions")}} +- {{SVGAttr("requiredFeatures")}} +- {{SVGAttr("restart")}} +- {{SVGAttr("result")}} +- {{SVGAttr("rotate")}} +- {{SVGAttr("rx")}} +- {{SVGAttr("ry")}} + +### S + +- {{SVGAttr("scale")}} +- {{SVGAttr("seed")}} +- {{SVGAttr("shape-rendering")}} +- {{SVGAttr("slope")}} +- {{SVGAttr("spacing")}} +- {{SVGAttr("specularConstant")}} +- {{SVGAttr("specularExponent")}} +- {{SVGAttr("speed")}} +- {{SVGAttr("spreadMethod")}} +- {{SVGAttr("startOffset")}} +- {{SVGAttr("stdDeviation")}} +- {{SVGAttr("stemh")}} +- {{SVGAttr("stemv")}} +- {{SVGAttr("stitchTiles")}} +- {{SVGAttr("stop-color")}} +- {{SVGAttr("stop-opacity")}} +- {{SVGAttr("strikethrough-position")}} +- {{SVGAttr("strikethrough-thickness")}} +- {{SVGAttr("string")}} +- {{SVGAttr("stroke")}} +- {{SVGAttr("stroke-dasharray")}} +- {{SVGAttr("stroke-dashoffset")}} +- {{SVGAttr("stroke-linecap")}} +- {{SVGAttr("stroke-linejoin")}} +- {{SVGAttr("stroke-miterlimit")}} +- {{SVGAttr("stroke-opacity")}} +- {{SVGAttr("stroke-width")}} +- {{SVGAttr("style")}} +- {{SVGAttr("surfaceScale")}} +- {{SVGAttr("systemLanguage")}} + +### T + +- {{SVGAttr("tabindex")}} +- {{SVGAttr("tableValues")}} +- {{SVGAttr("target")}} +- {{SVGAttr("targetX")}} +- {{SVGAttr("targetY")}} +- {{SVGAttr("text-anchor")}} +- {{SVGAttr("text-decoration")}} +- {{SVGAttr("text-rendering")}} +- {{SVGAttr("textLength")}} +- {{SVGAttr("to")}} +- {{SVGAttr("transform")}} +- {{SVGAttr("type")}} + +### U + +- {{SVGAttr("u1")}} +- {{SVGAttr("u2")}} +- {{SVGAttr("underline-position")}} +- {{SVGAttr("underline-thickness")}} +- {{SVGAttr("unicode")}} +- {{SVGAttr("unicode-bidi")}} +- {{SVGAttr("unicode-range")}} +- {{SVGAttr("units-per-em")}} + +### V + +- {{SVGAttr("v-alphabetic")}} +- {{SVGAttr("v-hanging")}} +- {{SVGAttr("v-ideographic")}} +- {{SVGAttr("v-mathematical")}} +- {{SVGAttr("values")}} +- {{SVGAttr("vector-effect")}} +- {{SVGAttr("version")}} +- {{SVGAttr("vert-adv-y")}} +- {{SVGAttr("vert-origin-x")}} +- {{SVGAttr("vert-origin-y")}} +- {{SVGAttr("viewBox")}} +- {{SVGAttr("viewTarget")}} +- {{SVGAttr("visibility")}} -<h3 id="Y">Y</h3> +### W -<ul> - <li>{{SVGAttr("y")}}</li> - <li>{{SVGAttr("y1")}}</li> - <li>{{SVGAttr("y2")}}</li> - <li>{{SVGAttr("yChannelSelector")}}</li> -</ul> +- {{SVGAttr("width")}} +- {{SVGAttr("widths")}} +- {{SVGAttr("word-spacing")}} +- {{SVGAttr("writing-mode")}} -<h3 id="Z">Z</h3> +### X -<ul> - <li>{{SVGAttr("z")}}</li> - <li>{{SVGAttr("zoomAndPan")}}</li> -</ul> +- {{SVGAttr("x")}} +- {{SVGAttr("x-height")}} +- {{SVGAttr("x1")}} +- {{SVGAttr("x2")}} +- {{SVGAttr("xChannelSelector")}} +- {{SVGAttr("xlink:actuate")}} +- {{SVGAttr("xlink:arcrole")}} +- {{SVGAttr("xlink:href")}} +- {{SVGAttr("xlink:role")}} +- {{SVGAttr("xlink:show")}} +- {{SVGAttr("xlink:title")}} +- {{SVGAttr("xlink:type")}} +- {{SVGAttr("xml:base")}} +- {{SVGAttr("xml:lang")}} +- {{SVGAttr("xml:space")}} +### Y -<h2 id="Attributs_SVG_par_catégorie">Attributs SVG par catégorie</h2> +- {{SVGAttr("y")}} +- {{SVGAttr("y1")}} +- {{SVGAttr("y2")}} +- {{SVGAttr("yChannelSelector")}} -<h3 id="Attributs_Génériques">Attributs Génériques</h3> +### Z -<h4 id="Attributs_de_base"><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></h4> +- {{SVGAttr("z")}} +- {{SVGAttr("zoomAndPan")}} -<p>{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}</p> +## Attributs SVG par catégorie -<h4 id="Attributs_de_style"><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></h4> +### Attributs Génériques -<p>{{SVGAttr("class")}}, {{SVGAttr("style")}}</p> +#### [Attributs de base](/fr/docs/Web/SVG/Attribute/Core) -<h4 id="Attributs_de_traitement_conditionnel">Attributs de traitement conditionnel</h4> +{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}} -<p>{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.</p> +#### [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling) -<h3 id="Attributs_XLink">Attributs XLink</h3> +{{SVGAttr("class")}}, {{SVGAttr("style")}} -<p>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}</p> +#### Attributs de traitement conditionnel -<h3 id="Attributs_de_présentation"><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></h3> +{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}. -<div class="note"> - <p><strong>Note :</strong> Tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS.</p> -</div> +### Attributs XLink -<p>{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}</p> +{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}} -<h3 id="Attributs_de_filtres">Attributs de filtres</h3> +### [Attributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation) -<h4 id="Attributs_de_primitives_de_filtre">Attributs de primitives de filtre</h4> +> **Note :** Tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS. -<p>{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}</p> +{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}} -<h4 id="Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</h4> +### Attributs de filtres -<p>{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}</p> +#### Attributs de primitives de filtre -<h3 id="Attributs_d'animation">Attributs d'animation</h3> +{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}} -<h4 id="Animation_cible">Animation cible</h4> +#### Attributs de fonction de transfert -<p>{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}</p> +{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}} -<h4 id="Timing_de_l'animation">Timing de l'animation</h4> +### Attributs d'animation -<p>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</p> +#### Animation cible -<h4 id="Valeurs_de_l'animation">Valeurs de l'animation</h4> +{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}} -<p>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}</p> +#### Timing de l'animation -<h4 id="Addition_de_l'animation">Addition de l'animation</h4> +{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}} -<p>{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</p> +#### Valeurs de l'animation -<h3 id="Attributs_d'événement">Attributs d'événement</h3> +{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}} -<h4 id="Événements_d'animation"><a href="/fr/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">Événements d'animation</a></h4> +#### Addition de l'animation -<p><strong><code>onbegin</code></strong>, <strong><code>onend</code></strong>, <strong><code>onrepeat</code></strong></p> +{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}} -<h4 id="Événements_du_document"><a href="/fr/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Événements du document</a></h4> +### Attributs d'événement -<p><strong><code>onabort</code></strong>, <strong><code>onerror</code></strong>, <strong><code>onresize</code></strong>, <strong><code>onscroll</code></strong>, <strong><code>onunload</code></strong></p> +#### [Événements d'animation](/fr/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes) -<h4 id="Événements_globaux"><a href="/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Événements globaux</a></h4> +**`onbegin`**, **`onend`**, **`onrepeat`** -<p><code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code></p> +#### [Événements du document](/fr/docs/Web/SVG/Attribute/Events#Document_Event_Attributes) -<h4 id="Événement_graphiques"><a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Événement graphiques</a></h4> +**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`** -<p><strong><code>onactivate</code></strong>, <strong><code>onfocusin</code></strong>, <strong><code>onfocusout</code></strong></p> +#### [Événements globaux](/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes) -<h2 id="Voir_aussi">Voir aussi</h2> +**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`** -<ul> - <li><a href="/fr/docs/Web/SVG/Element">Référence des éléments 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#Interfaces_SVG">Références des interfaces SVG</a></li> -</ul> +#### [Événement graphiques](/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes) + +**`onactivate`**, **`onfocusin`**, **`onfocusout`** + +## Voir aussi + +- [Référence des éléments SVG](/fr/docs/Web/SVG/Element) +- [Tutoriel SVG](/fr/docs/Web/SVG/Tutoriel) +- [Références des interfaces SVG](/fr/docs/Web/API/Document_Object_Model#Interfaces_SVG) diff --git a/files/fr/web/svg/attribute/mask/index.md b/files/fr/web/svg/attribute/mask/index.md index c7059b649f..e7f384882c 100644 --- a/files/fr/web/svg/attribute/mask/index.md +++ b/files/fr/web/svg/attribute/mask/index.md @@ -3,82 +3,90 @@ title: mask slug: Web/SVG/Attribute/mask translation_of: Web/SVG/Attribute/mask --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <code>mask</code> est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément {{ SVGElement("mask") }}) sur l'élément qui possède cet attribut.</p> +L'attribut `mask` est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément {{ SVGElement("mask") }}) sur l'élément qui possède cet attribut. -<div class="note"> - <p><strong>Note :</strong> On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS.</p> -</div> +> **Note :** On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS. -<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"> - <mask id="monMask" maskContentUnits="objectBoundingBox"> - <rect fill="white" x="0" y="0" width="100%" height="100%" /> - <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> - </mask> +```html +<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <mask id="monMask" maskContentUnits="objectBoundingBox"> + <rect fill="white" x="0" y="0" width="100%" height="100%" /> + <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> + </mask> - <!-- Fait un trou de la forme d'une étoile sur le cercle rouge, - ce qui laisse apparaître le cercle jaune situé dessous. --> - <circle cx="50" cy="50" r="20" fill="yellow" /> - <circle cx="50" cy="50" r="45" fill="red" - mask="url(#monMask)"/> -</svg></pre> + <!-- Fait un trou de la forme d'une étoile sur le cercle rouge, + ce qui laisse apparaître le cercle jaune situé dessous. --> + <circle cx="50" cy="50" r="20" fill="yellow" /> + <circle cx="50" cy="50" r="45" fill="red" + mask="url(#monMask)"/> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> +{{EmbedLiveSample('exemple', '100%', 150)}} -<p>Depuis SVG2, l'attribut {{cssxref('mask')}} est défini comme une propriété CSS et comme une propriété raccourcie pour beaucoup d'autres propriétés: {{cssxref('mask-image')}}, {{cssxref('mask-mode')}}, {{cssxref('mask-repeat')}}, {{cssxref('mask-position')}}, {{cssxref('mask-clip')}}, {{cssxref('mask-origin')}}, {{cssxref('mask-size')}} et {{cssxref('mask-composite')}}.</p> +Depuis SVG2, l'attribut {{cssxref('mask')}} est défini comme une propriété CSS et comme une propriété raccourcie pour beaucoup d'autres propriétés: {{cssxref('mask-image')}}, {{cssxref('mask-mode')}}, {{cssxref('mask-repeat')}}, {{cssxref('mask-position')}}, {{cssxref('mask-clip')}}, {{cssxref('mask-origin')}}, {{cssxref('mask-size')}} et {{cssxref('mask-composite')}}. -<p>Étant un attribut de présentation, il peut être appliqué sur n'importe quel élément, mais il a un effet visible surtout sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}} et {{SVGElement('use')}}.</p> +Étant un attribut de présentation, il peut être appliqué sur n'importe quel élément, mais il a un effet visible surtout sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}} et {{SVGElement('use')}}. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>Voir la propriété CSS {{cssxref('mask')}}</td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>none</code></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td>Voir la propriété CSS {{cssxref('mask')}}</td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.mask")}}</p> +{{Compat("svg.attributes.presentation.mask")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications <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("CSS Masks", "#the-mask", 'mask')}}</td> - <td>{{Spec2("CSS Masks")}}</td> - <td> - <p>Étend cet usage pour les éléments HTML en créant un raccourci pour les nouvelles propriétés <code>mask-*</code> défini dans cette spécification.</p> - </td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Status</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td> + <td>{{Spec2("CSS Masks")}}</td> + <td> + <p> + Étend cet usage pour les éléments HTML en créant un raccourci pour les + nouvelles propriétés <code>mask-*</code> défini dans cette + spécification. + </p> + </td> + </tr> + <tr> + <td> + {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}} + </td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> </table> diff --git a/files/fr/web/svg/attribute/points/index.md b/files/fr/web/svg/attribute/points/index.md index 1ca4f41fc7..24004a79bc 100644 --- a/files/fr/web/svg/attribute/points/index.md +++ b/files/fr/web/svg/attribute/points/index.md @@ -3,138 +3,121 @@ title: points slug: Web/SVG/Attribute/points translation_of: Web/SVG/Attribute/points --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <code><strong>point</strong></code> défini une liste de points. Chaque point est défini par deux nombres représentant les coordonnées X et Y dans le système de coordonnées de l'utilisateur. Si une coordonnées est dépareillée elle sera ignorée.</p> +L'attribut **`point`** défini une liste de points. Chaque point est défini par deux nombres représentant les coordonnées X et Y dans le système de coordonnées de l'utilisateur. Si une coordonnées est dépareillée elle sera ignorée. -<p>Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut.</p> +Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut. -<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="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> - <!-- polyline est une forme ouverte --> - <polyline stroke="black" fill="none" - points="50,0 21,90 98,35 2,35 79,90"/> +```html +<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> + <!-- polyline est une forme ouverte --> + <polyline stroke="black" fill="none" + points="50,0 21,90 98,35 2,35 79,90"/> - <!-- polygon est une forme fermée --> - <polygon stroke="black" fill="none" transform="translate(100,0)" - points="50,0 21,90 98,35 2,35 79,90"/> + <!-- polygon est une forme fermée --> + <polygon stroke="black" fill="none" transform="translate(100,0)" + points="50,0 21,90 98,35 2,35 79,90"/> - <!-- + <!-- Il est généralement recommendé de séparer les valeurs X et Y avec une virgule et les coordonées avec des espaces. Cela est plus lisible. - --> -</svg></pre> + --> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="polyline">polyline</h2> +## polyline -<p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.</p> +Pour un élément {{SVGElement('polyline')}}, `points` défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur. -<div class="note"> - <p><strong>Note :</strong> Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.</p> -</div> +> **Note :** Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point. <table class="properties"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>[ {{cssxref("number")}}+ ]#</td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Peut être animé</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td>[ {{cssxref("number")}}+ ]#</td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Peut être animé</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="Exemple">Exemple</h3> +### 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="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> - <!-- polyline est une forme ouverte --> - <polyline stroke="black" fill="none" - points="50,0 21,90 98,35 2,35 79,90"/> -</svg></pre> +```html +<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> + <!-- polyline est une forme ouverte --> + <polyline stroke="black" fill="none" + points="50,0 21,90 98,35 2,35 79,90"/> +</svg> +``` -<p>{{EmbedLiveSample('polyline', '100%', 200)}}</p> +{{EmbedLiveSample('polyline', '100%', 200)}} -<h2 id="polygon">polygon</h2> +## polygon -<p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.</p> +Pour un élément {{SVGElement('polyline')}}, `points` défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur. -<div class="note"> - <p><strong>Note :</strong> Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.</p> -</div> +> **Note :** Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier. <table class="properties"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td>[ {{cssxref("number")}}+ ]#</td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><em>aucune</em></td> - </tr> - <tr> - <th scope="row">Peut être animé</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td>[ {{cssxref("number")}}+ ]#</td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><em>aucune</em></td> + </tr> + <tr> + <th scope="row">Peut être animé</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="Example">Example</h3> - -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> - -<pre class="brush: html"><svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> - <!-- polygon est une forme fermée --> - <polygon stroke="black" fill="none" - points="50,0 21,90 98,35 2,35 79,90" /> -</svg></pre> - -<p>{{EmbedLiveSample('polygon', '100%', 200)}}</p> - -<h2 id="Spécification">Spécification</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", "shapes.html#PolygonElementPointsAttribute", "points")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition de <code><polygon></code></td> - </tr> - <tr> - <td>{{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition de <code><polyline></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale de <code><polygon></code></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale de <code><polyline></code></td> - </tr> - </tbody> -</table> +### Example + +```css hidden +html,body,svg { height:100% } +``` + +```html +<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> + <!-- polygon est une forme fermée --> + <polygon stroke="black" fill="none" + points="50,0 21,90 98,35 2,35 79,90" /> +</svg> +``` + +{{EmbedLiveSample('polygon', '100%', 200)}} + +## Spécification + +| Spécification | Status | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------- | +| {{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}} | {{Spec2("SVG2")}} | Définition de `<polygon>` | +| {{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}} | {{Spec2("SVG2")}} | Définition de `<polyline>` | +| {{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}} | {{Spec2("SVG1.1")}} | Définition initiale de `<polygon>` | +| {{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}} | {{Spec2("SVG1.1")}} | Définition initiale de `<polyline>` | diff --git a/files/fr/web/svg/attribute/presentation/index.md b/files/fr/web/svg/attribute/presentation/index.md index bf0a47bbee..7eef5286d7 100644 --- a/files/fr/web/svg/attribute/presentation/index.md +++ b/files/fr/web/svg/attribute/presentation/index.md @@ -3,270 +3,266 @@ title: Attributs SVG de présentation slug: Web/SVG/Attribute/Presentation translation_of: Web/SVG/Attribute/Presentation --- -<p>{{draft}}</p> +{{draft}} -<p>Les <em>attributs SVG de présentation</em> sont des propriétés CSS pouvant être utilisées comme attributs sur les éléments SVG</p> +Les _attributs SVG de présentation_ sont des propriétés CSS pouvant être utilisées comme attributs sur les éléments SVG -<ul> - <li>alignment-baseline</li> - <li>baseline-shift</li> - <li>clip</li> - <li>clip-path</li> - <li>clip-rule</li> - <li>color</li> - <li>color-interpolation</li> - <li>color-interpolation-filters</li> - <li>color-profile</li> - <li>color-rendering</li> - <li>cursor</li> - <li>direction</li> - <li>display</li> - <li>dominant-baseline</li> - <li>enable-background</li> - <li>fill</li> - <li>fill-opacity</li> - <li>fill-rule</li> - <li>filter</li> - <li>flood-color</li> - <li>flood-opacity</li> - <li>font-family</li> - <li>font-size</li> - <li>font-size-adjust</li> - <li>font-stretch</li> - <li>font-style</li> - <li>font-variant</li> - <li>font-weight</li> - <li>glyph-orientation-horizontal</li> - <li>glyph-orientation-vertical</li> - <li>image-rendering</li> - <li>kerning</li> - <li>letter-spacing</li> - <li>lighting-color</li> - <li>marker-end</li> - <li>marker-mid</li> - <li>marker-start</li> - <li>mask</li> - <li>opacity</li> - <li>overflow</li> - <li>pointer-events</li> - <li>shape-rendering</li> - <li>solid-color</li> - <li>solid-opacity</li> - <li>stop-color</li> - <li>stop-opacity</li> - <li>stroke</li> - <li>stroke-dasharray</li> - <li>stroke-dashoffset</li> - <li>stroke-linecap</li> - <li>stroke-linejoin</li> - <li>stroke-miterlimit</li> - <li>stroke-opacity</li> - <li>stroke-width</li> - <li>text-anchor</li> - <li>text-decoration</li> - <li>text-rendering</li> - <li>transform</li> - <li>unicode-bidi</li> - <li>vector-effect</li> - <li>visibility</li> - <li>word-spacing</li> - <li>writing-mode</li> -</ul> +- alignment-baseline +- baseline-shift +- clip +- clip-path +- clip-rule +- color +- color-interpolation +- color-interpolation-filters +- color-profile +- color-rendering +- cursor +- direction +- display +- dominant-baseline +- enable-background +- fill +- fill-opacity +- fill-rule +- filter +- flood-color +- flood-opacity +- font-family +- font-size +- font-size-adjust +- font-stretch +- font-style +- font-variant +- font-weight +- glyph-orientation-horizontal +- glyph-orientation-vertical +- image-rendering +- kerning +- letter-spacing +- lighting-color +- marker-end +- marker-mid +- marker-start +- mask +- opacity +- overflow +- pointer-events +- shape-rendering +- solid-color +- solid-opacity +- stop-color +- stop-opacity +- stroke +- stroke-dasharray +- stroke-dashoffset +- stroke-linecap +- stroke-linejoin +- stroke-miterlimit +- stroke-opacity +- stroke-width +- text-anchor +- text-decoration +- text-rendering +- transform +- unicode-bidi +- vector-effect +- visibility +- word-spacing +- writing-mode -<h2 id="Attributs">Attributs</h2> +## Attributs -<dl> - <dt>{{SVGAttr('alignment-baseline')}}</dt> - <dd>Spécifie comment un objet est aligné sur la ligne de pied de la police par rapport à son parent.<br> - <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>before-edge</code>|<code>text-before-edge</code>|<code>middle</code>|<code>central</code>|<code>after-edge</code>|<code>text-after-edge</code>|<code>ideographic</code>|<code>alphabetic</code>|<code>hanging</code>|<code>mathematical</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('baseline-shift')}}</dt> - <dd>Permet de positionner la ligne de pied de l'élément par rapport à celle de son parent.<br> - <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>super</code>|<code>sub</code>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('clip')}} {{deprecated_inline('css')}}</dt> - <dd>Définit quelle partie d'un élément est visible.<br> - <small><em>Valeur</em>: <strong><code>auto</code></strong>|{{cssxref("shape")}}|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('clip-path')}}</dt> - <dd>Associe un chemin de détourage {{SVGElement('clipPath')}} à l'élément.<br> - <small><em>Valeur</em>: <strong><code>none</code></strong>|<a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('clip-rule')}}</dt> - <dd>Indique la règle de remplissage à appliquer sur un élément {{SVGElement('clipPath')}}.<br> - <small><em>Valeur</em>: <strong><code>nonezero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('color')}}</dt> - <dd>Définit la valeur potentielle (valeur de <code>currentColor</code>) pour les attributs de présentation <code>fill</code>, <code>stroke</code>, <code>stop-color</code>, <code>flood-color</code> et <code>lighting-color</code>.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('color-interpolation')}}</dt> - <dd>Spécifie l'espace colométrique pour les interpolations de dégradés, les animations couleur et composition alpha.<br> - <small><em>Valeur</em>: <code>auto</code>|<strong><code>sRGB</code></strong>|<code>linearRGB</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('color-interpolation-filters')}}</dt> - <dd>Spécifie l'espace colométrique pour les opérations effectuées via des effets de filtre.<br> - <small><em>Valeur</em>: <code>auto</code>|<code>sRGB</code>|<strong><code>linearRGB</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}</dt> - <dd>Définit le profil de couleur qu'une image bitmap incluse via l'élément {{SVGElement('image')}} doit utiliser.<br> - <small><em>Valeur</em>: <code>auto</code>|<code>sRGB</code>|<code>linearRGB</code>|<a href="/docs/Web/SVG/Content_type#Name"><name></a>|<a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('color-rendering')}}</dt> - <dd>Indique au navigateur comment optimiser ses opérations d'interpolation et de composition des couleurs.<br> - <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>optimizeSpeed</code>|<code>optimizeQuality</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('cursor')}}</dt> - <dd>Spécifie le curseur affiché lorsque la souris passe au-desuss de l'élément.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<a href="/docs/Web/CSS/cursor#Values"><keywords></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('direction')}}</dt> - <dd>Spécifie la direction d'écriture du texte.<br> - <small><em>Valeur</em>: <strong><code>ltr</code></strong>|<code>rtl</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('display')}}</dt> - <dd>Permet de contrôler le rendu d'éléments graphiques ou conteneurs.<br> - <small><em>Valeur</em>: see css {{cssxref('display')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('dominant-baseline')}}</dt> - <dd>Définit la ligne de pied utilisée pour aligner le texte.<br> - <small><em>Valeur</em>: <code>auto</code>|<code>text-bottom</code>|<code>alphabetic</code>|<code>ideographic</code>|<code>middle</code>|<code>central</code>| <code>mathematical</code>|<code>hanging</code>|<code>text-top</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}</dt> - <dd>Indique au navigateur comment gérer l'image d'arrière plan.<br> - <small><em>Valeur</em>: <strong><code>accumulate</code></strong>|<code>new</code>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt>{{SVGAttr('fill')}}</dt> - <dd>Définit la couleur de remplissage d'un élément graphique.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Paint"><paint></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('fill-opacity')}}</dt> - <dd>Définit l'opacité du remplissage de l'élément.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('fill-rule')}}</dt> - <dd>Indique comment déterminer quelles parties du chemin se trouvent à l'intérieur de la forme.<br> - <small><em>Valeur</em>: <strong><code>nonzero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('filter')}}</dt> - <dd>Applique un filtre, définit par un élément {{SVGElement('filter')}}, à l'élément.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('flood-color')}}</dt> - <dd>Indique quelle couleur utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('flood-opacity')}}</dt> - <dd>Indique l'opacité à utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('font-family')}}</dt> - <dd>Indique la police utiliser pour restituer le texte de l'élément.<br> - <small><em>Valeur</em>: see css {{cssxref('font-family')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('font-size')}}</dt> - <dd>Spécifie la taille de la police.<br> - <small><em>Valeur</em>: see css {{cssxref('font-size')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('font-size-adjust')}}</dt> - <dd>Spécifie que la taille de la police doit être choisit en se basant sur la taille des lettres minuscules et non des majuscules.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number"><number></a>|<code><strong>none</strong></code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('font-stretch')}}</dt> - <dd>Sélectionne la version normale, condensée ou espacée d'une police.<br> - <small><em>Valeur</em>: see css {{cssxref('font-stretch')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('font-style')}}</dt> - <dd>Spécifie si la police doit être stylisée en normal, italique ou oblique.<br> - <small><em>Valeur</em>: <strong><code>normal</code></strong>|<code>italic</code>|<code>oblique</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('font-variant')}}</dt> - <dd>Spécifie si une police doit utiliser certaines variations, telles que les petites majuscules ou les ligatures.<br> - <small><em>Valeur</em>: see css {{cssxref('font-variant')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('font-weight')}}</dt> - <dd>Spécifie l'épaisseur (ou graisse) de la police.<br> - <small><em>Valeur</em>: <strong><code>normal</code></strong>|<code>bold</code>|<code>lighter</code>|<code>bolder</code>|<code>100</code>|<code>200</code>|<code>300</code>|<code>400</code>|<code>500</code>|<code>600</code>|<code>700</code>|<code>800</code>|<code>900</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}</dt> - <dd>Contrôle l'orientation des glyphes lorsque la direction en ligne est horizontale.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Angle"><angle></a>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt>{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}</dt> - <dd>Contrôle l'orientation des glyphes lorsque la direction en ligne est verticale.<br> - <small><em>Valeur</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Angle"><angle></a>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd> - <dt>{{SVGAttr('image-rendering')}}</dt> - <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des images.<br> - <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>optimizeQuality</code>|<code>optimizeSpeed</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}</dt> - <dd>Indique au navigateur s'il doit ajuster l'espacement entre les glyphes.<br> - <small><em>Valeur</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('letter-spacing')}}</dt> - <dd>Contrôle l'espacement entre les caratères du texte.<br> - <small><em>Valeur</em>: <strong><code>normal</code></strong>|<a href="/docs/Web/SVG/Content_type#Length"><length></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('lighting-color')}}</dt> - <dd>Définit la couleur de la source de lumière pour les filtres {{SVGElement('feDiffuseLighting')}} et {{SVGElement('feSpecularLighting')}}.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color"><color></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('marker-end')}}</dt> - <dd>Définit la pointe de la flèche ou polymarker dessiné à la fin de l'élément {{SVGElement('path')}} ou ou de la forme.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('marker-mid')}}</dt> - <dd>Définit la pointe de la flèche ou polymarker dessiné entre chaque segment de l'élément {{SVGElement('path')}} ou de la forme.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('marker-start')}}</dt> - <dd>Définit la pointe de la flèche ou polymarker dessiné au début de l'élément {{SVGElement('path')}} ou ou de la forme.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI"><FuncIRI></a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('mask')}}</dt> - <dd>Modifie la visibilité d'un élément en masquant ou détourant l'image à des endroits spécifiques.<br> - <small><em>Valeur</em>: see css {{cssxref('mask')}}; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('opacity')}}</dt> - <dd>Spécifie l'opacité d'un objet ou d'un groupe d'objets.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Opacity_value"><opacity-value></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('overflow')}}</dt> - <dd>Spécifie si le contenu d'un élément bloc est tronqué lorsqu'il déborde de la zone de l'élément.<br> - <small><em>Valeur</em>: <code><strong>visible</strong></code>|<code>hidden|scroll</code>|<code>auto</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('pointer-events')}}</dt> - <dd>Définit si et quand un élément peut être la cible d'un événement de la souris.<br> - <small><em>Valeur</em>: <code>bounding-box</code>|<code><strong>visiblePainted</strong></code>|<code>visibleFil</code>|<code>visibleStroke</code>|<code>visible</code> |<code>painted</code>|<code>fill</code>|<code>stroke</code>|<code>all</code>|<code>none</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('shape-rendering')}}</dt> - <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des éléments {{SVGElement('path')}} et des formes.<br> - <small><em>Valeur</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>crispEdges</code>|<code>geometricPrecision</code> |<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('solid-color')}}</dt> - <dd>-<br> - <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd> - <dt>{{SVGAttr('solid-opacity')}}</dt> - <dd>-<br> - <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd> - <dt>{{SVGAttr('stop-color')}}</dt> - <dd>Indique la couleur à utiliser sur un {{SVGElement('stop')}} d'un dégradé.<br> - <small><em>Valeur</em>: <code>currentColor</code>|<a href="/fr/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a>|<a href="/fr/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('stop-opacity')}}</dt> - <dd>Indique l'opacité du {{SVGElement('stop')}}.<br> - <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('stroke')}}</dt> - <dd>Définit la couleur à utiliser pour le contour de l'élément.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Paint"><paint></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('stroke-dasharray')}}</dt> - <dd>Définit le motif des pointillés utilisé pour dessiner le contour de la forme.<br> - <small><em>Valeur</em>: <code>none</code>|<code><dasharray></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('stroke-dashoffset')}}</dt> - <dd>Décale la position de départ des pointillés.<br> - <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a>|<a href="/fr/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('stroke-linecap')}}</strong></dt> - <dd>Définit la forme de la fin des lignes.<br> - <small><em>Valeur</em>: <code><strong>butt</strong></code>|<code>round</code>|<code>square</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('stroke-linejoin')}}</strong></dt> - <dd>Définit la manière de dessiner la liaison entre deux segments de ligne.<br> - <small><em>Valeur</em>: <code>arcs</code>|<code>bevel</code>|<code><strong>miter</strong></code>|<code>miter-clip</code>|<code>round</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('stroke-miterlimit')}}</strong></dt> - <dd>Définit la limite du rapport entre la longueur du coin et la valeur de {{SVGAttr('stroke-width')}} utilisée pour dessiner la liaison entre deux segments de ligne.<br> - <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('stroke-opacity')}}</strong></dt> - <dd>Définit l'opacité du contour d'une forme.<br> - <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a>|<a href="/docs/Web/SVG/Content_type#Paint"><percentage></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('stroke-width')}}</strong></dt> - <dd>Définit l'épaisseur du contour appliqué à une forme.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><length></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('text-anchor')}}</strong></dt> - <dd>Définit l'alignement vertical d'une chaîne de texte.<br> - <small><em>Valeur</em>: <code>start</code>|<code>middle</code>|<code>end</code>|<code><strong>inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('text-decoration')}}</strong></dt> - <dd>Définit l'apparence des lignes décoratives sur le texte.<br> - <small><em>Valeur</em>: <code>none</code>|<code>underline</code>|<code>overline</code>|<code>line-through</code>|<code>blink</code>|<code><strong>inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('text-rendering')}}</strong></dt> - <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu du texte.<br> - <small><em>Valeur</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>optimizeLegibility</code>|<code>geometricPrecision</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('transform')}}</strong></dt> - <dd>Définit une liste de transformations à appliquer à un élément et à ses enfants.<br> - <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('unicode-bidi')}}</strong></dt> - <dd>-<br> - <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd> - <dt><strong>{{SVGAttr('vector-effect')}}</strong></dt> - <dd>Spécifie l'effet vectoriel à utiliser lors du dessin d'un objet.<br> - <small><em>Valeur</em>: <code>default</code>|<code>non-scaling-stroke</code>|<code>inherit</code>|<code><uri></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('visibility')}}</strong></dt> - <dd>Définit la visibilité d'éléments graphiques.<br> - <small><em>Valeur</em>: <strong><code>visible</code></strong>|<code>hidden</code>|<code>collapse</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('word-spacing')}}</strong></dt> - <dd>Définit la longueur des espaces entre les mots d'un texte.<br> - <small><em>Valeur</em>: <a href="/fr/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a>|<code><strong title="this is the default value">inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt><strong>{{SVGAttr('writing-mode')}}</strong></dt> - <dd>Spécifie si la direction d'un élément {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas.<br> - <small><em>Valeur</em>: <strong><code>lr-tb</code></strong>|<code>rl-tb</code>|<code>tb-rl</code>|<code>lr</code>|<code>rl</code>|<code>tb</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> -</dl> +- {{SVGAttr('alignment-baseline')}} + - : Spécifie comment un objet est aligné sur la ligne de pied de la police par rapport à son parent. + _Valeur_: **`auto`**|`baseline`|`before-edge`|`text-before-edge`|`middle`|`central`|`after-edge`|`text-after-edge`|`ideographic`|`alphabetic`|`hanging`|`mathematical`|`inherit`; _Animation_: **Oui** +- {{SVGAttr('baseline-shift')}} + - : Permet de positionner la ligne de pied de l'élément par rapport à celle de son parent. + _Valeur_: **`auto`**|`baseline`|`super`|`sub`|[\<percentage>](/docs/Web/SVG/Content_type#Percentage)|[\<length>](/docs/Web/SVG/Content_type#Length)|`inherit`; _Animation_: **Oui** +- {{SVGAttr('clip')}} {{deprecated_inline('css')}} + - : Définit quelle partie d'un élément est visible. + _Valeur_: **`auto`**|{{cssxref("shape")}}|`inherit`; _Animation_: **Oui** +- {{SVGAttr('clip-path')}} + - : Associe un chemin de détourage {{SVGElement('clipPath')}} à l'élément. + _Valeur_: **`none`**|[\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|`inherit`; _Animation_: **Oui** +- {{SVGAttr('clip-rule')}} + - : Indique la règle de remplissage à appliquer sur un élément {{SVGElement('clipPath')}}. + _Valeur_: **`nonezero`**|`evenodd`|`inherit`; _Animation_: **Oui** +- {{SVGAttr('color')}} + - : Définit la valeur potentielle (valeur de `currentColor`) pour les attributs de présentation `fill`, `stroke`, `stop-color`, `flood-color` et `lighting-color`. + _Valeur_: [\<color>](/docs/Web/SVG/Content_type#Color)|`inherit`; _Animation_: **Oui** +- {{SVGAttr('color-interpolation')}} + - : Spécifie l'espace colométrique pour les interpolations de dégradés, les animations couleur et composition alpha. + _Valeur_: `auto`|**`sRGB`**|`linearRGB`|`inherit`; _Animation_: **Oui** +- {{SVGAttr('color-interpolation-filters')}} + - : Spécifie l'espace colométrique pour les opérations effectuées via des effets de filtre. + _Valeur_: `auto`|`sRGB`|**`linearRGB`**|`inherit`; _Animation_: **Oui** +- {{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}} + - : Définit le profil de couleur qu'une image bitmap incluse via l'élément {{SVGElement('image')}} doit utiliser. + _Valeur_: `auto`|`sRGB`|`linearRGB`|[\<name>](/docs/Web/SVG/Content_type#Name)|[\<IRI>](/docs/Web/SVG/Content_type#IRI)|`inherit`; _Animation_: **Oui** +- {{SVGAttr('color-rendering')}} + - : Indique au navigateur comment optimiser ses opérations d'interpolation et de composition des couleurs. + _Valeur_: **`auto`**|`optimizeSpeed`|`optimizeQuality`|`inherit`; _Animation_: **Oui** +- {{SVGAttr('cursor')}} + - : Spécifie le curseur affiché lorsque la souris passe au-desuss de l'élément. + _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|[\<keywords>](/docs/Web/CSS/cursor#Values)|`inherit`; _Animation_: **Oui** +- {{SVGAttr('direction')}} + - : Spécifie la direction d'écriture du texte. + _Valeur_: **`ltr`**|`rtl`|`inherit`; _Animation_: **Oui** +- {{SVGAttr('display')}} + - : Permet de contrôler le rendu d'éléments graphiques ou conteneurs. + _Valeur_: see css {{cssxref('display')}}; _Animation_: **Oui** +- {{SVGAttr('dominant-baseline')}} + - : Définit la ligne de pied utilisée pour aligner le texte. + _Valeur_: `auto`|`text-bottom`|`alphabetic`|`ideographic`|`middle`|`central`| `mathematical`|`hanging`|`text-top`; _Animation_: **Oui** +- {{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}} + - : Indique au navigateur comment gérer l'image d'arrière plan. + _Valeur_: **`accumulate`**|`new`|`inherit`; _Animation_: **Non** +- {{SVGAttr('fill')}} + - : Définit la couleur de remplissage d'un élément graphique. + _Valeur_: [\<paint>](/docs/Web/SVG/Content_type#Paint); _Animation_: **Oui** +- {{SVGAttr('fill-opacity')}} + - : Définit l'opacité du remplissage de l'élément. + _Valeur_: [\<number>](/docs/Web/SVG/Content_type#Number)|[\<percentage>](/docs/Web/SVG/Content_type#Percentage); _Animation_: **Oui** +- {{SVGAttr('fill-rule')}} + - : Indique comment déterminer quelles parties du chemin se trouvent à l'intérieur de la forme. + _Valeur_: **`nonzero`**|`evenodd`|`inherit`; _Animation_: **Oui** +- {{SVGAttr('filter')}} + - : Applique un filtre, définit par un élément {{SVGElement('filter')}}, à l'élément. + _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animation_: **Oui** +- {{SVGAttr('flood-color')}} + - : Indique quelle couleur utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}. + _Valeur_: [\<color>](/docs/Web/SVG/Content_type#Color); _Animation_: **Oui** +- {{SVGAttr('flood-opacity')}} + - : Indique l'opacité à utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}. + _Valeur_: [\<number>](/docs/Web/SVG/Content_type#Number)|[\<percentage>](/docs/Web/SVG/Content_type#Percentage); _Animation_: **Oui** +- {{SVGAttr('font-family')}} + - : Indique la police utiliser pour restituer le texte de l'élément. + _Valeur_: see css {{cssxref('font-family')}}; _Animation_: **Oui** +- {{SVGAttr('font-size')}} + - : Spécifie la taille de la police. + _Valeur_: see css {{cssxref('font-size')}}; _Animation_: **Oui** +- {{SVGAttr('font-size-adjust')}} + - : Spécifie que la taille de la police doit être choisit en se basant sur la taille des lettres minuscules et non des majuscules. + _Valeur_: [\<number>](/docs/Web/SVG/Content_type#Number)|**`none`**|`inherit`; _Animation_: **Oui** +- {{SVGAttr('font-stretch')}} + - : Sélectionne la version normale, condensée ou espacée d'une police. + _Valeur_: see css {{cssxref('font-stretch')}}; _Animation_: **Oui** +- {{SVGAttr('font-style')}} + - : Spécifie si la police doit être stylisée en normal, italique ou oblique. + _Valeur_: **`normal`**|`italic`|`oblique`; _Animation_: **Oui** +- {{SVGAttr('font-variant')}} + - : Spécifie si une police doit utiliser certaines variations, telles que les petites majuscules ou les ligatures. + _Valeur_: see css {{cssxref('font-variant')}}; _Animation_: **Oui** +- {{SVGAttr('font-weight')}} + - : Spécifie l'épaisseur (ou graisse) de la police. + _Valeur_: **`normal`**|`bold`|`lighter`|`bolder`|`100`|`200`|`300`|`400`|`500`|`600`|`700`|`800`|`900`; _Animation_: **Oui** +- {{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}} + - : Contrôle l'orientation des glyphes lorsque la direction en ligne est horizontale. + _Valeur_: [\<angle>](/docs/Web/SVG/Content_type#Angle)|`inherit`; _Animation_: **Non** +- {{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}} + - : Contrôle l'orientation des glyphes lorsque la direction en ligne est verticale. + _Valeur_: **`auto`**|[\<angle>](/docs/Web/SVG/Content_type#Angle)|`inherit`; _Animation_: **Non** +- {{SVGAttr('image-rendering')}} + - : Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des images. + _Valeur_: **`auto`**|`optimizeQuality`|`optimizeSpeed`; _Animation_: **Oui** +- {{SVGAttr('kerning')}} {{deprecated_inline('svg2')}} + - : Indique au navigateur s'il doit ajuster l'espacement entre les glyphes. + _Valeur_: **`auto`**|[\<length>](/docs/Web/SVG/Content_type#Length)|`inherit`; _Animation_: **Oui** +- {{SVGAttr('letter-spacing')}} + - : Contrôle l'espacement entre les caratères du texte. + _Valeur_: **`normal`**|[\<length>](/docs/Web/SVG/Content_type#Length)|`inherit`; _Animation_: **Oui** +- {{SVGAttr('lighting-color')}} + - : Définit la couleur de la source de lumière pour les filtres {{SVGElement('feDiffuseLighting')}} et {{SVGElement('feSpecularLighting')}}. + _Valeur_: [\<color>](/docs/Web/SVG/Content_type#Color); _Animation_: **Oui** +- {{SVGAttr('marker-end')}} + - : Définit la pointe de la flèche ou polymarker dessiné à la fin de l'élément {{SVGElement('path')}} ou ou de la forme. + _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animation_: **Oui** +- {{SVGAttr('marker-mid')}} + - : Définit la pointe de la flèche ou polymarker dessiné entre chaque segment de l'élément {{SVGElement('path')}} ou de la forme. + _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animation_: **Oui** +- {{SVGAttr('marker-start')}} + - : Définit la pointe de la flèche ou polymarker dessiné au début de l'élément {{SVGElement('path')}} ou ou de la forme. + _Valeur_: [\<FuncIRI>](/docs/Web/SVG/Content_type#FuncIRI)|**`none`**|`inherit`; _Animation_: **Oui** +- {{SVGAttr('mask')}} + - : Modifie la visibilité d'un élément en masquant ou détourant l'image à des endroits spécifiques. + _Valeur_: see css {{cssxref('mask')}}; _Animation_: **Oui** +- {{SVGAttr('opacity')}} + - : Spécifie l'opacité d'un objet ou d'un groupe d'objets. + _Valeur_: [\<opacity-value>](/docs/Web/SVG/Content_type#Opacity_value); _Animation_: **Oui** +- {{SVGAttr('overflow')}} + - : Spécifie si le contenu d'un élément bloc est tronqué lorsqu'il déborde de la zone de l'élément. + _Valeur_: **`visible`**|`hidden|scroll`|`auto`|`inherit`; _Animation_: **Oui** +- {{SVGAttr('pointer-events')}} + - : Définit si et quand un élément peut être la cible d'un événement de la souris. + _Valeur_: `bounding-box`|**`visiblePainted`**|`visibleFil`|`visibleStroke`|`visible` |`painted`|`fill`|`stroke`|`all`|`none`; _Animation_: **Oui** +- {{SVGAttr('shape-rendering')}} + - : Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des éléments {{SVGElement('path')}} et des formes. + _Valeur_: **`auto`**|`optimizeSpeed`|`crispEdges`|`geometricPrecision` |`inherit`; _Animation_: **Oui** +- {{SVGAttr('solid-color')}} + - : - + _Valeur_:; _Animation_: **-** +- {{SVGAttr('solid-opacity')}} + - : - + _Valeur_:; _Animation_: **-** +- {{SVGAttr('stop-color')}} + - : Indique la couleur à utiliser sur un {{SVGElement('stop')}} d'un dégradé. + _Valeur_: `currentColor`|[\<color>](/fr/SVG/Content_type#Color "en/SVG/Content_type#Color")|[\<icccolor>](/fr/SVG/Content_type#ICCColor "en/SVG/Content_type#ICCColor")|`inherit`; _Animation_: **Oui** +- {{SVGAttr('stop-opacity')}} + - : Indique l'opacité du {{SVGElement('stop')}}. + _Valeur_: [\<opacity-value>](/fr/SVG/Content_type#Opacity_value "en/SVG/Content_type#Opacity_value")|`inherit`; _Animation_: **Oui** +- {{SVGAttr('stroke')}} + - : Définit la couleur à utiliser pour le contour de l'élément. + _Valeur_: [\<paint>](/docs/Web/SVG/Content_type#Paint); _Animation_: **Oui** +- {{SVGAttr('stroke-dasharray')}} + - : Définit le motif des pointillés utilisé pour dessiner le contour de la forme. + _Valeur_: `none`|`<dasharray>`; _Animation_: **Oui** +- {{SVGAttr('stroke-dashoffset')}} + - : Décale la position de départ des pointillés. + _Valeur_: [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage")|[\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length"); _Animation_: **Oui** +- **{{SVGAttr('stroke-linecap')}}** + - : Définit la forme de la fin des lignes. + _Valeur_: **`butt`**|`round`|`square`; _Animation_: **Oui** +- **{{SVGAttr('stroke-linejoin')}}** + - : Définit la manière de dessiner la liaison entre deux segments de ligne. + _Valeur_: `arcs`|`bevel`|**`miter`**|`miter-clip`|`round`; _Animation_: **Oui** +- **{{SVGAttr('stroke-miterlimit')}}** + - : Définit la limite du rapport entre la longueur du coin et la valeur de {{SVGAttr('stroke-width')}} utilisée pour dessiner la liaison entre deux segments de ligne. + _Valeur_: [\<number>](/fr/SVG/Content_type#Number "en/SVG/Content_type#Number"); _Animation_: **Oui** +- **{{SVGAttr('stroke-opacity')}}** + - : Définit l'opacité du contour d'une forme. + _Valeur_: [\<opacity-value>](/fr/SVG/Content_type#Opacity_value "en/SVG/Content_type#Opacity_value")|[\<percentage>](/docs/Web/SVG/Content_type#Paint); _Animation_: **Oui** +- **{{SVGAttr('stroke-width')}}** + - : Définit l'épaisseur du contour appliqué à une forme. + _Valeur_: [\<length>](/docs/Web/SVG/Content_type#Length)|[\<percentage>](/docs/Web/SVG/Content_type#Percentage); _Animation_: **Oui** +- **{{SVGAttr('text-anchor')}}** + - : Définit l'alignement vertical d'une chaîne de texte. + _Valeur_: `start`|`middle`|`end`|**`inherit`**; _Animation_: **Oui** +- **{{SVGAttr('text-decoration')}}** + - : Définit l'apparence des lignes décoratives sur le texte. + _Valeur_: `none`|`underline`|`overline`|`line-through`|`blink`|**`inherit`**; _Animation_: **Oui** +- **{{SVGAttr('text-rendering')}}** + - : Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu du texte. + _Valeur_: **`auto`**|`optimizeSpeed`|`optimizeLegibility`|`geometricPrecision`|`inherit`; _Animation_: **Oui** +- **{{SVGAttr('transform')}}** + - : Définit une liste de transformations à appliquer à un élément et à ses enfants. + _Valeur_: [\<transform-list>](/docs/Web/SVG/Content_type#Transform-list); _Animation_: **Oui** +- **{{SVGAttr('unicode-bidi')}}** + - : - + _Valeur_:; _Animation_: **-** +- **{{SVGAttr('vector-effect')}}** + - : Spécifie l'effet vectoriel à utiliser lors du dessin d'un objet. + _Valeur_: `default`|`non-scaling-stroke`|`inherit`|`<uri>`; _Animation_: **Oui** +- **{{SVGAttr('visibility')}}** + - : Définit la visibilité d'éléments graphiques. + _Valeur_: **`visible`**|`hidden`|`collapse`|`inherit`; _Animation_: **Oui** +- **{{SVGAttr('word-spacing')}}** + - : Définit la longueur des espaces entre les mots d'un texte. + _Valeur_: [\<length>](/fr/SVG/Content_type#Length "https://developer.mozilla.org/en/SVG/Content_type#Length")|**`inherit`**; _Animation_: **Oui** +- **{{SVGAttr('writing-mode')}}** + - : Spécifie si la direction d'un élément {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas. + _Valeur_: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`; _Animation_: **Oui** -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation")}}</p> +{{Compat("svg.attributes.presentation")}} diff --git a/files/fr/web/svg/attribute/preserveaspectratio/index.md b/files/fr/web/svg/attribute/preserveaspectratio/index.md index 894241bcf5..c2cb1e250c 100644 --- a/files/fr/web/svg/attribute/preserveaspectratio/index.md +++ b/files/fr/web/svg/attribute/preserveaspectratio/index.md @@ -6,131 +6,132 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/preserveAspectRatio --- -<div>{{SVGRef}}</div> - -<p>L'attibut <strong><code>preserveAspectRatio</code></strong> indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur de la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> est différent du ratio de la zone d'affichage (définit par les attributs <code>width</code> et <code>height</code>).</p> - -<p>Parce que les proportions du SVG sont définies par l'attribut <code>viewBox</code>, si ce dernier n'est pas défini alors l'attribut <code>preserveAspectRatio</code> n'a aucun effet (<em>à l'exception près de l'élément <a href="/fr/docs/Web/SVG/Element/image"><code><image></code></a> comme décrit ci-dessous</em>).</p> - -<h2 id="example">Exemple</h2> - -<pre class="brush: html"><svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> - <defs> - <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /> - </defs> - - <!-- (largeur>hauteur) meet --> - <rect x="0" y="0" width="20" height="10"> - <title>xMidYMid meet</title> - </rect> - <svg viewBox="0 0 100 100" width="20" height="10" - preserveAspectRatio="xMidYMid meet" x="0" y="0"> - <use href="#smiley" /> - </svg> - - <rect x="25" y="0" width="20" height="10"> - <title>xMinYMid meet</title> - </rect> - <svg viewBox="0 0 100 100" width="20" height="10" - preserveAspectRatio="xMinYMid meet" x="25" y="0"> - <use href="#smiley" /> - </svg> - - <rect x="50" y="0" width="20" height="10"> - <title>xMaxYMid meet</title> - </rect> - <svg viewBox="0 0 100 100" width="20" height="10" - preserveAspectRatio="xMaxYMid meet" x="50" y="0"> - <use href="#smiley" /> - </svg> - - <!-- (largeur>hauteur) slice --> - <rect x="0" y="15" width="20" height="10"> - <title>xMidYMin slice</title> - </rect> - <svg viewBox="0 0 100 100" width="20" height="10" - preserveAspectRatio="xMidYMin slice" x="0" y="15"> - <use href="#smiley" /> - </svg> - - <rect x="25" y="15" width="20" height="10"> - <title>xMidYMid slice</title> - </rect> - <svg viewBox="0 0 100 100" width="20" height="10" - preserveAspectRatio="xMidYMid slice" x="25" y="15"> - <use href="#smiley" /> - </svg> - - <rect x="50" y="15" width="20" height="10"> - <title>xMidYMax slice</title> - </rect> - <svg viewBox="0 0 100 100" width="20" height="10" - preserveAspectRatio="xMidYMax slice" x="50" y="15"> - <use href="#smiley" /> - </svg> - - <!-- (largeur<hauteur) meet --> - <rect x="75" y="0" width="10" height="25"> - <title>xMidYMin meet</title> - </rect> - <svg viewBox="0 0 100 100" width="10" height="25" - preserveAspectRatio="xMidYMin meet" x="75" y="0"> - <use href="#smiley" /> - </svg> - - <rect x="90" y="0" width="10" height="25"> - <title>xMidYMid meet</title> - </rect> - <svg viewBox="0 0 100 100" width="10" height="25" - preserveAspectRatio="xMidYMid meet" x="90" y="0"> - <use href="#smiley" /> - </svg> - - <rect x="105" y="0" width="10" height="25"> - <title>xMidYMax meet</title> - </rect> - <svg viewBox="0 0 100 100" width="10" height="25" - preserveAspectRatio="xMidYMax meet" x="105" y="0"> - <use href="#smiley" /> - </svg> - - <!-- (largeur<hauteur) slice --> - <rect x="120" y="0" width="10" height="25"> - <title>xMinYMid slice</title> - </rect> - <svg viewBox="0 0 100 100" width="10" height="25" - preserveAspectRatio="xMinYMid slice" x="120" y="0"> - <use href="#smiley" /> - </svg> - - <rect x="135" y="0" width="10" height="25"> - <title>xMidYMid slice</title> - </rect> - <svg viewBox="0 0 100 100" width="10" height="25" - preserveAspectRatio="xMidYMid slice" x="135" y="0"> - <use href="#smiley" /> - </svg> - - <rect x="150" y="0" width="10" height="25"> - <title>xMaxYMid slice</title> - </rect> - <svg viewBox="0 0 100 100" width="10" height="25" - preserveAspectRatio="xMaxYMid slice" x="150" y="0"> - <use href="#smiley" /> - </svg> - - <!-- none --> - <rect x="0" y="30" width="160" height="60"> - <title>none</title> - </rect> - <svg viewBox="0 0 100 100" width="160" height="60" - preserveAspectRatio="none" x="0" y="30"> - <use href="#smiley" /> - </svg> -</svg></pre> - - -<pre class="brush: css hidden"> +{{SVGRef}} + +L'attibut **`preserveAspectRatio`** indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur de la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est différent du ratio de la zone d'affichage (définit par les attributs `width` et `height`). + +Parce que les proportions du SVG sont définies par l'attribut `viewBox`, si ce dernier n'est pas défini alors l'attribut `preserveAspectRatio` n'a aucun effet (_à l'exception près de l'élément [`<image>`](/fr/docs/Web/SVG/Element/image) comme décrit ci-dessous_). + +## Exemple + +```html +<svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> + <defs> + <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /> + </defs> + + <!-- (largeur>hauteur) meet --> + <rect x="0" y="0" width="20" height="10"> + <title>xMidYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMid meet" x="0" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="25" y="0" width="20" height="10"> + <title>xMinYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMinYMid meet" x="25" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="50" y="0" width="20" height="10"> + <title>xMaxYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMaxYMid meet" x="50" y="0"> + <use href="#smiley" /> + </svg> + + <!-- (largeur>hauteur) slice --> + <rect x="0" y="15" width="20" height="10"> + <title>xMidYMin slice</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMin slice" x="0" y="15"> + <use href="#smiley" /> + </svg> + + <rect x="25" y="15" width="20" height="10"> + <title>xMidYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMid slice" x="25" y="15"> + <use href="#smiley" /> + </svg> + + <rect x="50" y="15" width="20" height="10"> + <title>xMidYMax slice</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMax slice" x="50" y="15"> + <use href="#smiley" /> + </svg> + + <!-- (largeur<hauteur) meet --> + <rect x="75" y="0" width="10" height="25"> + <title>xMidYMin meet</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMin meet" x="75" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="90" y="0" width="10" height="25"> + <title>xMidYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMid meet" x="90" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="105" y="0" width="10" height="25"> + <title>xMidYMax meet</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMax meet" x="105" y="0"> + <use href="#smiley" /> + </svg> + + <!-- (largeur<hauteur) slice --> + <rect x="120" y="0" width="10" height="25"> + <title>xMinYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMinYMid slice" x="120" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="135" y="0" width="10" height="25"> + <title>xMidYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMid slice" x="135" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="150" y="0" width="10" height="25"> + <title>xMaxYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMaxYMid slice" x="150" y="0"> + <use href="#smiley" /> + </svg> + + <!-- none --> + <rect x="0" y="30" width="160" height="60"> + <title>none</title> + </rect> + <svg viewBox="0 0 100 100" width="160" height="60" + preserveAspectRatio="none" x="0" y="30"> + <use href="#smiley" /> + </svg> +</svg> +``` + +```css hidden html,body,svg { height:100% } path { @@ -144,248 +145,226 @@ path { rect:hover, rect:active { outline: 1px solid red; -}</pre> - -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> - -<h2 id="syntax">Syntaxe</h2> - -<pre class="syntaxbox">preserveAspectRatio="<align> [<meetOrSlice>]"</pre> - -<p>La valeur de l'attribut est constituée d'un ou deux mots clés : l'alignement et l'option "meet ou slice" (satisfaire ou trancher) comme décrit ci-dessous:</p> - -<dl> - <dt>Alignement</dt> - <dd>L'alignement indique s'il faut forcer une mise à l'échelle uniforme et si oui, comment faire dans le cas où le rapport largeur:hauteur de la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> ne correspond pas à celui affiché. Les différentes valeurs possibles sont: - <ul> - <li><strong>none</strong><br> - Ne pas forcer la mise à l'échelle uniforme. Étirer le contenu de manière à ce que le contenu remplisse toute la hauteur et toute la largeur affichée. <em>Notez que si </em><code><align></code><em> vaut </em><code>none</code><em>, alors la valeur </em><code><meetOrSlice></code><em> est ignorée</em>.</li> - <li><strong>xMinYMin</strong> - Force la mise à l'échelle uniforme.<br> - Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br> - Aligne le côté haut de l'élément en haut de la zone d'affichage.</li> - <li><strong>xMidYMin</strong> - Force la mise à l'échelle uniforme.<br> - Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br> - Aligne le côté haut de l'élément en haut de la zone d'affichage.</li> - <li><strong>xMaxYMin</strong> - Force la mise à l'échelle uniforme.<br> - Aligne le côté droit de l'élément à droite de la zone d'affichage.<br> - Aligne le côté haut de l'élément en haut de la zone d'affichage.</li> - <li><strong>xMinYMid</strong> - Force la mise à l'échelle uniforme.<br> - Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br> - Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li> - <li><strong>xMidYMid</strong> (<em>par défaut</em>) - Force la mise à l'échelle uniforme.<br> - Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br> - Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li> - <li><strong>xMaxYMid</strong> - Force la mise à l'échelle uniforme.<br> - Aligne le côté droit de l'élément à droite de la zone d'affichage.<br> - Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li> - <li><strong>xMinYMax</strong> - Force la mise à l'échelle uniforme.<br> - Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br> - Aligne le côté bas de l'élément en bas de la zone d'affichage.</li> - <li><strong>xMidYMax</strong> - Force la mise à l'échelle uniforme.<br> - Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br> - Aligne le côté bas de l'élément en bas de la zone d'affichage.</li> - <li><strong>xMaxYMax</strong> - Force la mise à l'échelle uniforme.<br> - Aligne le côté droit de l'élément à droite de la zone d'affichage.<br> - Aligne le côté bas de l'élément en bas de la zone d'affichage.</li> - </ul> - </dd> - <dt>Meet ou slice</dt> - <dd>La valeur <em>meet</em> ou <em>slice</em> est optionnelle. Les deux valeurs possibles sont: - <ul> - <li><strong>meet</strong> (<em>par défaut</em>) - Mettre à l'échelle l'image tel que: - <ul> - <li>les proportions sont préservées</li> - <li>la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> est entièrement visible dans la zone d'affichage</li> - <li>la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> est agrandie autant que possible, tout en respectant les autres critères</li> - </ul> - Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la zone d'affichage sera agrandie au-delà de la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> (la zone dans laquelle sera dessinée la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> sera plus petite que la zone d'affichage).</li> - <li><strong>slice</strong> - Mettre à l'échelle l'image tel que: - <ul> - <li>les proportions sont préservées</li> - <li>la zone d'affichage est entièrement remplie par la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a></li> - <li>la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> est réduite autant que possible, tout en respectant les autres critères</li> - </ul> - Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée la <a href="/fr/docs/Web/SVG/Attribute/viewBox"><code>viewBox</code></a> sera plus grande que la zone d'affichage).</li> - </ul> - </dd> -</dl> - -<h2 id="elements">Éléments</h2> - -<p>Sept éléments utilisent cet attribut: <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, <a href="/fr/docs/Web/SVG/Element/symbol"><code><symbol></code></a>, <a href="/fr/docs/Web/SVG/Element/image"><code><image></code></a>, <a href="/fr/docs/Web/SVG/Element/feImage"><code><feImage></code></a>, <a href="/fr/docs/Web/SVG/Element/marker"><code><marker></code></a>, <a href="/fr/docs/Web/SVG/Element/pattern"><code><pattern></code></a>, and <a href="/fr/docs/Web/SVG/Element/view"><code><view></code></a>.</p> - -<h3 id="feImage">feImage</h3> - -<p>Pour <a href="/fr/docs/Web/SVG/Element/feImage"><code><feImage></code></a>, <code>preserveAspectRatio</code> définit comment l'image doit être ajustée dans le rectangle défini par l'élément <code><feImage></code>.</p> +} +``` -<table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><align> <meetOrSlice>?</strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>xMidYMid</code> <code>meet</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> -</table> +{{EmbedLiveSample('topExample', '100%', 200)}} + +## Syntaxe + + preserveAspectRatio="<align> [<meetOrSlice>]" + +La valeur de l'attribut est constituée d'un ou deux mots clés : l'alignement et l'option "meet ou slice" (satisfaire ou trancher) comme décrit ci-dessous: + +- Alignement + + - : L'alignement indique s'il faut forcer une mise à l'échelle uniforme et si oui, comment faire dans le cas où le rapport largeur:hauteur de la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) ne correspond pas à celui affiché. Les différentes valeurs possibles sont: + + - **none** + Ne pas forcer la mise à l'échelle uniforme. Étirer le contenu de manière à ce que le contenu remplisse toute la hauteur et toute la largeur affichée. _Notez que si_ `<align>` _vaut_ `none`_, alors la valeur_ `<meetOrSlice>` _est ignorée_. + - **xMinYMin** - Force la mise à l'échelle uniforme. + Aligne le côté gauche de l'élément à gauche de la zone d'affichage. + Aligne le côté haut de l'élément en haut de la zone d'affichage. + - **xMidYMin** - Force la mise à l'échelle uniforme. + Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage. + Aligne le côté haut de l'élément en haut de la zone d'affichage. + - **xMaxYMin** - Force la mise à l'échelle uniforme. + Aligne le côté droit de l'élément à droite de la zone d'affichage. + Aligne le côté haut de l'élément en haut de la zone d'affichage. + - **xMinYMid** - Force la mise à l'échelle uniforme. + Aligne le côté gauche de l'élément à gauche de la zone d'affichage. + Aligne verticalement le centre de l'élément au milieu de la zone d'affichage. + - **xMidYMid** (_par défaut_) - Force la mise à l'échelle uniforme. + Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage. + Aligne verticalement le centre de l'élément au milieu de la zone d'affichage. + - **xMaxYMid** - Force la mise à l'échelle uniforme. + Aligne le côté droit de l'élément à droite de la zone d'affichage. + Aligne verticalement le centre de l'élément au milieu de la zone d'affichage. + - **xMinYMax** - Force la mise à l'échelle uniforme. + Aligne le côté gauche de l'élément à gauche de la zone d'affichage. + Aligne le côté bas de l'élément en bas de la zone d'affichage. + - **xMidYMax** - Force la mise à l'échelle uniforme. + Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage. + Aligne le côté bas de l'élément en bas de la zone d'affichage. + - **xMaxYMax** - Force la mise à l'échelle uniforme. + Aligne le côté droit de l'élément à droite de la zone d'affichage. + Aligne le côté bas de l'élément en bas de la zone d'affichage. + +- Meet ou slice + + - : La valeur _meet_ ou _slice_ est optionnelle. Les deux valeurs possibles sont: -<h3 id="image">image</h3> + - **meet** (_par défaut_) - Mettre à l'échelle l'image tel que: -<p>Pour <a href="/fr/docs/Web/SVG/Element/feImage"><code><feImage></code></a>, <code>preserveAspectRatio</code> définit comment l'image doit être ajustée dans le rectangle défini par l'élément <code><image></code>.</p> + - les proportions sont préservées + - la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est entièrement visible dans la zone d'affichage + - la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est agrandie autant que possible, tout en respectant les autres critères + + Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la zone d'affichage sera agrandie au-delà de la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) (la zone dans laquelle sera dessinée la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) sera plus petite que la zone d'affichage). + + - **slice** - Mettre à l'échelle l'image tel que: + + - les proportions sont préservées + - la zone d'affichage est entièrement remplie par la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) + - la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est réduite autant que possible, tout en respectant les autres critères + + Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée la [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) sera plus grande que la zone d'affichage). + +## Éléments + +Sept éléments utilisent cet attribut: [`<svg>`](/fr/docs/Web/SVG/Element/svg), [`<symbol>`](/fr/docs/Web/SVG/Element/symbol), [`<image>`](/fr/docs/Web/SVG/Element/image), [`<feImage>`](/fr/docs/Web/SVG/Element/feImage), [`<marker>`](/fr/docs/Web/SVG/Element/marker), [`<pattern>`](/fr/docs/Web/SVG/Element/pattern), and [`<view>`](/fr/docs/Web/SVG/Element/view). + +### feImage + +Pour [`<feImage>`](/fr/docs/Web/SVG/Element/feImage), `preserveAspectRatio` définit comment l'image doit être ajustée dans le rectangle défini par l'élément `<feImage>`. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><align> <meetOrSlice>?</strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>xMidYMid</code> <code>meet</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="marker">marker</h3> +### image -<p>Pour <a href="/fr/docs/Web/SVG/Element/marker"><code><marker></code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p> +Pour [`<feImage>`](/fr/docs/Web/SVG/Element/feImage), `preserveAspectRatio` définit comment l'image doit être ajustée dans le rectangle défini par l'élément `<image>`. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><align> <meetOrSlice>?</strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>xMidYMid</code> <code>meet</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="pattern">pattern</h3> +### marker -<p>Pour <a href="/fr/docs/Web/SVG/Element/pattern"><code><pattern></code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p> +Pour [`<marker>`](/fr/docs/Web/SVG/Element/marker), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><align> <meetOrSlice>?</strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>xMidYMid</code> <code>meet</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="svg">svg</h3> +### pattern -<p>Pour <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p> +Pour [`<pattern>`](/fr/docs/Web/SVG/Element/pattern), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><align> <meetOrSlice>?</strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>xMidYMid</code> <code>meet</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="symbol">symbol</h3> +### svg -<p>Pour <a href="/fr/docs/Web/SVG/Element/symbol"><code><symbol></code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p> +Pour [`<svg>`](/fr/docs/Web/SVG/Element/svg), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><align> <meetOrSlice>?</strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>xMidYMid</code> <code>meet</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="view">view</h3> +### symbol -<p>Pour <a href="/fr/docs/Web/SVG/Element/view"><code><view></code></a>, <code>preserveAspectRatio</code> indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage.</p> +Pour [`<symbol>`](/fr/docs/Web/SVG/Element/symbol), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><align> <meetOrSlice>?</strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>xMidYMid</code> <code>meet</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="Spécification">Spécification</h2> +### view + +Pour [`<view>`](/fr/docs/Web/SVG/Element/view), `preserveAspectRatio` indique si une mise à l'échelle uniforme doit être effectuée pour s'adapter à la zone d'affichage. <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", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}</td> - <td>{{Spec2('Filters 1.0')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}} | {{Spec2('Filters 1.0')}} | | +| {{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}} | {{Spec2("SVG2")}} | | +| {{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}} | {{Spec2("SVG1.1")}} | Définition initiale | diff --git a/files/fr/web/svg/attribute/seed/index.md b/files/fr/web/svg/attribute/seed/index.md index 23d668208f..52b679461c 100644 --- a/files/fr/web/svg/attribute/seed/index.md +++ b/files/fr/web/svg/attribute/seed/index.md @@ -6,39 +6,49 @@ tags: - Filtre translation_of: Web/SVG/Attribute/seed --- -<p>« <a href="/fr/docs/Web/SVG/Attribute" title="en/SVG/Attribute">Page de référence des attributs SVG</a></p> +« [Page de référence des attributs SVG](/fr/docs/Web/SVG/Attribute "en/SVG/Attribute") -<p>L'attribut <code>seed</code> représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}.</p> +L'attribut `seed` représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}. -<p>Si l'attribut n'est pas spécifié, alors le palier sera fixé à <strong>0</strong>.</p> +Si l'attribut n'est pas spécifié, alors le palier sera fixé à **0**. -<h2 id="Contexte_d'usage">Contexte d'usage</h2> +## Contexte d'usage <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td><em>Aucun</em></td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td><a href="/fr/docs/SVG/Content_type#Number" title="/en-US/docs/SVG/Content_type#Number"><number></a></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Document normatif</th> - <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute" rel="external">SVG 1.1 (2nd Edition)</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td><em>Aucun</em></td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td> + <a + href="/fr/docs/SVG/Content_type#Number" + title="/en-US/docs/SVG/Content_type#Number" + ><number></a + > + </td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Document normatif</th> + <td> + <a + href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute" + rel="external" + >SVG 1.1 (2nd Edition)</a + > + </td> + </tr> + </tbody> </table> -<h2 id="Éléments">Éléments</h2> +## Éléments -<p>Les éléments suivants peuvent être utilisés avec l'attribut <code>seed </code> :</p> +Les éléments suivants peuvent être utilisés avec l'attribut `seed ` : -<ul> - <li>{{ SVGElement("feTurbulence") }}</li> -</ul> +- {{ SVGElement("feTurbulence") }} diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.md b/files/fr/web/svg/attribute/stroke-dasharray/index.md index c9cf9f4f60..b14d42ec70 100644 --- a/files/fr/web/svg/attribute/stroke-dasharray/index.md +++ b/files/fr/web/svg/attribute/stroke-dasharray/index.md @@ -6,82 +6,68 @@ tags: - SVG translation_of: Web/SVG/Attribute/stroke-dasharray --- -<p>L'attribut <code>stroke-dasharray</code> contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. </p> +L'attribut `stroke-dasharray` contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. -<div class="note"> - <p><strong>Note:</strong> Comme il s'agit d'un attribut de présentation, <code>stroke-dasharray </code>peut aussi être utilisé directement dans une feuille de style CSS.</p> -</div> +> **Note :** Comme il s'agit d'un attribut de présentation, `stroke-dasharray `peut aussi être utilisé directement dans une feuille de style CSS. -<p>Les éléments suivants peuvent utiliser l'attribut <code>stroke-dasharray</code>: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> +Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} -<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 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg"> +```html +<svg viewBox="0 0 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg"> - <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> - <line stroke-dasharray="4" x1="0" y1="3" x2="30" y2="3" stroke="black" /> - <line stroke-dasharray="4, 1" x1="0" y1="5" x2="30" y2="5" stroke="black" /> - <line stroke-dasharray="4, 1, 2" x1="0" y1="7" x2="30" y2="7" stroke="black" /> - <line stroke-dasharray="4, 1, 2, 3" x1="0" y1="9" x2="30" y2="9" stroke="black" /> -</svg> -</pre> + <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> + <line stroke-dasharray="4" x1="0" y1="3" x2="30" y2="3" stroke="black" /> + <line stroke-dasharray="4, 1" x1="0" y1="5" x2="30" y2="5" stroke="black" /> + <line stroke-dasharray="4, 1, 2" x1="0" y1="7" x2="30" y2="7" stroke="black" /> + <line stroke-dasharray="4, 1, 2, 3" x1="0" y1="9" x2="30" y2="9" stroke="black" /> +</svg> +``` -<p>{{ EmbedLiveSample('Exemple', '220', '150', '', 'Web/SVG/Attribute/stroke-dasharray') }}</p> +{{ EmbedLiveSample('Exemple', '220', '150', '', 'Web/SVG/Attribute/stroke-dasharray') }} -<h2 id="Contexte_d'usage">Contexte d'usage</h2> +## Contexte d'usage <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Attribut de présentation</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td>none | <dasharray> | inherit</td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Document normatif</th> - <td><a href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>Attribut de présentation</td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td>none | <dasharray> | inherit</td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Document normatif</th> + <td> + <a href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty" + >SVG 1.1 (2nd Edition)</a + > + </td> + </tr> + </tbody> </table> -<dl> - <dt><dasharray></dt> - <dd>Il s'agit d'une liste de mesures <a href="/fr/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a> et <a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, <strong>5,3,2</strong> sera rendu comme <strong>5,3,2,5,3,2</strong>.</dd> -</dl> +- \<dasharray> + - : Il s'agit d'une liste de mesures [\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length") et [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, **5,3,2** sera rendu comme **5,3,2,5,3,2**. -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.stroke-dasharray")}}</p> +{{Compat("svg.attributes.presentation.stroke-dasharray")}} -<h2 id="Spécification">Spécification</h2> +## Spécification -<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", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et textes</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et textes</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | --------------------------------------------- | +| {{SpecName("SVG2", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}} | {{Spec2("SVG2")}} | Définition pour les formes et textes | +| {{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et textes | diff --git a/files/fr/web/svg/attribute/stroke-dashoffset/index.md b/files/fr/web/svg/attribute/stroke-dashoffset/index.md index 071512cffe..9a1a8fbd70 100644 --- a/files/fr/web/svg/attribute/stroke-dashoffset/index.md +++ b/files/fr/web/svg/attribute/stroke-dashoffset/index.md @@ -6,109 +6,108 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-dashoffset --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>stroke-dashoffset</code></strong> décale la position de départ des pointillés sur les lignes SVG.</p> +L'attribut **`stroke-dashoffset`** décale la position de départ des pointillés sur les lignes SVG. -<div class="note"> - <p><strong>Note :</strong> <code>stroke-dashoffset</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `stroke-dashoffset` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} -<h2>Exemple</h2> +## Exemple -<pre class="brush: css hidden">html,body,svg { height:100% }</pre> +```css hidden +html,body,svg { height:100% } +``` +```html +<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> + <!-- Pas de tiret --> + <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> -<pre class="brush: html"><svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> - <!-- Pas de tiret --> - <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> + <!-- Pas de décalage --> + <line x1="0" y1="3" x2="30" y2="3" stroke="black" + stroke-dasharray="3 1" /> - <!-- Pas de décalage --> - <line x1="0" y1="3" x2="30" y2="3" stroke="black" - stroke-dasharray="3 1" /> - - <!-- + <!-- Le début des tirets est décalé de 3 unités vers la gauche - --> - <line x1="0" y1="5" x2="30" y2="5" stroke="black" + --> + <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" - stroke-dashoffset="3" /> + stroke-dashoffset="3" /> - <!-- + <!-- Le début des tirets est décalé de 3 unités vers la droite (-3) - --> - <line x1="0" y1="7" x2="30" y2="7" stroke="black" + --> + <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" - stroke-dashoffset="-3" /> + stroke-dashoffset="-3" /> - <!-- + <!-- Le début des tirets est décalé de 1 unité vers la gauche ce qui affiche la même chose que l'exemple précédent - --> - <line x1="0" y1="9" x2="30" y2="9" stroke="black" + --> + <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" - stroke-dashoffset="1" /> + stroke-dashoffset="1" /> - <!-- + <!-- Lignes rouges pour indiquer la position de départ des tirets - --> - <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> -</svg> -</pre> + --> + <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="Notes_d'usage">Notes d'usage</h2> +## Notes d'usage <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a></strong> | <strong><a href="/fr/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>0</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a + href="/fr/SVG/Content_type#Percentage" + title="en/SVG/Content_type#Percentage" + ><percentage></a + ></strong + > + | + <strong + ><a + href="/fr/SVG/Content_type#Length" + title="en/SVG/Content_type#Length" + ><length></a + ></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<p>Le décalage est généralement exprimé en unités résolues par {{SVGAttr('pathLength')}} mais si un <a href="/fr/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> est utilisé, alors la valeur est résolue en pourcentage du viewport.</p> +Le décalage est généralement exprimé en unités résolues par {{SVGAttr('pathLength')}} mais si un [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") est utilisé, alors la valeur est résolue en pourcentage du viewport. -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.stroke-dashoffset")}}</p> +{{Compat("svg.attributes.presentation.stroke-dashoffset")}} -<h2 id="Spécification">Spécification</h2> +## Spécification -<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", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et le texte</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et le texte</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- | +| {{SpecName("SVG2", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte | +| {{SpecName("SVG1.1", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte | diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.md b/files/fr/web/svg/attribute/stroke-linecap/index.md index d8b46b8472..e44e7ffd19 100644 --- a/files/fr/web/svg/attribute/stroke-linecap/index.md +++ b/files/fr/web/svg/attribute/stroke-linecap/index.md @@ -6,182 +6,175 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-linecap --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>stroke-linecap</code></strong> définit la forme de la fin des lignes SVG.</p> +L'attribut **`stroke-linecap`** définit la forme de la fin des lignes SVG. -<div class="note"> - <p><strong>Note :</strong> <code>stroke-linecap</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `stroke-linecap` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<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 6 6" xmlns="http://www.w3.org/2000/svg"> +```html +<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "butt" (valeur par défaut) --> - <line x1="1" y1="1" x2="5" y2="1" stroke="black" - stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" (valeur par défaut) --> + <line x1="1" y1="1" x2="5" y2="1" stroke="black" + stroke-linecap="butt" /> - <!-- Effet de la valeur "round" --> - <line x1="1" y1="3" x2="5" y2="3" stroke="black" - stroke-linecap="round" /> + <!-- Effet de la valeur "round" --> + <line x1="1" y1="3" x2="5" y2="3" stroke="black" + stroke-linecap="round" /> - <!-- Effet de la valeur "square" --> - <line x1="1" y1="5" x2="5" y2="5" stroke="black" - stroke-linecap="square" /> + <!-- Effet de la valeur "square" --> + <line x1="1" y1="5" x2="5" y2="5" stroke="black" + stroke-linecap="square" /> - <!-- + <!-- Les lignes roses indiquent la position du chemin pour chaque trait - --> - <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /> -</svg> -</pre> + --> + <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="Notes_d'usage">Notes d'usage</h2> +## Notes d'usage <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>butt</code> | <code>round</code> | <code>square</code></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>butt</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td><code>butt</code> | <code>round</code> | <code>square</code></td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>butt</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="butt">butt</h3> +### butt -<p>La valeur <code>butt</code> indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout.</p> +La valeur `butt` indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout. -<h4 id="Exemple">Exemple</h4> +#### 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 6 4" xmlns="http://www.w3.org/2000/svg"> +```html +<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "butt" --> - <path d="M1,1 h4" stroke="black" - stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="butt" /> - <!-- Effet de la valeur "butt" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" - stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="butt" /> - <!-- + <!-- Lignes roses pour indiquer la position du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> - <circle cx="1" cy="1" r="0.05" fill="pink" /> - <circle cx="5" cy="1" r="0.05" fill="pink" /> - <circle cx="3" cy="3" r="0.05" fill="pink" /> -</svg> -</pre> + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + <circle cx="1" cy="1" r="0.05" fill="pink" /> + <circle cx="5" cy="1" r="0.05" fill="pink" /> + <circle cx="3" cy="3" r="0.05" fill="pink" /> +</svg> +``` -<p>{{EmbedLiveSample('butt', '100%', 200)}}</p> +{{EmbedLiveSample('butt', '100%', 200)}} -<h3 id="round">round</h3> +### round -<p>La valeur <code>round</code> indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamètre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché.</p> +La valeur `round` indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamètre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché. -<h4 id="Exemple_2">Exemple</h4> +#### 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 6 4" xmlns="http://www.w3.org/2000/svg"> +```html +<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "round" --> - <path d="M1,1 h4" stroke="black" - stroke-linecap="round" /> + <!-- Effet de la valeur "round" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="round" /> - <!-- Effet de la valeur "round" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" - stroke-linecap="round" /> + <!-- Effet de la valeur "round" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="round" /> - <!-- + <!-- Lignes roses pour indiquer la position du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> - <circle cx="1" cy="1" r="0.05" fill="pink" /> - <circle cx="5" cy="1" r="0.05" fill="pink" /> - <circle cx="3" cy="3" r="0.05" fill="pink" /> -</svg> -</pre> + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + <circle cx="1" cy="1" r="0.05" fill="pink" /> + <circle cx="5" cy="1" r="0.05" fill="pink" /> + <circle cx="3" cy="3" r="0.05" fill="pink" /> +</svg> +``` -<p>{{EmbedLiveSample('round', '100%', 200)}}</p> +{{EmbedLiveSample('round', '100%', 200)}} -<h3 id="square">square</h3> +### square -<p>La valeur <code>square</code> indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin.</p> +La valeur `square` indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin. -<h4 id="Exemple_3">Exemple</h4> +#### 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 6 4" xmlns="http://www.w3.org/2000/svg"> +```html +<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "square" --> - <path d="M1,1 h4" stroke="black" - stroke-linecap="square" /> + <!-- Effet de la valeur "square" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="square" /> - <!-- Effet de la valeur "square" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" - stroke-linecap="square" /> + <!-- Effet de la valeur "square" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="square" /> - <!-- + <!-- Les lignes roses indiquent la position du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> - <circle cx="1" cy="1" r="0.05" fill="pink" /> - <circle cx="5" cy="1" r="0.05" fill="pink" /> - <circle cx="3" cy="3" r="0.05" fill="pink" /> -</svg> -</pre> + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + <circle cx="1" cy="1" r="0.05" fill="pink" /> + <circle cx="5" cy="1" r="0.05" fill="pink" /> + <circle cx="3" cy="3" r="0.05" fill="pink" /> +</svg> +``` -<p>{{EmbedLiveSample('square', '100%', 200)}}</p> +{{EmbedLiveSample('square', '100%', 200)}} -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</p> +{{Compat("svg.attributes.presentation.stroke-linecap")}} -<h2 id="Spécification">Spécification</h2> +## Spécification -<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", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et le texte</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et le texte</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- | +| {{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte | +| {{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte | diff --git a/files/fr/web/svg/attribute/stroke-linejoin/index.md b/files/fr/web/svg/attribute/stroke-linejoin/index.md index 019611c57d..e22eaaea9e 100644 --- a/files/fr/web/svg/attribute/stroke-linejoin/index.md +++ b/files/fr/web/svg/attribute/stroke-linejoin/index.md @@ -6,301 +6,302 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-linejoin --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>stroke-linejoin</code></strong> définit la manière de dessiner la liaison entre deux segments de ligne.</p> +L'attribut **`stroke-linejoin`** définit la manière de dessiner la liaison entre deux segments de ligne. -<div class="note"> - <p><strong>Note :</strong> <code>stroke-linejoin</code> étant un attribut de présentation, il peut être utililsé comme propriété CSS.</p> -</div> +> **Note :** `stroke-linejoin` étant un attribut de présentation, il peut être utililsé comme propriété CSS. -<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<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 18 12" xmlns="http://www.w3.org/2000/svg"> - <!-- +```html +<svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> + <!-- Chemin en haut à gauche: Effet de la valeur "miter" - --> - <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="miter" /> + --> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter" /> - <!-- + <!-- Chemin en haut au milieu: Effet de la valeur "round" - --> - <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="round" /> + --> + <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="round" /> - <!-- + <!-- Chemin en haut à droite: Effet de la valeur "bevel" - --> - <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="bevel" /> + --> + <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="bevel" /> - <!-- + <!-- Chemin en bas à gauche: Effet de la valeur "miter-clip" se replit sur la valeur par défaut (miter) si non pris en charge - --> - <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="miter-clip" /> + --> + <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> - <!-- + <!-- Chemin en bas à droite: Effet de la valeur "arcs" se replit sur la valeur par défaut (miter) si non pris en charge - --> - <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="arcs" /> + --> + <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="arcs" /> - <!-- + <!-- Lignes roses qui indiquent la position du chemin pour chaque trait - --> - <g id="highlight"> - <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" - stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="1" cy="5" r="0.05" fill="pink" /> - <circle cx="3" cy="2" r="0.05" fill="pink" /> - <circle cx="5" cy="5.5" r="0.05" fill="pink" /> - </g> - <use xlink:href="#highlight" x="6" /> - <use xlink:href="#highlight" x="12" /> - <use xlink:href="#highlight" x="2" y="6" /> - <use xlink:href="#highlight" x="8" y="6" /> -</svg> -</pre> - -<p>{{EmbedLiveSample('exemple', '100%', 400)}}</p> - -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> + --> + <g id="highlight"> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5.5" r="0.05" fill="pink" /> + </g> + <use xlink:href="#highlight" x="6" /> + <use xlink:href="#highlight" x="12" /> + <use xlink:href="#highlight" x="2" y="6" /> + <use xlink:href="#highlight" x="8" y="6" /> +</svg> +``` + +{{EmbedLiveSample('exemple', '100%', 400)}} + +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>arcs</code> | <code>bevel</code> |<code>miter</code> | <code>miter-clip</code> | <code>round</code></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>miter</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <code>arcs</code> | <code>bevel</code> |<code>miter</code> | + <code>miter-clip</code> | <code>round</code> + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>miter</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h3 id="arcs">arcs</h3> +### arcs -<div class="note"> - <p><strong>Note :</strong> La valeur <code>arcs</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</p> -</div> +> **Note :** La valeur `arcs` a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails. -<p>La valeur <code>arcs</code> indique qu'un arc est utilisé pour joindre les segments du chemin. L'arc est formé en prolongeant les bords extérieurs du trait au point de liaison, avec la même courbe que ce bord.</p> +La valeur `arcs` indique qu'un arc est utilisé pour joindre les segments du chemin. L'arc est formé en prolongeant les bords extérieurs du trait au point de liaison, avec la même courbe que ce bord. -<h4 id="Exemple">Exemple</h4> +#### 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 6 6" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "arcs" --> - <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" - stroke-linejoin="arcs" /> +```html +<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + <!-- Effet de la valeur "arcs" --> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" + stroke-linejoin="arcs" /> - <!-- + <!-- Lignes roses qui indiquent la position du chemin pour chaque trait - --> - <g id="p"> - <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" - stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="1" cy="5" r="0.05" fill="pink" /> - <circle cx="3" cy="2" r="0.05" fill="pink" /> - <circle cx="5" cy="5" r="0.05" fill="pink" /> - </g> -</svg></pre> + --> + <g id="p"> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + </g> +</svg> +``` -<p>{{EmbedLiveSample('arcs', '100%', 200)}}</p> +{{EmbedLiveSample('arcs', '100%', 200)}} -<h3 id="bevel">bevel</h3> +### bevel -<p>La valeur <code>bevel</code> indique qu'un coin biseauté est utilisé pour joindre les segments du chemin.</p> +La valeur `bevel` indique qu'un coin biseauté est utilisé pour joindre les segments du chemin. -<h4 id="Exemple_2">Exemple</h4> +#### 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 6 6" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "bevel" --> - <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" - stroke-linejoin="bevel" /> +```html +<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + <!-- Effet de la valeur "bevel" --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="bevel" /> - <!-- + <!-- Lignes roses qui indiquent la position du chemin pour chaque trait - --> - <g id="p"> - <path d="M1,5 l2,-3 l2,3" - stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="1" cy="5" r="0.05" fill="pink" /> - <circle cx="3" cy="2" r="0.05" fill="pink" /> - <circle cx="5" cy="5" r="0.05" fill="pink" /> - </g> -</svg></pre> + --> + <g id="p"> + <path d="M1,5 l2,-3 l2,3" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + </g> +</svg> +``` -<p>{{EmbedLiveSample('bevel', '100%', 200)}}</p> +{{EmbedLiveSample('bevel', '100%', 200)}} -<h3 id="miter">miter</h3> +### miter -<p>La valeur <code>miter</code> indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.</p> +La valeur `miter` indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent. -<div class="note"> - <p><strong>Note :</strong> Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type <code>bevel</code> est utilisé à la place.</p> -</div> +> **Note :** Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type `bevel` est utilisé à la place. -<h4 id="Exemple_3">Exemple</h4> +#### 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 -1 10 7" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "miter" --> - <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" - stroke-linejoin="miter" /> +```html +<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> + <!-- Effet de la valeur "miter" --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="miter" /> - <!-- Effet de la valeur "miter" sur un angle aigu - où la limite stroke-miterlimit est dépassée --> - <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none" - stroke-linejoin="miter" /> + <!-- Effet de la valeur "miter" sur un angle aigu + où la limite stroke-miterlimit est dépassée --> + <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none" + stroke-linejoin="miter" /> - <!-- Ligne rouge pointillé qui indique la limite - à partir de laquelle une liaison miter devient bevel --> - <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> + <!-- Ligne rouge pointillé qui indique la limite + à partir de laquelle une liaison miter devient bevel --> + <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> - <!-- + <!-- Lignes roses qui indiquent la position du chemin pour chaque trait - --> - <g> - <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="1" cy="5" r="0.05" fill="pink" /> - <circle cx="3" cy="2" r="0.05" fill="pink" /> - <circle cx="5" cy="5" r="0.05" fill="pink" /> + --> + <g> + <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> - <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="7" cy="5" r="0.05" fill="pink" /> - <circle cx="7.75" cy="2" r="0.05" fill="pink" /> - <circle cx="8.5" cy="5" r="0.05" fill="pink" /> - </g> -</svg></pre> + <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="7" cy="5" r="0.05" fill="pink" /> + <circle cx="7.75" cy="2" r="0.05" fill="pink" /> + <circle cx="8.5" cy="5" r="0.05" fill="pink" /> + </g> +</svg> +``` -<p>{{EmbedLiveSample('miter', '100%', 200)}}</p> +{{EmbedLiveSample('miter', '100%', 200)}} -<h3 id="miter-clip">miter-clip</h3> +### miter-clip -<div class="note"> - <p><strong>Note :</strong> La valeur <code>miter-clip</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</p> -</div> +> **Note :** La valeur `miter-clip` a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails. -<p>La valeur <code>miter-clip</code> indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.</p> +La valeur `miter-clip` indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent. -<p>Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, le coin tronqué à une distance égale à la moitié de la valeur de {{SVGAttr('stroke-miterlimit')}} multiplié par l'épaisseur du trait. Cela fournit un meilleur rendu que <code>miter</code> sur les angles très aigus et dans le cas d'une animation.</p> +Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, le coin tronqué à une distance égale à la moitié de la valeur de {{SVGAttr('stroke-miterlimit')}} multiplié par l'épaisseur du trait. Cela fournit un meilleur rendu que `miter` sur les angles très aigus et dans le cas d'une animation. -<h4 id="Exemple_4">Exemple</h4> +#### 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 -1 10 7" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "miter-clip" --> - <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" - stroke-linejoin="miter-clip" /> +```html +<svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> + <!-- Effet de la valeur "miter-clip" --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> - <!-- Effet de la valeur "miter-clip" sur un angle aigu - où la limite stroke-miterlimit est dépassée --> - <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none" - stroke-linejoin="miter-clip" /> + <!-- Effet de la valeur "miter-clip" sur un angle aigu + où la limite stroke-miterlimit est dépassée --> + <path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> - <!-- Ligne rouge pointillé qui indique la limite - à partir de laquelle le coin sera tronqué --> - <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> + <!-- Ligne rouge pointillé qui indique la limite + à partir de laquelle le coin sera tronqué --> + <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> - <!-- + <!-- Lignes roses qui indiquent la position du chemin pour chaque trait - --> - <g> - <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="1" cy="5" r="0.05" fill="pink" /> - <circle cx="3" cy="2" r="0.05" fill="pink" /> - <circle cx="5" cy="5" r="0.05" fill="pink" /> + --> + <g> + <path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> - <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="7" cy="5" r="0.05" fill="pink" /> - <circle cx="7.75" cy="2" r="0.05" fill="pink" /> - <circle cx="8.5" cy="5" r="0.05" fill="pink" /> - </g> -</svg></pre> + <path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="7" cy="5" r="0.05" fill="pink" /> + <circle cx="7.75" cy="2" r="0.05" fill="pink" /> + <circle cx="8.5" cy="5" r="0.05" fill="pink" /> + </g> +</svg> +``` -<p>{{EmbedLiveSample('miter-clip', '100%', 200)}}</p> +{{EmbedLiveSample('miter-clip', '100%', 200)}} -<h3 id="round">round</h3> +### round -<p>La valeur <code>round</code> indique qu'un coin arrondi est utilisé pour joindre les segments du chemin.</p> +La valeur `round` indique qu'un coin arrondi est utilisé pour joindre les segments du chemin. -<h4 id="Exemple_5">Exemple</h4> +#### 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 6 6" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "round" --> - <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" - stroke-linejoin="round" /> +```html +<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> + <!-- Effet de la valeur "round" --> + <path d="M1,5 l2,-3 l2,3" stroke="black" fill="none" + stroke-linejoin="round" /> - <!-- + <!-- Lignes roses qui indiquent la position du chemin pour chaque trait - --> - <g id="p"> - <path d="M1,5 l2,-3 l2,3" - stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="1" cy="5" r="0.05" fill="pink" /> - <circle cx="3" cy="2" r="0.05" fill="pink" /> - <circle cx="5" cy="5" r="0.05" fill="pink" /> - </g> -</svg></pre> + --> + <g id="p"> + <path d="M1,5 l2,-3 l2,3" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5" r="0.05" fill="pink" /> + </g> +</svg> +``` -<p>{{EmbedLiveSample('round', '100%', 200)}}</p> +{{EmbedLiveSample('round', '100%', 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("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et le texte</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et le texte</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------ | ----------------------------------------------- | +| {{SpecName("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte | +| {{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.stroke-linejoin")}}</p> +{{Compat("svg.attributes.presentation.stroke-linejoin")}} diff --git a/files/fr/web/svg/attribute/stroke-miterlimit/index.md b/files/fr/web/svg/attribute/stroke-miterlimit/index.md index f1dfd341e8..4b9a02bb5d 100644 --- a/files/fr/web/svg/attribute/stroke-miterlimit/index.md +++ b/files/fr/web/svg/attribute/stroke-miterlimit/index.md @@ -6,109 +6,102 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-miterlimit --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>stroke-miterlimit</code></strong> définit la limite du rapport entre la longueur du coin et la valeur de {{ SVGAttr("stroke-width") }} utilisée pour dessiner la <a href="/fr/docs/Web/SVG/Attribute/stroke-linejoin">liaison entre deux segments de ligne</a>. Quand la limite est dépassée, la liaison passe du type <em>miter</em> (pointu) au type <em>bevel</em> (biseauté).</p> +L'attribut **`stroke-miterlimit`** définit la limite du rapport entre la longueur du coin et la valeur de {{ SVGAttr("stroke-width") }} utilisée pour dessiner la [liaison entre deux segments de ligne](/fr/docs/Web/SVG/Attribute/stroke-linejoin). Quand la limite est dépassée, la liaison passe du type _miter_ (pointu) au type _bevel_ (biseauté). -<div class="note"> - <p><strong>Note:</strong> L'attribut <code>stroke-miterlimit</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** L'attribut `stroke-miterlimit` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<p>Cet attribut peut être appliqué à n'importe quel élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué à n'importe quel élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} -<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 38 30" xmlns="http://www.w3.org/2000/svg"> - <!-- Impact du miterlimit par défaut --> - <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" +```html +<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> + <!-- Impact du miterlimit par défaut --> + <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="M1,9 l7 ,-3 l7 ,3 m2,0 l3.5 ,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.75,-3 l0.75,3 - m2,0 l0.5 ,-3 l0.5 ,3" /> + m2,0 l0.5 ,-3 l0.5 ,3" /> - <!-- Impact du miterlimit le plus petit (1) --> - <path stroke="black" fill="none" stroke-linejoin="miter" + <!-- Impact du miterlimit le plus petit (1) --> + <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" d="M1,19 l7 ,-3 l7 ,3 m2, 0 l3.5 ,-3 l3.5 ,3 m2, 0 l2 ,-3 l2 ,3 m2, 0 l0.75,-3 l0.75,3 - m2, 0 l0.5 ,-3 l0.5 ,3" /> + m2, 0 l0.5 ,-3 l0.5 ,3" /> - <!-- Impact d'un large miterlimit (8) --> - <path stroke="black" fill="none" stroke-linejoin="miter" + <!-- Impact d'un large miterlimit (8) --> + <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3" d="M1,29 l7 ,-3 l7 ,3 m2, 0 l3.5 ,-3 l3.5 ,3 m2, 0 l2 ,-3 l2 ,3 m2, 0 l0.75,-3 l0.75,3 - m2, 0 l0.5 ,-3 l0.5 ,3" /> + m2, 0 l0.5 ,-3 l0.5 ,3" /> - <!-- Les lignes roses suivantes indiquent la position du chemin pour chaque trait --> - <path stroke="pink" fill="none" stroke-width="0.05" + <!-- Les lignes roses suivantes indiquent la position du chemin pour chaque trait --> + <path stroke="pink" fill="none" stroke-width="0.05" d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3 - M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /> -</svg></pre> + M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 400)}}</p> +{{EmbedLiveSample('exemple', '100%', 400)}} -<p>Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par {{ SVGAttr("stroke-linejoin") }} vaut <code>miter</code>, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio <code>stroke-miterlimit</code> est utilisé pour définir une limite à partir de laquelle la liaison est convertie de <em>miter</em> à <em>bevel</em>.</p> +Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par {{ SVGAttr("stroke-linejoin") }} vaut `miter`, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio `stroke-miterlimit` est utilisé pour définir une limite à partir de laquelle la liaison est convertie de _miter_ à _bevel_. -<p>Le rapport entre la longueur du coin (distance entre le côté intérieur et le côté externe du coin) et {{ SVGAttr("stroke-width") }} est directement lié à l'angle (θ) entre les segments, tel que décrit par cette formule:</p> +Le rapport entre la longueur du coin (distance entre le côté intérieur et le côté externe du coin) et {{ SVGAttr("stroke-width") }} est directement lié à l'angle (θ) entre les segments, tel que décrit par cette formule: -<p><math> <mstyle displaystyle="true"> <mi><code>stroke-miterlimit</code></mi> <mo>=</mo> <mfrac> <mrow> <mi>miterLength</mi> </mrow> <mrow> <mi><code>stroke-width</code></mi> </mrow> </mfrac> <mo>=</mo> <mfrac> <mrow> <mn>1</mn> </mrow> <mrow> <mrow> <mi>sin</mi> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>θ</mo> </mrow> <mrow> <mn>2</mn> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mrow> </mfrac> </mstyle> </math></p> +<math><mstyle displaystyle="true"><mi><code>stroke-miterlimit</code></mi> <mo>=</mo> <mfrac><mrow><mi>miterLength</mi> </mrow><mrow><mi><code>stroke-width</code></mi> </mrow></mfrac><mo>=</mo> <mfrac><mrow><mn>1</mn> </mrow><mrow><mrow><mi>sin</mi> <mrow><mo>(</mo> <mfrac><mrow><mo>θ</mo> </mrow><mrow><mn>2</mn> </mrow></mfrac><mo>)</mo></mrow></mrow></mrow></mfrac></mstyle></math> -<p>Par exemple, une limite de 1.414 convertit une liaison <em>miter</em> en <em>bevel</em> pour les angles de moins de 90 degrés, une limite de 4.0 pour les angles de moins de 29 degrés, et une limite de 10.0 pour les angles de moins de 11.5 degrés environ.</p> +Par exemple, une limite de 1.414 convertit une liaison _miter_ en _bevel_ pour les angles de moins de 90 degrés, une limite de 4.0 pour les angles de moins de 29 degrés, et une limite de 10.0 pour les angles de moins de 11.5 degrés environ. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/fr/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td>4</td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a + href="/fr/SVG/Content_type#Number" + title="en/SVG/Content_type#Number" + ><number></a + ></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td>4</td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<p>La valeur de <code>stroke-miterlimit</code> doit être supérieure ou égale à 1.</p> +La valeur de `stroke-miterlimit` doit être supérieure ou égale à 1. -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.stroke-miterlimit")}}</p> +{{Compat("svg.attributes.presentation.stroke-miterlimit")}} -<h2 id="Spécification">Spécification</h2> +## Spécification -<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", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et le texte</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et le texte</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- | +| {{SpecName("SVG2", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte | +| {{SpecName("SVG1.1", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte | diff --git a/files/fr/web/svg/attribute/stroke-opacity/index.md b/files/fr/web/svg/attribute/stroke-opacity/index.md index c1ba3c17f0..8acc8053df 100644 --- a/files/fr/web/svg/attribute/stroke-opacity/index.md +++ b/files/fr/web/svg/attribute/stroke-opacity/index.md @@ -6,88 +6,78 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-opacity --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>stroke-opacity</code></strong> définit l'opacité du contour (<em>couleur</em>, <em>dégradé</em>, <em>motif</em>, etc) appliqué à une forme SVG.</p> +L'attribut **`stroke-opacity`** définit l'opacité du contour (_couleur_, _dégradé_, _motif_, etc) appliqué à une forme SVG. -<div class="note"> - <p><strong>Note :</strong> <code>stroke-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `stroke-opacity` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<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 40 10" xmlns="http://www.w3.org/2000/svg"> - <!-- Opacité par défaut: 1 --> - <circle cx="5" cy="5" r="4" stroke="green" /> +```html +<svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> + <!-- Opacité par défaut: 1 --> + <circle cx="5" cy="5" r="4" stroke="green" /> - <!-- Définit l'opacité avec un nombre entre 0 et 1--> - <circle cx="15" cy="5" r="4" stroke="green" - stroke-opacity="0.7" /> + <!-- Définit l'opacité avec un nombre entre 0 et 1--> + <circle cx="15" cy="5" r="4" stroke="green" + stroke-opacity="0.7" /> - <!-- Définit l'opacité avec un pourcentage --> - <circle cx="25" cy="5" r="4" stroke="green" - stroke-opacity="50%" /> + <!-- Définit l'opacité avec un pourcentage --> + <circle cx="25" cy="5" r="4" stroke="green" + stroke-opacity="50%" /> - <!-- Définit l'opacité comme propriété CSS --> - <circle cx="35" cy="5" r="4" stroke="green" - style="stroke-opacity: .3;" /> -</svg></pre> + <!-- Définit l'opacité comme propriété CSS --> + <circle cx="35" cy="5" r="4" stroke="green" + style="stroke-opacity: .3;" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> +{{EmbedLiveSample('exemple', '100%', 150)}} -<h2 id="Notes_d'usage">Notes d'usage</h2> +## Notes d'usage <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code>[0-1]</code> | <strong><a href="/docs/Web/SVG/Content_type#Paint"><percentage></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>1</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <code>[0-1]</code> | + <strong + ><a href="/docs/Web/SVG/Content_type#Paint" + ><percentage></a + ></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>1</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-opacity</code>, Cependant, ce n'est pas souvent pris en charge. pour le moment (<em>voir {{anch("Compatibilité des navigateurs")}} ci-dessous</em>), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p> -</div> +> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-opacity`, Cependant, ce n'est pas souvent pris en charge. pour le moment (_voir {{anch("Compatibilité des navigateurs")}} ci-dessous_), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle `[0-1]`. -<p>Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut {{SVGAttr('opacity')}} ou placer le contour derrière le remplissage avec {{SVGAttr('paint-order')}}.</p> +Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut {{SVGAttr('opacity')}} ou placer le contour derrière le remplissage avec {{SVGAttr('paint-order')}}. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.stroke-opacity")}}</p> +{{Compat("svg.attributes.presentation.stroke-opacity")}} -<h2 id="Spécification">Spécification</h2> +## Spécification -<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", "painting.html#StrokeOpacityProperty", "stroke-opacity")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et le texte</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#StrokeOpacityProperty", "stroke-opacity")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et le texte</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------------------------------- | +| {{SpecName("SVG2", "painting.html#StrokeOpacityProperty", "stroke-opacity")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte | +| {{SpecName("SVG1.1", "painting.html#StrokeOpacityProperty", "stroke-opacity")}} | {{Spec2("SVG1.1")}} | Définition initiale pour les formes et le texte | diff --git a/files/fr/web/svg/attribute/stroke-width/index.md b/files/fr/web/svg/attribute/stroke-width/index.md index db0bb6754d..66dcae8d4a 100644 --- a/files/fr/web/svg/attribute/stroke-width/index.md +++ b/files/fr/web/svg/attribute/stroke-width/index.md @@ -6,88 +6,97 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-width --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>stroke-width</code></strong> définit l'épaisseur du contour à appliquer à une forme SVG.</p> +L'attribut **`stroke-width`** définit l'épaisseur du contour à appliquer à une forme SVG. -<div class="note"> - <p><strong>Note :</strong> <code>stroke-width</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `stroke-width` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}} -<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 30 10" xmlns="http://www.w3.org/2000/svg"> - <!-- Épaisseur par défaut: 1 --> - <circle cx="5" cy="5" r="3" stroke="green" /> +```html +<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> + <!-- Épaisseur par défaut: 1 --> + <circle cx="5" cy="5" r="3" stroke="green" /> - <!-- Définit l'épaisseur avec un nombre --> - <circle cx="15" cy="5" r="3" stroke="green" - stroke-width="3" /> + <!-- Définit l'épaisseur avec un nombre --> + <circle cx="15" cy="5" r="3" stroke="green" + stroke-width="3" /> - <!-- Définit l'épaisseur avec un pourcentage --> - <circle cx="25" cy="5" r="3" stroke="green" - stroke-width="2%" /> -</svg></pre> + <!-- Définit l'épaisseur avec un pourcentage --> + <circle cx="25" cy="5" r="3" stroke="green" + stroke-width="2%" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> +{{EmbedLiveSample('exemple', '100%', 150)}} -<h2 id="Notes_d'usage">Notes d'usage</h2> +## Notes d'usage <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>1px</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong + > | + <strong + ><a href="/docs/Web/SVG/Content_type#Percentage" + ><percentage></a + ></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>1px</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<div class="note"> - <p><strong>Note :</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-width</code>, Cependant, ce n'est pas souvent pris en charge pour le moment (<em>voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p> -</div> +> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-width`, Cependant, ce n'est pas souvent pris en charge pour le moment (_voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. -<p>Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée.</p> +Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.stroke-width")}}</p> +{{Compat("svg.attributes.presentation.stroke-width")}} -<h2 id="Spécification">Spécification</h2> +## Spécification <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", "painting.html#StrokeWidthProperty", "stroke-width")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td> - <p>Définition pour les formes et le texte</p> - - - </td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#StrokeWidthProperty", "stroke-width")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale pour les formes et le texte</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("SVG2", "painting.html#StrokeWidthProperty", "stroke-width")}} + </td> + <td>{{Spec2("SVG2")}}</td> + <td><p>Définition pour les formes et le texte</p></td> + </tr> + <tr> + <td> + {{SpecName("SVG1.1", "painting.html#StrokeWidthProperty", "stroke-width")}} + </td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Définition initiale pour les formes et le texte</td> + </tr> + </tbody> </table> diff --git a/files/fr/web/svg/attribute/stroke/index.md b/files/fr/web/svg/attribute/stroke/index.md index 01e3b44595..15d964e62f 100644 --- a/files/fr/web/svg/attribute/stroke/index.md +++ b/files/fr/web/svg/attribute/stroke/index.md @@ -6,88 +6,73 @@ tags: - SVG translation_of: Web/SVG/Attribute/stroke --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>stroke</code></strong> définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG.</p> +L'attribut **`stroke`** définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG. -<div class="note"> - <p><strong>Note :</strong> <code>stroke</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> -</div> +> **Note :** `stroke` étant un attribut de présentation, il peut être utilisé comme propriété CSS. -<p>Cet attribut peut être appliqué à tout élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> +Cet attribut peut être appliqué à tout élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} -<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 20 10" xmlns="http://www.w3.org/2000/svg"> +```html +<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> - <!-- Simple trait de couleur --> - <circle cx="5" cy="5" r="4" fill="none" - stroke="green" /> + <!-- Simple trait de couleur --> + <circle cx="5" cy="5" r="4" fill="none" + stroke="green" /> - <!-- Utiliser un degradé comme contour --> - <defs> - <linearGradient id="myGradient"> - <stop offset="0%" stop-color="green" /> - <stop offset="100%" stop-color="white" /> - </linearGradient> - </defs> - <circle cx="15" cy="5" r="4" fill="none" - stroke="url(#myGradient)" /> -</svg> -</pre> + <!-- Utiliser un degradé comme contour --> + <defs> + <linearGradient id="myGradient"> + <stop offset="0%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </linearGradient> + </defs> + <circle cx="15" cy="5" r="4" fill="none" + stroke="url(#myGradient)" /> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<h2 id="Notes_d'usage">Notes d'usage</h2> +## Notes d'usage <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>none</code></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <strong + ><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Oui</td> + </tr> + </tbody> </table> -<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", "painting.html#StrokeProperty", "stroke")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td>Définition pour les formes et le texte.<br> - Ajoute <code>context-fill</code> et <code>context-stroke</code>.</td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définiton initiale pour les formes et le texte</td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------ | ---------------------------------------------------------------------------------- | +| {{SpecName("SVG2", "painting.html#StrokeProperty", "stroke")}} | {{Spec2("SVG2")}} | Définition pour les formes et le texte. Ajoute `context-fill` et `context-stroke`. | +| {{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}} | {{Spec2("SVG1.1")}} | Définiton initiale pour les formes et le texte | -<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("svg.attributes.presentation.stroke")}}</p> +{{Compat("svg.attributes.presentation.stroke")}} -<div class="note"> - <p><strong>Note :</strong> Pour plus d'informations sur les valeurs de <code>context-stroke</code> (et <code>context-fill</code>) à partir de documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}.</p> -</div> +> **Note :** Pour plus d'informations sur les valeurs de `context-stroke` (et `context-fill`) à partir de documents HTML, voir la documentation pour la propriété non-standard {{cssxref("-moz-context-properties")}}. diff --git a/files/fr/web/svg/attribute/style/index.md b/files/fr/web/svg/attribute/style/index.md index 658ac2d4a0..13203fec87 100644 --- a/files/fr/web/svg/attribute/style/index.md +++ b/files/fr/web/svg/attribute/style/index.md @@ -7,78 +7,76 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/style --- -<p>{{SVGRef}}</p> +{{SVGRef}} -<p>L'attribut <strong><code>style</code></strong> définit les <a href="/fr/docs/Web/CSS">informations de style</a> pour son élément. Il fonctionne de manière identique à <a href="/fr/docs/Web/HTML/Attributs_universels/style">l'attribut <code>style</code> en HTML</a>.</p> +L'attribut **`style`** définit les [informations de style](/fr/docs/Web/CSS) pour son élément. Il fonctionne de manière identique à [l'attribut `style` en HTML](/fr/docs/Web/HTML/Attributs_universels/style). -<h2 id="Context_d'utilisation">Context d'utilisation</h2> +## Context d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Attribut de présentation</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td><style></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Document normatif</th> - <td><a href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2ème Edition)</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>Attribut de présentation</td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td><style></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Document normatif</th> + <td> + <a href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute" + >SVG 1.1 (2ème Edition)</a + > + </td> + </tr> + </tbody> </table> -<dl> - <dt><style></dt> - <dd><p>La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est <a href="/fr/docs/Web/CSS">CSS</a>.</p> - <div class="note"> - <p><strong>Note :</strong> En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme <a href="/fr/docs/Web/XSLT">XSL(T)</a>. Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas.</p> - </div> - </dd> -</dl> - -<h2 id="Exemple">Exemple</h2> - -<p>L'exemple suivant stylise le rectangle en utilisant l'attribut <code>style</code>, avec CSS comme langage de feuille de style.</p> - -<pre class="brush: html"><svg viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"> - <rect height="300" width="600" x="200" y="100" - style="fill: red; stroke: blue; stroke-width: 3"/> -</svg> -</pre> - -<h2 id="Éléments">Éléments</h2> - -<p>Les éléments suivants peuvent utiliser l'attribut <code>style</code>:</p> - -<ul> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_conteneurs">Éléments conteneur</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_primitives_de_filtre">Éléments primitives de filtre</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_dégradés">Éléments de dégradés</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_graphiques">Éléments graphiques</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_structurels">Éléments structurels</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel">Éléments de contenu textuel</a> »</li> - <li>{{ SVGElement("clipPath") }}</li> - <li>{{ SVGElement("filter") }}</li> - <li>{{ SVGElement("font") }}</li> - <li>{{ SVGElement("foreignObject") }}</li> - <li>{{ SVGElement("glyphRef") }}</li> - <li>{{ SVGElement("stop") }}</li> - <li>{{ SVGElement("glyph") }}</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ SVGElement("style") }}</li> -</ul> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.attributes.style.style")}}</p> +- \<style> + + - : La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est [CSS](/fr/docs/Web/CSS). + + > **Note :** En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme [XSL(T)](/fr/docs/Web/XSLT). Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas. + +## Exemple + +L'exemple suivant stylise le rectangle en utilisant l'attribut `style`, avec CSS comme langage de feuille de style. + +```html +<svg viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"> + <rect height="300" width="600" x="200" y="100" + style="fill: red; stroke: blue; stroke-width: 3"/> +</svg> +``` + +## Éléments + +Les éléments suivants peuvent utiliser l'attribut `style`: + +- [Éléments conteneur](/fr/docs/Web/SVG/Element#Éléments_conteneurs) » +- [Éléments primitives de filtre](/fr/docs/Web/SVG/Element#Éléments_primitives_de_filtre) » +- [Éléments de dégradés](/fr/docs/Web/SVG/Element#Éléments_de_dégradés) » +- [Éléments graphiques](/fr/docs/Web/SVG/Element#Éléments_graphiques) » +- [Éléments structurels](/fr/docs/Web/SVG/Element#Éléments_structurels) » +- [Éléments de contenu textuel](/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel) » +- {{ SVGElement("clipPath") }} +- {{ SVGElement("filter") }} +- {{ SVGElement("font") }} +- {{ SVGElement("foreignObject") }} +- {{ SVGElement("glyphRef") }} +- {{ SVGElement("stop") }} +- {{ SVGElement("glyph") }} + +## Voir aussi + +- {{ SVGElement("style") }} + +## Compatibilité des navigateurs + +{{Compat("svg.attributes.style.style")}} diff --git a/files/fr/web/svg/attribute/styling/index.md b/files/fr/web/svg/attribute/styling/index.md index 60021207eb..94590c126d 100644 --- a/files/fr/web/svg/attribute/styling/index.md +++ b/files/fr/web/svg/attribute/styling/index.md @@ -3,26 +3,21 @@ title: Attributs SVG de style slug: Web/SVG/Attribute/Styling translation_of: Web/SVG/Attribute/Styling --- -<p>Les <em>attributs SVG de style</em> sont tous les attributs qui peuvent être spécifiés sur tout élément SVG pour appliquer des styles CSS.</p> +Les _attributs SVG de style_ sont tous les attributs qui peuvent être spécifiés sur tout élément SVG pour appliquer des styles CSS. -<ul> - <li><code>class</code></li> - <li><code>style</code></li> -</ul> +- `class` +- `style` -<h2 id="Attributs">Attributs</h2> +## Attributs -<dl> - <dt>{{SVGAttr('class')}}</dt> - <dd>Assigne un nom de classe ou un ensemble de noms de classe à un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('class')}} en HTML.<br> - <small><em>Valeur</em>: Tout ID valide; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt>{{SVGAttr('style')}}</dt> - <dd>Spécifie les informations de style d'un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('style')}} en HTML.<br> - <small><em>Valeur</em>: Toute chaîne de caractères valide; <em>Animation</em>: <strong>Non</strong></small> - <p> </p> - </dd> -</dl> +- {{SVGAttr('class')}} + - : Assigne un nom de classe ou un ensemble de noms de classe à un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('class')}} en HTML. + _Valeur_: Tout ID valide; _Animation_: **Oui** +- {{SVGAttr('style')}} + - : Spécifie les informations de style d'un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('style')}} en HTML. + _Valeur_: Toute chaîne de caractères valide; _Animation_: **Non** -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> -<p>{{Compat("svg.attributes.style")}}</p> +## Compatibilité des navigateurs + +{{Compat("svg.attributes.style")}} diff --git a/files/fr/web/svg/attribute/text-anchor/index.md b/files/fr/web/svg/attribute/text-anchor/index.md index 449c87238f..f92806af36 100644 --- a/files/fr/web/svg/attribute/text-anchor/index.md +++ b/files/fr/web/svg/attribute/text-anchor/index.md @@ -7,57 +7,56 @@ tags: translation_of: Web/SVG/Attribute/text-anchor browser-compat: svg.attributes.presentation.text-anchor --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>text-anchor</code></strong> est utilisé pour aligner (alignement de début, de milieu ou de fin) une chaîne de texte préformaté ou un texte auto-enveloppé dont la zone d'enveloppement est déterminée à partir de la propriété <a href="/fr/docs/Web/SVG/Attribute/inline-size"><code>inline-size</code></a> par rapport à un point donné. Elle ne s'applique pas aux autres types de texte auto-enveloppé. Pour ces cas, vous devez utiliser <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>. Pour le texte à plusieurs lignes, l'alignement a lieu pour chaque ligne.</p> +L'attribut **`text-anchor`** est utilisé pour aligner (alignement de début, de milieu ou de fin) une chaîne de texte préformaté ou un texte auto-enveloppé dont la zone d'enveloppement est déterminée à partir de la propriété [`inline-size`](/fr/docs/Web/SVG/Attribute/inline-size) par rapport à un point donné. Elle ne s'applique pas aux autres types de texte auto-enveloppé. Pour ces cas, vous devez utiliser [`text-align`](/fr/docs/Web/CSS/text-align). Pour le texte à plusieurs lignes, l'alignement a lieu pour chaque ligne. -<p>L'attribut <code>text-anchor</code> est appliqué à chaque bloc de texte individuel dans un élément <a href="/fr/docs/Web/SVG/Element/text"><code><text></code></a> donné. Chaque fragment de texte a une position de texte actuelle initiale, qui représente le point du système de coordonnées de l'utilisateur résultant (selon le contexte) de l'application des attributs <a href="/fr/docs/Web/SVG/Attribute/x"><code>x</code></a> et <a href="/fr/docs/Web/SVG/Attribute/y"><code>y</code></a> sur l'élément <code><text></code>, toute valeur d'attribut <code>x</code> ou <code>y</code> sur un élément <a href="/fr/docs/Web/SVG/Element/tspan"><code><tspan></code></a>, <a href="/fr/docs/Web/SVG/Element/tref"><code><tref></code></a> ou <a href="/fr/docs/Web/SVG/Element/altGlyph"><code><altGlyph></code></a> assigné explicitement au premier caractère rendu dans un fragment de texte, ou la détermination de la position initiale du texte actuel pour un élément <a href="/fr/docs/Web/SVG/Element/textPath"><code><textPath></code></a>.</p> +L'attribut `text-anchor` est appliqué à chaque bloc de texte individuel dans un élément [`<text>`](/fr/docs/Web/SVG/Element/text) donné. Chaque fragment de texte a une position de texte actuelle initiale, qui représente le point du système de coordonnées de l'utilisateur résultant (selon le contexte) de l'application des attributs [`x`](/fr/docs/Web/SVG/Attribute/x) et [`y`](/fr/docs/Web/SVG/Attribute/y) sur l'élément `<text>`, toute valeur d'attribut `x` ou `y` sur un élément [`<tspan>`](/fr/docs/Web/SVG/Element/tspan), [`<tref>`](/fr/docs/Web/SVG/Element/tref) ou [`<altGlyph>`](/fr/docs/Web/SVG/Element/altGlyph) assigné explicitement au premier caractère rendu dans un fragment de texte, ou la détermination de la position initiale du texte actuel pour un élément [`<textPath>`](/fr/docs/Web/SVG/Element/textPath). -<div class="note"> - <p><strong>Note :</strong> En tant qu'attribut de présentation, <code>text-anchor</code> peut être utilisé comme une propriété CSS.</p> -</div> +> **Note :** En tant qu'attribut de présentation, `text-anchor` peut être utilisé comme une propriété CSS. -<p>Cet attribut peut être utilisé pour les éléments SVG suivants :</p> +Cet attribut peut être utilisé pour les éléments SVG suivants : -<ul> - <li><a href="/fr/docs/Web/SVG/Element/altGlyph"><code><altGlyph></code></a></li> - <li><a href="/fr/docs/Web/SVG/Element/text"><code><text></code></a></li> - <li><a href="/fr/docs/Web/SVG/Element/textPath"><code><textPath></code></a></li> - <li><a href="/fr/docs/Web/SVG/Element/tref"><code><tref></code></a></li> - <li><a href="/fr/docs/Web/SVG/Element/tspan"><code><tspan></code></a></li> -</ul> +- [`<altGlyph>`](/fr/docs/Web/SVG/Element/altGlyph) +- [`<text>`](/fr/docs/Web/SVG/Element/text) +- [`<textPath>`](/fr/docs/Web/SVG/Element/textPath) +- [`<tref>`](/fr/docs/Web/SVG/Element/tref) +- [`<tspan>`](/fr/docs/Web/SVG/Element/tspan) -<h2>Exemple</h2> +## Exemple -<pre class="brush: css hidden">html, body, svg { +```css hidden +html, body, svg { height: 100%; -}</pre> +} +``` +```html +<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <!-- Matérialisation des ancrages --> + <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" /> -<pre class="brush: html"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> - <!-- Matérialisation des ancrages --> - <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" /> + <!-- Ancres en action --> + <text text-anchor="start" x="60" y="40">A</text> + <text text-anchor="middle" x="60" y="75">A</text> + <text text-anchor="end" x="60" y="110">A</text> - <!-- Ancres en action --> - <text text-anchor="start" x="60" y="40">A</text> - <text text-anchor="middle" x="60" y="75">A</text> - <text text-anchor="end" x="60" y="110">A</text> + <!-- Matérialisation des ancrages --> + <circle cx="60" cy="40" r="3" fill="red" /> + <circle cx="60" cy="75" r="3" fill="red" /> + <circle cx="60" cy="110" r="3" fill="red" /> - <!-- Matérialisation des ancrages --> - <circle cx="60" cy="40" r="3" fill="red" /> - <circle cx="60" cy="75" r="3" fill="red" /> - <circle cx="60" cy="110" r="3" fill="red" /> - - <style><![CDATA[ + <style><![CDATA[ text { font: bold 36px Verdana, Helvetica, Arial, sans-serif; } - ]]></style> -</svg></pre> + ]]></style> +</svg> +``` -<p>{{EmbedLiveSample("exemple", "120", "120")}}</p> +{{EmbedLiveSample("exemple", "120", "120")}} -<h2 id="usage_notes">Notes d'utilisation</h2> +## Notes d'utilisation <table class="properties"> <tbody> @@ -76,19 +75,17 @@ browser-compat: svg.attributes.presentation.text-anchor </tbody> </table> -<dl> - <dt><code>start</code></dt> - <dd>Les caractères rendus sont alignés de telle sorte que le début de la chaîne de texte se trouve à la position initiale du texte courant. Pour un élément dont la valeur de propriété <a href="/fr/docs/Web/CSS/direction"><code>direction</code></a> est <code>ltr</code> (typique de la plupart des langues européennes), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la valeur de la propriété direction est <code>rtl</code> (typique de l'arabe et de l'hébreu), le côté droit du texte est rendu à la position initiale du texte. Pour un élément dont la direction du texte primaire est verticale (souvent typique des textes asiatiques), le côté supérieur du texte est rendu à la position initiale du texte.</dd> - <dt><code>middle</code></dt> - <dd>Les caractères rendus sont alignés de telle sorte que le milieu de la chaîne de texte se trouve à la position actuelle du texte. (Pour le texte sur un chemin, la chaîne de texte est d'abord disposée en ligne droite. Le point médian entre le début et la fin de la chaîne de texte est déterminé. Ensuite, la chaîne de texte est mappée sur le chemin avec ce point médian placé à la position actuelle du texte).</dd> - <dt><code>end</code></dt> - <dd>Les caractères rendus sont décalés de telle sorte que la fin du texte rendu résultant (position finale du texte actuel avant l'application de la propriété <code>text-anchor</code>) se trouve à la position initiale du texte actuel. Pour un élément avec une valeur de propriété <code>direction</code> égale à <code>ltr</code> (typique pour la plupart des langues européennes), le côté droit du texte est rendu à la position initiale du texte. Pour un élément avec une valeur de propriété <code>direction</code> égale à <code>rtl</code> (typique pour l'arabe et l'hébreu), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la direction primaire du texte est verticale (souvent typique des textes asiatiques), le bas du texte est rendu à la position initiale du texte.</dd> -</dl> +- `start` + - : Les caractères rendus sont alignés de telle sorte que le début de la chaîne de texte se trouve à la position initiale du texte courant. Pour un élément dont la valeur de propriété [`direction`](/fr/docs/Web/CSS/direction) est `ltr` (typique de la plupart des langues européennes), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la valeur de la propriété direction est `rtl` (typique de l'arabe et de l'hébreu), le côté droit du texte est rendu à la position initiale du texte. Pour un élément dont la direction du texte primaire est verticale (souvent typique des textes asiatiques), le côté supérieur du texte est rendu à la position initiale du texte. +- `middle` + - : Les caractères rendus sont alignés de telle sorte que le milieu de la chaîne de texte se trouve à la position actuelle du texte. (Pour le texte sur un chemin, la chaîne de texte est d'abord disposée en ligne droite. Le point médian entre le début et la fin de la chaîne de texte est déterminé. Ensuite, la chaîne de texte est mappée sur le chemin avec ce point médian placé à la position actuelle du texte). +- `end` + - : Les caractères rendus sont décalés de telle sorte que la fin du texte rendu résultant (position finale du texte actuel avant l'application de la propriété `text-anchor`) se trouve à la position initiale du texte actuel. Pour un élément avec une valeur de propriété `direction` égale à `ltr` (typique pour la plupart des langues européennes), le côté droit du texte est rendu à la position initiale du texte. Pour un élément avec une valeur de propriété `direction` égale à `rtl` (typique pour l'arabe et l'hébreu), le côté gauche du texte est rendu à la position initiale du texte. Pour un élément dont la direction primaire du texte est verticale (souvent typique des textes asiatiques), le bas du texte est rendu à la position initiale du texte. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} diff --git a/files/fr/web/svg/attribute/transform/index.md b/files/fr/web/svg/attribute/transform/index.md index 9ed4c9cc25..59a858b588 100644 --- a/files/fr/web/svg/attribute/transform/index.md +++ b/files/fr/web/svg/attribute/transform/index.md @@ -6,78 +6,87 @@ tags: - SVG translation_of: Web/SVG/Attribute/transform --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>transform</code></strong> définit une liste de définitions de transformation qui sont appliquées à l'élément ainsi qu'à ses éléments fils.</p> +L'attribut **`transform`** définit une liste de définitions de transformation qui sont appliquées à l'élément ainsi qu'à ses éléments fils. -<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="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <g fill="grey" +```html +<svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) - scale(1 0.5)"> - <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> - </g> + scale(1 0.5)"> + <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> + </g> - <use xlink:href="#heart" fill="none" stroke="red"/> -</svg> -</pre> + <use xlink:href="#heart" fill="none" stroke="red"/> +</svg> +``` -<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> +{{EmbedLiveSample('exemple', '100%', 200)}} -<div class="note"> - <p><strong>Note :</strong> Pour SVG2, <code>transform</code> est un attribut de présentation et peut donc être utilisé comme une propriété CSS. Attention toutefois aux différences de syntaxe entre la propriété CSS et cet attribut. Voir la documentation de la propriété {{cssxref('transform')}} pour la syntaxe .</p> -</div> +> **Note :** Pour SVG2, `transform` est un attribut de présentation et peut donc être utilisé comme une propriété CSS. Attention toutefois aux différences de syntaxe entre la propriété CSS et cet attribut. Voir la documentation de la propriété {{cssxref('transform')}} pour la syntaxe . -<p>En tant qu'attribut de présentation, <strong><code>transform</code></strong> peut être utilisé par n'importe quel élément (en SVG 1.1, seuls les 16 éléments suivants pouvaient l'utiliser : {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}} et {{SVGElement('use')}}).</p> +En tant qu'attribut de présentation, **`transform`** peut être utilisé par n'importe quel élément (en SVG 1.1, seuls les 16 éléments suivants pouvaient l'utiliser : {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}} et {{SVGElement('use')}}). -<p>Pour des raisons historiques liées à SVG 1.1, {{SVGElement('linearGradient')}} et {{SVGElement('radialGradient')}} prennent en charge l'attribut <code>gradientTransform</code> et {{SVGElement('pattern')}} permet d'utiliser <code>patternTransform</code>. Ces deux attributs sont exactement synonymes de l'attribut <code>transform</code>.</p> +Pour des raisons historiques liées à SVG 1.1, {{SVGElement('linearGradient')}} et {{SVGElement('radialGradient')}} prennent en charge l'attribut `gradientTransform` et {{SVGElement('pattern')}} permet d'utiliser `patternTransform`. Ces deux attributs sont exactement synonymes de l'attribut `transform`. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Valeur</th> - <td><code><strong><a href="/fr/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong></code></td> - </tr> - <tr> - <th scope="row">Valeur par défaut</th> - <td><code>none</code></td> - </tr> - <tr> - <th scope="row">Peut être animé</th> - <td>Oui</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Valeur</th> + <td> + <code + ><strong + ><a href="/fr/docs/Web/SVG/Content_type#Transform-list" + ><transform-list></a + ></strong + ></code + > + </td> + </tr> + <tr> + <th scope="row">Valeur par défaut</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Peut être animé</th> + <td>Oui</td> + </tr> + </tbody> </table> -<h2 id="Fonctions_de_transformation">Fonctions de transformation</h2> +## Fonctions de transformation -<p>Les fonctions de transformation suivantes peuvent être utilisées par l'attribut <code>transform</code>.</p> +Les fonctions de transformation suivantes peuvent être utilisées par l'attribut `transform`. -<div class="warning"> - <p><strong>Attention :</strong> Selon la spécification, on devrait également pouvoit utiliser les fonctions CSS {{cssxref('transform-function', 'transform functions')}} mais la compatibilité n'est pas assurée.</p> -</div> +> **Attention :** Selon la spécification, on devrait également pouvoit utiliser les fonctions CSS {{cssxref('transform-function', 'transform functions')}} mais la compatibilité n'est pas assurée. -<h3 id="matrix"><code>matrix()</code></h3> +### `matrix()` -<p>La fonction de transformation <code>matrix(<a> <b> <c> <d> <e> <f>)</code> permet d'appliquer une transformation géométrique décrite par 6 coefficients et <code>matrix(a,b,c,d,e,f)</code> sera équivalent à la matrice de transformation mathématique :<math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics></math>Le calcul des coordonnées s'obtient de la façon suivante :<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></p> +La fonction de transformation `matrix(<a> <b> <c> <d> <e> <f>)` permet d'appliquer une transformation géométrique décrite par 6 coefficients et `matrix(a,b,c,d,e,f)` sera équivalent à la matrice de transformation mathématique :<math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics></math>Le calcul des coordonnées s'obtient de la façon suivante :<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x*{\mathrm{newCoordSys}} \\ y*{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x*{\mathrm{prevCoordSys}} \\ y*{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x*{\mathrm{prevCoordSys}} + c y*{\mathrm{prevCoordSys}} + e \\ b x*{\mathrm{prevCoordSys}} + d y*{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix}</annotation></semantics></math> -<h4 id="Exemples">Exemples</h4> +#### Exemples -<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 200" xmlns="http://www.w3.org/2000/svg"> - <rect x="10" y="10" width="30" height="20" fill="green" /> +```html +<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <rect x="10" y="10" width="30" height="20" fill="green" /> - <!-- + <!-- Dans l'exemple suivant, on applique la matrice suivante: [a c e] [3 -1 30] - [b d f] => [1 3 40] + [b d f] => [1 3 40] [0 0 1] [0 0 1] qui transforme le rectangle de cette façon: @@ -97,158 +106,149 @@ translation_of: Web/SVG/Attribute/transform bottom right corner: oldX=40 oldY=30 newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120 newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170 - --> - <rect x="10" y="10" width="30" height="20" fill="red" - transform="matrix(3 1 -1 3 30 40)" /> -</svg></pre> + --> + <rect x="10" y="10" width="30" height="20" fill="red" + transform="matrix(3 1 -1 3 30 40)" /> +</svg> +``` -<p>{{EmbedLiveSample('matrix()', '100%', 200)}}</p> +{{EmbedLiveSample('matrix()', '100%', 200)}} -<h3 id="translate"><code>translate()</code></h3> +### `translate()` -<p>La fonction de transformation <code>translate(<x> [<y>])</code> permet de déplacer un objet de <code>x</code> sur l'axe horizontal et de <code>y</code> sur l'axe vertical (i.e. <code>x<sub>new</sub> = x<sub>old</sub> + <x>, y<sub>new</sub> = y<sub>old</sub> + <y></code>). Si <code>y</code> n'est pas fourni, la valeur par défaut est 0.</p> +La fonction de transformation `translate(<x> [<y>])` permet de déplacer un objet de `x` sur l'axe horizontal et de `y` sur l'axe vertical (i.e. `xnew = xold + <x>, ynew = yold + <y>`). Si `y` n'est pas fourni, la valeur par défaut est 0. -<h4 id="Exemples_2">Exemples</h4> +#### Exemples -<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"> - <!-- Pas de translation --> - <rect x="5" y="5" width="40" height="40" fill="green" /> +```html +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Pas de translation --> + <rect x="5" y="5" width="40" height="40" fill="green" /> - <!-- Translation horizontale --> - <rect x="5" y="5" width="40" height="40" fill="blue" - transform="translate(50)" /> + <!-- Translation horizontale --> + <rect x="5" y="5" width="40" height="40" fill="blue" + transform="translate(50)" /> - <!-- Translation verticale --> - <rect x="5" y="5" width="40" height="40" fill="red" - transform="translate(0 50)" /> + <!-- Translation verticale --> + <rect x="5" y="5" width="40" height="40" fill="red" + transform="translate(0 50)" /> - <!-- Translation horizontale et verticale --> - <rect x="5" y="5" width="40" height="40" fill="yellow" - transform="translate(50,50)" /> -</svg></pre> + <!-- Translation horizontale et verticale --> + <rect x="5" y="5" width="40" height="40" fill="yellow" + transform="translate(50,50)" /> +</svg> +``` -<p>{{EmbedLiveSample('translate()', '100%', 200)}}</p> +{{EmbedLiveSample('translate()', '100%', 200)}} -<h3 id="scale"><code>scale()</code></h3> +### `scale()` -<p>La fonction de transformation <code>scale(<x> [<y>])</code> définit une homothétie d'un facteur <code>x</code> en horizontal et d'un facteur <code>y</code> en vertical. Si la valeur <code>y</code> n'est pas fournie, on considère qu'elle est égale à <code>x</code>.</p> +La fonction de transformation `scale(<x> [<y>])` définit une homothétie d'un facteur `x` en horizontal et d'un facteur `y` en vertical. Si la valeur `y` n'est pas fournie, on considère qu'elle est égale à `x`. -<h4 id="Exemples_3">Exemples</h4> +#### Exemples -<pre class="brush: css hidden">html,body,svg { height:100% } -</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- uniform scale --> - <circle cx="0" cy="0" r="10" fill="red" - transform="scale(4)" /> +```html +<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- uniform scale --> + <circle cx="0" cy="0" r="10" fill="red" + transform="scale(4)" /> - <!-- vertical scale --> - <circle cx="0" cy="0" r="10" fill="yellow" - transform="scale(1,4)" /> + <!-- vertical scale --> + <circle cx="0" cy="0" r="10" fill="yellow" + transform="scale(1,4)" /> - <!-- horizontal scale --> - <circle cx="0" cy="0" r="10" fill="pink" - transform="scale(4,1)" /> + <!-- horizontal scale --> + <circle cx="0" cy="0" r="10" fill="pink" + transform="scale(4,1)" /> - <!-- No scale --> - <circle cx="0" cy="0" r="10" fill="black" /> -</svg></pre> + <!-- No scale --> + <circle cx="0" cy="0" r="10" fill="black" /> +</svg> +``` -<p>{{EmbedLiveSample('scale()', '100%', 200)}}</p> +{{EmbedLiveSample('scale()', '100%', 200)}} -<h3 id="rotate"><code>rotate()</code></h3> +### `rotate()` -<p>La fonction de transformation <code>rotate(<a> [<x> <y>])</code> définit une rotation de <code>a</code> degrés autour d'un point de coordonnées <code>x</code> et <code>y</code>. Si les paramètres optionnels <code>x</code> et <code>y</code> ne sont pas fournis, la rotation est effectuée autour de l'origine dans le système de coordonnés actuel.</p> +La fonction de transformation `rotate(<a> [<x> <y>])` définit une rotation de `a` degrés autour d'un point de coordonnées `x` et `y`. Si les paramètres optionnels `x` et `y` ne sont pas fournis, la rotation est effectuée autour de l'origine dans le système de coordonnés actuel. -<h4 id="Exemples_4">Exemples</h4> +#### Exemples -<pre class="brush: css hidden">html,body,svg { height:100% } -</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> - <rect x="0" y="0" width="10" height="10" /> +```html +<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="10" height="10" /> - <!-- rotation is done around the point 0,0 --> - <rect x="0" y="0" width="10" height="10" fill="red" - transform="rotate(100)" /> + <!-- rotation is done around the point 0,0 --> + <rect x="0" y="0" width="10" height="10" fill="red" + transform="rotate(100)" /> - <!-- rotation is done around the point 10,10 --> - <rect x="0" y="0" width="10" height="10" fill="green" - transform="rotate(100,10,10)" /> -</svg></pre> + <!-- rotation is done around the point 10,10 --> + <rect x="0" y="0" width="10" height="10" fill="green" + transform="rotate(100,10,10)" /> +</svg> +``` -<p>{{EmbedLiveSample('rotate()', '100%', 200)}}</p> +{{EmbedLiveSample('rotate()', '100%', 200)}} -<h3 id="skewX"><code>skewX()</code></h3> +### `skewX()` -<p>La fonction de transformation <code>skewX(<a>)</code> définit une distorsion horizontale de <code>a</code> degrés.</p> +La fonction de transformation `skewX(<a>)` définit une distorsion horizontale de `a` degrés. -<h4 id="Exemples_5">Exemples</h4> +#### Exemples -<pre class="brush: css hidden">html,body,svg { height:100% } -</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> - <rect x="-3" y="-3" width="6" height="6" /> +```html +<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="-3" y="-3" width="6" height="6" /> - <rect x="-3" y="-3" width="6" height="6" fill="red" - transform="skewX(30)" /> -</svg></pre> + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewX(30)" /> +</svg> +``` -<p>{{EmbedLiveSample('skewX()', '100%', 200)}}</p> +{{EmbedLiveSample('skewX()', '100%', 200)}} -<h3 id="skewY"><code>skewY()</code></h3> +### `skewY()` -<p>La fonction de transformation <code>skewY(<a>)</code> définit une distorsion verticale de <code>a</code> degrés.</p> +La fonction de transformation `skewY(<a>)` définit une distorsion verticale de `a` degrés. -<h4 id="Exemples_6">Exemples</h4> +#### Exemples -<pre class="brush: css hidden">html,body,svg { height:100% } -</pre> +```css hidden +html,body,svg { height:100% } +``` -<pre class="brush: html"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> - <rect x="-3" y="-3" width="6" height="6" /> +```html +<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect x="-3" y="-3" width="6" height="6" /> - <rect x="-3" y="-3" width="6" height="6" fill="red" - transform="skewY(30)" /> -</svg></pre> + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewY(30)" /> +</svg> +``` -<p>{{EmbedLiveSample('skewY()', '100%', 200)}}</p> +{{EmbedLiveSample('skewY()', '100%', 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">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}</td> - <td>{{Spec2('CSS3 Transforms')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}</td> - <td>{{Spec2("SVG2")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}</td> - <td>{{Spec2("SVG1.1")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}} | {{Spec2('CSS Transforms 2')}} | | +| {{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}} | {{Spec2('CSS3 Transforms')}} | | +| {{SpecName("SVG2", "coords.html#TransformProperty", "transform")}} | {{Spec2("SVG2")}} | | +| {{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}} | {{Spec2("SVG1.1")}} | Définition initiale. | diff --git a/files/fr/web/svg/attribute/viewbox/index.md b/files/fr/web/svg/attribute/viewbox/index.md index d8133f9c84..2ade5dcb69 100644 --- a/files/fr/web/svg/attribute/viewbox/index.md +++ b/files/fr/web/svg/attribute/viewbox/index.md @@ -6,62 +6,62 @@ tags: - SVG translation_of: Web/SVG/Attribute/viewBox --- -<p>« <a href="/fr/SVG/Attribute">Sommaire de la référence des attributs SVG</a></p> +« [Sommaire de la référence des attributs SVG](/fr/SVG/Attribute) -<p>L'attribut <code>viewBox</code> permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur.</p> +L'attribut `viewBox` permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur. -<p>La valeur de l'attribut <code>viewBox</code> est une liste de quatre nombres <code>min-x</code>, <code>min-y</code>, <code>width</code> et <code>height</code>, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}.</p> +La valeur de l'attribut `viewBox` est une liste de quatre nombres `min-x`, `min-y`, `width` et `height`, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}. -<p>Les valeurs négatives de <code>width</code> et <code>height</code> ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément.</p> +Les valeurs négatives de `width` et `height` ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Aucune</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td><em>Voir ci-dessus</em></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Document de norme</th> - <td><a href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>Aucune</td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td><em>Voir ci-dessus</em></td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Document de norme</th> + <td> + <a href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" + >SVG 1.1 (2nd Edition)</a + > + </td> + </tr> + </tbody> </table> -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur :</p> +Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur : -<p><code><svg width="300" height="200"></svg></code></p> +`<svg width="300" height="200"></svg>` -<p>En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport :</p> +En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport : -<p><code><svg width="300" height="200" viewBox="0 0 30 20"></svg></code></p> +`<svg width="300" height="200" viewBox="0 0 30 20"></svg>` -<h2 id="Elements">Elements</h2> +## Elements -<p>Les éléments suivants peuvent utiliser l'attribut <code>viewBox</code></p> +Les éléments suivants peuvent utiliser l'attribut `viewBox` -<ul> - <li>{{ SVGElement("svg") }}</li> - <li>{{ SVGElement("symbol") }}</li> - <li>{{ SVGElement("image") }}</li> - <li>{{ SVGElement("marker") }}</li> - <li>{{ SVGElement("pattern") }}</li> - <li>{{ SVGElement("view") }}</li> -</ul> +- {{ SVGElement("svg") }} +- {{ SVGElement("symbol") }} +- {{ SVGElement("image") }} +- {{ SVGElement("marker") }} +- {{ SVGElement("pattern") }} +- {{ SVGElement("view") }} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li><a href="/fr/SVG/Tutoriel/Positionnement">Introduction au SVG : Positionnement</a></li> -</ul> +- [Introduction au SVG : Positionnement](/fr/SVG/Tutoriel/Positionnement) diff --git a/files/fr/web/svg/attribute/width/index.md b/files/fr/web/svg/attribute/width/index.md index bc98142691..f86b517005 100644 --- a/files/fr/web/svg/attribute/width/index.md +++ b/files/fr/web/svg/attribute/width/index.md @@ -3,66 +3,91 @@ title: Width slug: Web/SVG/Attribute/width translation_of: Web/SVG/Attribute/width --- -<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +« [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute") -<p>Cet attribut indique une dimension horizontale <code><length></code> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).</p> +Cet attribut indique une dimension horizontale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). -<p>Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML), {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.</p> +Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML), {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Aucune</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td><a href="/fr/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> - </tr> - <tr> - <th scope="row">Animable</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Document normatif</th> - <td><a href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> - <a href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br> - <a href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> - <a href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br> - <a href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br> - <a href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br> - <a href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> - <a href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>Aucune</td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td> + <a + href="/fr/SVG/Content_type#Length" + title="https://developer.mozilla.org/en/SVG/Content_type#Length" + ><length></a + > + </td> + </tr> + <tr> + <th scope="row">Animable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Document normatif</th> + <td> + <a + href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute" + >SVG 1.1 (2nd Edition): foreignObject element</a + ><br /><a + href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute" + >SVG 1.1 (2nd Edition): image element</a + ><br /><a + href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute" + >SVG 1.1 (2nd Edition): pattern element</a + ><br /><a + href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute" + >SVG 1.1 (2nd Edition): rect element</a + ><br /><a + href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute" + >SVG 1.1 (2nd Edition): svg element</a + ><br /><a + href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute" + >SVG 1.1 (2nd Edition): use element</a + ><br /><a + href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute" + >SVG 1.1 (2nd Edition): Filter primitive</a + ><br /><a + href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute" + >SVG 1.1 (2nd Edition): mask element</a + > + </td> + </tr> + </tbody> </table> -<p>{{ page("fr/docs/Web/SVG/Content_type","Length") }}</p> +{{ page("fr/docs/Web/SVG/Content_type","Length") }} -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: xml"><?xml version="1.0"?> -<svg width="120" height="120" +```xml +<?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" - xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg"> - <rect x="10" y="10" width="100" height="100"/> -</svg></pre> + <rect x="10" y="10" width="100" height="100"/> +</svg> +``` -<h2 id="Eléments">Eléments</h2> +## Eléments -<p>Les éléments suivants peuvent utiliser l'attribut <code>width</code> :</p> +Les éléments suivants peuvent utiliser l'attribut `width` : -<ul> - <li><a href="/fr/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> - <li>{{ SVGElement("filter") }}</li> - <li>{{ SVGElement("foreignObject") }}</li> - <li>{{ SVGElement("image") }}</li> - <li>{{ SVGElement("pattern") }}</li> - <li>{{ SVGElement("rect") }}</li> - <li>{{ SVGElement("svg") }}</li> - <li>{{ SVGElement("use") }}</li> - <li>{{ SVGElement("mask") }}</li> -</ul> +- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » +- {{ SVGElement("filter") }} +- {{ SVGElement("foreignObject") }} +- {{ SVGElement("image") }} +- {{ SVGElement("pattern") }} +- {{ SVGElement("rect") }} +- {{ SVGElement("svg") }} +- {{ SVGElement("use") }} +- {{ SVGElement("mask") }} diff --git a/files/fr/web/svg/attribute/x/index.md b/files/fr/web/svg/attribute/x/index.md index b34d43d08c..52b1b7c252 100644 --- a/files/fr/web/svg/attribute/x/index.md +++ b/files/fr/web/svg/attribute/x/index.md @@ -8,81 +8,121 @@ tags: - SVG translation_of: Web/SVG/Attribute/x --- -<div>{{SVGRef}}</div> +{{SVGRef}} -<p>L'attribut <strong><code>x</code></strong> indique une coordonnée en x pour le système des coordonnées de l'utilisateur. L'effet de cette coordonnée dépend de l'élément sur lequel elle est utilisée. La plupart du temps, elle représente l'abscisse du coin en haut à gauche de la région rectangulaire pour l'élément. Cet attribut a la même syntaxe que <code><a href="https://www.w3.org/TR/SVG11/types.html#DataTypeLength"><length></a></code></p> +L'attribut **`x`** indique une coordonnée en x pour le système des coordonnées de l'utilisateur. L'effet de cette coordonnée dépend de l'élément sur lequel elle est utilisée. La plupart du temps, elle représente l'abscisse du coin en haut à gauche de la région rectangulaire pour l'élément. Cet attribut a la même syntaxe que [`<length>`](https://www.w3.org/TR/SVG11/types.html#DataTypeLength) -<p>Si cet attribut n'est pas défini, on aura le même effet que si on avait utilisé la valeur <strong>0</strong>. Les éléments {{SVGElement("filter")}} et {{SVGElement("mask")}} font exception à cette règle, la valeur par défaut pour cet attribut est ici <strong>-10%</strong>.</p> +Si cet attribut n'est pas défini, on aura le même effet que si on avait utilisé la valeur **0**. Les éléments {{SVGElement("filter")}} et {{SVGElement("mask")}} font exception à cette règle, la valeur par défaut pour cet attribut est ici **-10%**. -<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> +## Contexte d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Aucune</td> - </tr> - <tr> - <th scope="row">Type de valeur</th> - <td><code><a href="/fr/docs/Web/SVG/Content_type#Coordinate"><coordinate></a></code></td> - </tr> - <tr> - <th scope="row">Peut être animée</th> - <td>Oui</td> - </tr> - <tr> - <th scope="row">Spécifications</th> - <td><a href="https://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (seconde édition) : élément <code>altGlyph</code></a><br> - <a href="https://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (seconde édition) : élément <code>cursor</code></a><br> - <a href="https://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (seconde édition) : élément <code>fePointLight</code></a><br> - <a href="https://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (seconde édition) : élément <code>feSpotLight</code></a><br> - <a href="https://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (seconde édition) : élément <code>filter</code></a><br> - <a href="https://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>foreignObject</code></a><br> - <a href="https://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (seconde édition) : élément <code>glyphRef</code></a><br> - <a href="https://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (seconde édition) : élément <code>image</code></a><br> - <a href="https://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (seconde édition) : élément <code>pattern</code></a><br> - <a href="https://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>rect</code></a><br> - <a href="https://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (seconde édition) : élément <code>svg</code></a><br> - <a href="https://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (seconde édition) : élément <code>text</code></a><br> - <a href="https://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (seconde édition) : élément <code>use</code></a><br> - <a href="https://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (seconde édition) : primitive de filtre</a><br> - <a href="https://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (seconde édition) : élément <code>mask</code></a><br> - <a href="https://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (seconde édition) : élément <code>tspan</code></a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>Aucune</td> + </tr> + <tr> + <th scope="row">Type de valeur</th> + <td> + <code + ><a href="/fr/docs/Web/SVG/Content_type#Coordinate" + ><coordinate></a + ></code + > + </td> + </tr> + <tr> + <th scope="row">Peut être animée</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Spécifications</th> + <td> + <a href="https://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>altGlyph</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>cursor</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute" + >SVG 1.1 (seconde édition) : élément <code>fePointLight</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute" + >SVG 1.1 (seconde édition) : élément <code>feSpotLight</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>filter</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>foreignObject</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>glyphRef</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>image</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>pattern</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>rect</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>svg</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/text.html#TextElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>text</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/struct.html#UseElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>use</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute" + >SVG 1.1 (seconde édition) : primitive de filtre</a + ><br /><a + href="https://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>mask</code></a + ><br /><a + href="https://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute" + >SVG 1.1 (seconde édition) : élément <code>tspan</code></a + > + </td> + </tr> + </tbody> </table> -<p>{{page("/fr/docs/Web/SVG/Content_type","coordinate")}}</p> +{{page("/fr/docs/Web/SVG/Content_type","coordinate")}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<pre class="brush: xml"><?xml version="1.0"?> -<svg width="120" height="120" +```xml +<?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" - xmlns="https://www.w3.org/2000/svg"> + xmlns="https://www.w3.org/2000/svg"> - <rect x="10" y="10" width="100" height="100"/> -</svg></pre> + <rect x="10" y="10" width="100" height="100"/> +</svg> +``` -<h2 id="Éléments">Éléments</h2> +## Éléments -<p>On peut utiliser l'attribut <code>x</code> sur les éléments suivants :</p> +On peut utiliser l'attribut `x` sur les éléments suivants : -<ul> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_primitives_de_filtre">Les éléments de primitives de filtres</a></li> - <li>{{SVGElement("altGlyph")}}</li> - <li>{{SVGElement("fePointLight")}}</li> - <li>{{SVGElement("feSpotLight")}}</li> - <li>{{SVGElement("filter")}}</li> - <li>{{SVGElement("foreignObject")}}</li> - <li>{{SVGElement("glyphRef")}}</li> - <li>{{SVGElement("image")}}</li> - <li>{{SVGElement("pattern")}}</li> - <li>{{SVGElement("rect")}}</li> - <li>{{SVGElement("svg")}}</li> - <li>{{SVGElement("text")}}</li> - <li>{{SVGElement("use")}}</li> - <li>{{SVGElement("mask")}}</li> - <li>{{SVGElement("tref")}}</li> - <li>{{SVGElement("tspan")}}</li> -</ul> +- [Les éléments de primitives de filtres](/fr/docs/Web/SVG/Element#Éléments_de_primitives_de_filtre) +- {{SVGElement("altGlyph")}} +- {{SVGElement("fePointLight")}} +- {{SVGElement("feSpotLight")}} +- {{SVGElement("filter")}} +- {{SVGElement("foreignObject")}} +- {{SVGElement("glyphRef")}} +- {{SVGElement("image")}} +- {{SVGElement("pattern")}} +- {{SVGElement("rect")}} +- {{SVGElement("svg")}} +- {{SVGElement("text")}} +- {{SVGElement("use")}} +- {{SVGElement("mask")}} +- {{SVGElement("tref")}} +- {{SVGElement("tspan")}} diff --git a/files/fr/web/svg/compatibility_sources/index.md b/files/fr/web/svg/compatibility_sources/index.md index 83b37b09d7..790df82f19 100644 --- a/files/fr/web/svg/compatibility_sources/index.md +++ b/files/fr/web/svg/compatibility_sources/index.md @@ -7,14 +7,12 @@ tags: translation_of: Web/SVG/Compatibility_sources original_slug: Web/SVG/Sources_compatibilite --- -<p>Les sources suivantes sont utilisées pour les tableaux de compatibilités des éléments SVG et de leurs attributs :</p> +Les sources suivantes sont utilisées pour les tableaux de compatibilités des éléments SVG et de leurs attributs : -<ul> - <li><a href="/fr/SVG_in_Firefox" title="En/SVG_in_Firefox">https://developer.mozilla.org/En/SVG_in_Firefox</a> associé à son historique de révision pour Firefox</li> - <li><a href="http://www.webkit.org/projects/svg/status.xml">http://www.webkit.org/projects/svg/status.xml</a> associé à son <a href="http://wayback.archive.org/web/*/http://www.webkit.org/projects/svg/status.xml">archive enregistré</a> pour Webkit, Safari et Chrome</li> - <li><a href="http://www.opera.com/docs/specs/opera9/svg/">http://www.opera.com/docs/specs/opera9/svg/</a> ainsi que les pages pour Opera >= 9, <a href="http://www.opera.com/docs/specs/opera8/">http://www.opera.com/docs/specs/opera8/</a> pour Opera 8</li> - <li><a href="http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx">http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx</a> pour connaître l'état du support sur IE9</li> - <li><a href="http://www.codedread.com/svg-support.php">Le graphique de support SVG sur Codedread.com</a> pour les vérifications basiques par rapport à la suite de test W3C</li> - <li><a href="http://en.wikipedia.org/wiki/SVG">Wikipedia</a> pour des conseils basiques, non normatif</li> - <li><a href="svground.fr/">Svground.fr/ </a>tuto assez complet sur le SVG</li> -</ul> +- [https://developer.mozilla.org/En/SVG_in_Firefox](/fr/SVG_in_Firefox "En/SVG_in_Firefox") associé à son historique de révision pour Firefox +- <http://www.webkit.org/projects/svg/status.xml> associé à son [archive enregistré](http://wayback.archive.org/web/*/http://www.webkit.org/projects/svg/status.xml) pour Webkit, Safari et Chrome +- <http://www.opera.com/docs/specs/opera9/svg/> ainsi que les pages pour Opera >= 9, <http://www.opera.com/docs/specs/opera8/> pour Opera 8 +- <http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx> pour connaître l'état du support sur IE9 +- [Le graphique de support SVG sur Codedread.com](http://www.codedread.com/svg-support.php) pour les vérifications basiques par rapport à la suite de test W3C +- [Wikipedia](http://en.wikipedia.org/wiki/SVG) pour des conseils basiques, non normatif +- [Svground.fr/ ](svground.fr/)tuto assez complet sur le SVG 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")}} diff --git a/files/fr/web/svg/index.md b/files/fr/web/svg/index.md index db201ffa0a..cd2d023cd7 100644 --- a/files/fr/web/svg/index.md +++ b/files/fr/web/svg/index.md @@ -10,93 +10,81 @@ tags: - Reference - SVG - Web - - 'l10n:priority' + - l10n:priority - Ícones translation_of: Web/SVG --- -<div>{{SVGRef}}</div> - -<p><strong>SVG (Scalable Vector Graphics)</strong> est un langage de balisage <a href="/fr/docs/Web/XML">XML</a> décrivant des <a href="https://fr.wikipedia.org/wiki/Image_vectorielle">images vectorielles</a> bidimensionnelles. On pourrait dire que SVG est aux images ce qu'<a href="/fr/docs/Web/HTML">HTML</a> est au texte.</span></p> - -<p><strong><a href="/fr/SVG/Tutoriel" title="fr/SVG/Tutoriel">Premiers pas</a></strong> ce tutoriel vous aidera à débuter en SVG.</p> - -<p>SVG est une <a href="http://www.w3.org/Graphics/SVG/">recommandation du W3C</a> et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du <a href="http://www.w3.org/">W3C</a> comme <a href="/fr/CSS" title="fr/CSS">CSS</a>, <a href="/fr/DOM" title="fr/DOM">DOM</a> et <a href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> - -<p>SVG est un format d'images vectorielles. Les images vectorielles peuvent être redimensionnées sans perte de qualité, tandis que ce n'est pas possible avec des images matricielles (bitmap).</p> - -<p>SVG est une norme développée par le <a href="https://www.w3.org/">World Wide Web Consortium (W3C) </a>depuis 1999.</p> - -<h2 id="Documentation">Documentation</h2> - -<dl> - <dt><a href="/fr/SVG/Element" title="fr/SVG/Element">Référence des éléments SVG</a></dt> - <dd>Obtenir des informations sur les éléments SVG.</dd> - <dt><a href="/fr/docs/Web/SVG/Attribute" title="/fr/docs/Web/SVG/Attribute">Référence des attributs SVG</a></dt> - <dd>Obtenir des informations sur les attributs SVG.</dd> - <dt><a href="/fr/docs/Référence_du_DOM_Gecko#Interfaces_SVG" title="/fr/docs/Référence_du_DOM_Gecko#Interfaces_SVG">Référence de l'interface DOM SVG</a></dt> - <dd>Les détails sur l'API DOM SVG pour intéragir avec Javascript.</dd> - <dt><a href="/fr/SVG_dans_Firefox" title="fr/SVG_dans_Firefox">SVG dans Firefox</a></dt> - <dd>Cet article décrit les caractéristiques et le comportement du sous-ensemble de la spécification SVG 1.1 actuellement implémenté dans Firefox 2.</dd> - <dt><a href="http://svground.fr/">SVG documentation tierce</a></dt> - <dd>Une référence francophone du format SVG sous forme de tutoriels.</dd> - <dt><a href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> (en anglais)</dt> - <dd>jwatt traite des erreurs les plus courantes commises dans le contenu SVG, et explique ce que les auteurs peuvent faire pour les corriger.</dd> - <dt><a href="/fr/docs/Mozilla/Mozilla_SVG_Project" title="fr/Projet_SVG_de_Mozilla">Projet SVG de Mozilla</a></dt> - <dd>Une présentation du projet SVG de Mozilla (à traduire de <a href="/fr/Mozilla_SVG_Project" title="en/Mozilla_SVG_Project">en:Mozilla SVG Project</a>).</dd> - <dt><a href="http://www.mozilla.org/projects/svg/faq.html">Mozilla SVG Project FAQ</a></dt> - <dd>Cette FAQ est le résultat de recherches au sein du groupe mozilla.dev.tech.svg et des forums de MozillaZine pour connaître les questions les plus souvent posées à propos de SVG dans Mozilla.</dd> - <dt>Autres ressources</dt> - <dd><p>Voici d'autres articles à propos de SVG sur MDN :</p> - <ul> - <li><a href="/fr/docs/Web/SVG/Tutoriel" title="/fr/docs/Web/SVG/Tutoriel">Un tutoriel</a></li> - <li><a href="/fr/docs/Introduction_à_SVG_dans_HTML" title="/fr/docs/Introduction_à_SVG_dans_HTML">Une introduction à SVG dans HTML</a></li> - </ul> - </dd> -</dl> - -<h2 id="Communauté">Communauté</h2> - -<ul> - <li>Voir les forums Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> -</ul> - -<h2 id="Outils">Outils</h2> - -<ul> - <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> - <li><a href="http://validator.w3.org/">Validateur SVG</a> (jusqu'à 1.1 seulement)</li> - <li>D'autres ressources connexes : <a href="/fr/docs/Web/XML" title="/fr/docs/XML">XML</a>, <a href="/fr/docs/CSS">CSS</a>, <a href="/fr/docs/DOM">DOM</a>, <a href="/fr/docs/HTML/Canvas">Canvas</a></li> -</ul> - -<h2 id="Exemples">Exemples</h2> - -<ul> - <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galerie d'art SVG</a></li> - <li><a href="http://www.carto.net/papers/svg/samples/">carto.net</a></li> - <li>Google <a href="http://maps.google.com">Maps</a> (tracé des routes) et Google <a href="http://docs.google.com">Docs</a> (graphiques des tableurs)</li> - <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Menus « bulles » SVG</a></li> - <li>Présentation <a href="https://jwatt.org/blog/2009/11/16/slides-and-demos-from-svg-open-2009">SVG et Mozilla</a> lors de SVG Open 2009</li> - <li><a href="/fr/docs/Web/SVG/SVG_en_tant_qu_image">SVG comme image</a></li> - <li><a href="/fr/docs/Web/SVG/SVG_animation_with_SMIL">Animation SVG avec SMIL</a></li> -</ul> - -<h3 id="Animation_et_interaction">Animation et interaction</h3> - -<p>Comme HTML, SVG dispose d'un modèle de document (DOM) et d'évènements, et est accessible depuis JavaScript. Ceci permet aux développeurs de créer des animations riches et des images interactives.</p> - -<ul> - <li><a href="http://svg-wow.org/">svg-wow.org</a></li> - <li>Extension Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) pour ajouter la gestion d'un sous-ensemble des animations SMIL</li> - <li>Manipulation interactive de <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a></li> - <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">Transformations HTML </a>utilisant <code>foreignObject</code> de SVG</li> -</ul> - -<h3 id="Cartes_graphiques_jeux_et_expérimentations_3D">Cartes, graphiques, jeux et expérimentations 3D</h3> +{{SVGRef}} + +**SVG (Scalable Vector Graphics)** est un langage de balisage [XML](/fr/docs/Web/XML) décrivant des [images vectorielles](https://fr.wikipedia.org/wiki/Image_vectorielle) bidimensionnelles. On pourrait dire que SVG est aux images ce qu'[HTML](/fr/docs/Web/HTML) est au texte. + +**[Premiers pas](/fr/SVG/Tutoriel "fr/SVG/Tutoriel")** ce tutoriel vous aidera à débuter en SVG. + +SVG est une [recommandation du W3C](http://www.w3.org/Graphics/SVG/) et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du [W3C](http://www.w3.org/) comme [CSS](/fr/CSS "fr/CSS"), [DOM](/fr/DOM "fr/DOM") et [SMIL](http://www.w3.org/AudioVideo/). + +SVG est un format d'images vectorielles. Les images vectorielles peuvent être redimensionnées sans perte de qualité, tandis que ce n'est pas possible avec des images matricielles (bitmap). + +SVG est une norme développée par le [World Wide Web Consortium (W3C) ](https://www.w3.org/)depuis 1999. + +## Documentation + +- [Référence des éléments SVG](/fr/SVG/Element "fr/SVG/Element") + - : Obtenir des informations sur les éléments SVG. +- [Référence des attributs SVG](/fr/docs/Web/SVG/Attribute "/fr/docs/Web/SVG/Attribute") + - : Obtenir des informations sur les attributs SVG. +- [Référence de l'interface DOM SVG](/fr/docs/Référence_du_DOM_Gecko#Interfaces_SVG "/fr/docs/Référence_du_DOM_Gecko#Interfaces_SVG") + - : Les détails sur l'API DOM SVG pour intéragir avec Javascript. +- [SVG dans Firefox](/fr/SVG_dans_Firefox "fr/SVG_dans_Firefox") + - : Cet article décrit les caractéristiques et le comportement du sous-ensemble de la spécification SVG 1.1 actuellement implémenté dans Firefox 2. +- [SVG documentation tierce](http://svground.fr/) + - : Une référence francophone du format SVG sous forme de tutoriels. +- [SVG Authoring Guidelines](http://jwatt.org/svg/authoring/) (en anglais) + - : jwatt traite des erreurs les plus courantes commises dans le contenu SVG, et explique ce que les auteurs peuvent faire pour les corriger. +- [Projet SVG de Mozilla](/fr/docs/Mozilla/Mozilla_SVG_Project "fr/Projet_SVG_de_Mozilla") + - : Une présentation du projet SVG de Mozilla (à traduire de [en:Mozilla SVG Project](/fr/Mozilla_SVG_Project "en/Mozilla_SVG_Project")). +- [Mozilla SVG Project FAQ](http://www.mozilla.org/projects/svg/faq.html) + - : Cette FAQ est le résultat de recherches au sein du groupe mozilla.dev.tech.svg et des forums de MozillaZine pour connaître les questions les plus souvent posées à propos de SVG dans Mozilla. +- Autres ressources + + - : Voici d'autres articles à propos de SVG sur MDN : + + - [Un tutoriel](/fr/docs/Web/SVG/Tutoriel "/fr/docs/Web/SVG/Tutoriel") + - [Une introduction à SVG dans HTML](/fr/docs/Introduction_à_SVG_dans_HTML "/fr/docs/Introduction_à_SVG_dans_HTML") + +## Communauté + +- Voir les forums Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}} + +## Outils + +- [SVG Test Suite](http://www.w3.org/Graphics/SVG/Test/) +- [Validateur SVG](http://validator.w3.org/) (jusqu'à 1.1 seulement) +- D'autres ressources connexes : [XML](/fr/docs/Web/XML "/fr/docs/XML"), [CSS](/fr/docs/CSS), [DOM](/fr/docs/DOM), [Canvas](/fr/docs/HTML/Canvas) + +## Exemples + +- [Galerie d'art SVG](http://plurib.us/1shot/2007/svg_gallery/) +- [carto.net](http://www.carto.net/papers/svg/samples/) +- Google [Maps](http://maps.google.com) (tracé des routes) et Google [Docs](http://docs.google.com) (graphiques des tableurs) +- [Menus « bulles » SVG](http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml) +- Présentation [SVG et Mozilla](https://jwatt.org/blog/2009/11/16/slides-and-demos-from-svg-open-2009) lors de SVG Open 2009 +- [SVG comme image](/fr/docs/Web/SVG/SVG_en_tant_qu_image) +- [Animation SVG avec SMIL](/fr/docs/Web/SVG/SVG_animation_with_SMIL) + +### Animation et interaction + +Comme HTML, SVG dispose d'un modèle de document (DOM) et d'évènements, et est accessible depuis JavaScript. Ceci permet aux développeurs de créer des animations riches et des images interactives. + +- [svg-wow.org](http://svg-wow.org/) +- Extension Firefox ([Grafox](http://schepers.cc/grafox/)) pour ajouter la gestion d'un sous-ensemble des animations SMIL +- Manipulation interactive de [photos](http://people.mozilla.com/~vladimir/demos/photos.svg) +- [Transformations HTML ](http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/)utilisant `foreignObject` de SVG + +### Cartes, graphiques, jeux et expérimentations 3D + Bien qu'un peu de SVG puisse contribuer à améliorer le contenu du web, voici quelques exemples d'utilisation poussée du SVG. -<ul> - <li>Un<a href="http://www.codedread.com/yastframe.php"> Tetris en SVG</a> et <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li> - <li>Jeu <a href="http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/USStates.svg">Find the State</a></li> - <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">Boîte 3D</a> et <a href="http://www.treebuilder.de/default.asp?file=206524.xml">boîtes 3D</a></li> - <li><a href="http://jvectormap.com/">jVectorMap</a> (pour représenter des cartes interactives avec des données) (en anglais)</li> -</ul>
\ No newline at end of file +- Un[ Tetris en SVG](http://www.codedread.com/yastframe.php) et [Connect 4](http://www.treebuilder.de/svg/connect4.svg) +- Jeu [Find the State](http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/USStates.svg) +- [Boîte 3D](http://www.treebuilder.de/default.asp?file=441875.xml) et [boîtes 3D](http://www.treebuilder.de/default.asp?file=206524.xml) +- [jVectorMap](http://jvectormap.com/) (pour représenter des cartes interactives avec des données) (en anglais) diff --git a/files/fr/web/svg/index/index.md b/files/fr/web/svg/index/index.md index b1fc6f967c..50edd31d3b 100644 --- a/files/fr/web/svg/index/index.md +++ b/files/fr/web/svg/index/index.md @@ -5,4 +5,4 @@ tags: - SVG translation_of: Web/SVG/Index --- -<p>{{Index("/fr/docs/Web/SVG")}}</p> +{{Index("/fr/docs/Web/SVG")}} diff --git a/files/fr/web/svg/svg_animation_with_smil/index.md b/files/fr/web/svg/svg_animation_with_smil/index.md index d6be59efac..77194a54b5 100644 --- a/files/fr/web/svg/svg_animation_with_smil/index.md +++ b/files/fr/web/svg/svg_animation_with_smil/index.md @@ -11,61 +11,58 @@ tags: - XML translation_of: Web/SVG/SVG_animation_with_SMIL --- -<div class="warning"> - <p><strong>Attention :</strong> Bien que Chrome 45 déprécie SMIL en faveur des animations CSS et des animations Web, les développeurs Chrome ont depuis <a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/5o0yiO440LM/YGEJBsjUAwAJ">suspendu</a> cette décision.</p> -</div> - -<p>Firefox 4 introduit le support pour les animations <a href="/fr/SVG" title="en/SVG">SVG</a> en utilisant <a href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL). SMIL permet :</p> - -<ul> - <li>d'animer les attributs numériques d'un élément (x, y, ...)</li> - <li>d'animer la transformation des attributs (translation ou rotation)</li> - <li>d'animer les attributs de couleur</li> - <li>de créer un mouvement en suivant un tracé donné</li> -</ul> - -<p>Pour ce faire, on utilise un élément SVG tel que {{ SVGElement("animate") }}. Vous trouverez ci-dessous des exemples illustrant les quatres différents manières de procéder.</p> - -<h2 id="Animation_pour_un_attribut">Animation pour un attribut</h2> - -<p>L'exemple suivant anime l'attribut <code><strong>cx</strong></code> d'un cercle. Pour ce faire, on ajoute un élément {{ SVGElement("animate") }} dans l'élément {{ SVGElement("circle") }}. Les attributs importants pour {{ SVGElement("animate") }} sont :</p> - -<dl> - <dt><code><strong>attributeName</strong></code></dt> - <dd>Le nom de l'attribut à animer.</dd> - <dt><code>from</code></dt> - <dd>La valeur initiale de l'attribut.</dd> - <dt><code>to</code></dt> - <dd>La valeur finale.</dd> - <dt><code>dur</code></dt> - <dd>La durée de l'animation (par exemple, écrire '5s' pour 5 secondes).</dd> -</dl> - -<p>Si vous voulez animer plus d'attributs dans le même élément, ajoutez simplement d'autres éléments {{ SVGElement("animate") }}.</p> - -<pre class="brush: html"><svg width="300" height="100"> - <title>Attribute Animation with SMIL</title> - <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> - <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> - <animate +> **Attention :** Bien que Chrome 45 déprécie SMIL en faveur des animations CSS et des animations Web, les développeurs Chrome ont depuis [suspendu](https://groups.google.com/a/chromium.org/d/msg/blink-dev/5o0yiO440LM/YGEJBsjUAwAJ) cette décision. + +Firefox 4 introduit le support pour les animations [SVG](/fr/SVG "en/SVG") en utilisant [Synchronized Multimedia Integration Language](http://www.w3.org/TR/REC-smil) (SMIL). SMIL permet : + +- d'animer les attributs numériques d'un élément (x, y, ...) +- d'animer la transformation des attributs (translation ou rotation) +- d'animer les attributs de couleur +- de créer un mouvement en suivant un tracé donné + +Pour ce faire, on utilise un élément SVG tel que {{ SVGElement("animate") }}. Vous trouverez ci-dessous des exemples illustrant les quatres différents manières de procéder. + +## Animation pour un attribut + +L'exemple suivant anime l'attribut **`cx`** d'un cercle. Pour ce faire, on ajoute un élément {{ SVGElement("animate") }} dans l'élément {{ SVGElement("circle") }}. Les attributs importants pour {{ SVGElement("animate") }} sont : + +- **`attributeName`** + - : Le nom de l'attribut à animer. +- `from` + - : La valeur initiale de l'attribut. +- `to` + - : La valeur finale. +- `dur` + - : La durée de l'animation (par exemple, écrire '5s' pour 5 secondes). + +Si vous voulez animer plus d'attributs dans le même élément, ajoutez simplement d'autres éléments {{ SVGElement("animate") }}. + +```html +<svg width="300" height="100"> + <title>Attribute Animation with SMIL</title> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> + <animate attributeName="cx" from="0" to="100" - dur="5s" repeatCount="indefinite" /> - </circle> -</svg></pre> + dur="5s" repeatCount="indefinite" /> + </circle> +</svg> +``` -<p>{{ EmbedLiveSample("Animation_pour_un_attribut", '100%', 120) }}</p> +{{ EmbedLiveSample("Animation_pour_un_attribut", '100%', 120) }} -<h2 id="Animer_une_transformation_des_attributs">Animer une transformation d'attributs</h2> +## Animer une transformation d'attributs -<p>L'élement {{ SVGElement("animateTransform") }} permet d'animer la <strong>transformation</strong> d'attributs. Ce nouvel élément est nécéssaire parce que nous n'animons pas un simple attribut tel que <strong>x, </strong>qui est juste un nombre.<br> - Les attributs pour la rotation sont ainsi : <code>rotation(theta, x, y)</code>, où <code>theta</code> est l'angle en degrés, <code>x</code> et <code>y</code> sont les positions absolues.<br> - Dans l'exemple ci dessous, on anime le centre de rotation et l'angle.</p> +L'élement {{ SVGElement("animateTransform") }} permet d'animer la **transformation** d'attributs. Ce nouvel élément est nécéssaire parce que nous n'animons pas un simple attribut tel que **x,** qui est juste un nombre. +Les attributs pour la rotation sont ainsi : `rotation(theta, x, y)`, où `theta` est l'angle en degrés, `x` et `y` sont les positions absolues. +Dans l'exemple ci dessous, on anime le centre de rotation et l'angle. -<pre class="brush: html"><svg width="300" height="100"> - <title>SVG SMIL Animate with transform</title> - <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> - <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> - <animateTransform +```html +<svg width="300" height="100"> + <title>SVG SMIL Animate with transform</title> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> + <animateTransform attributeName="transform" begin="0s" dur="20s" @@ -73,57 +70,57 @@ translation_of: Web/SVG/SVG_animation_with_SMIL from="0 60 60" to="360 100 60" repeatCount="indefinite" - /> - </rect> -</svg> -</pre> + /> + </rect> +</svg> +``` -<p>{{ EmbedLiveSample("Animer_une_transformation_des_attributs", '100%', 120) }}</p> +{{ EmbedLiveSample("Animer_une_transformation_des_attributs", '100%', 120) }} -<h2 id="Animation_suivant_un_tracé_(chemin)">Animation suivant un tracé (chemin)</h2> +## Animation suivant un tracé (chemin) -<p>L'élement {{ SVGElement("animateMotion") }} permet d'animer la position et la rotation d'éléments en suivant un tracé spécifique. Ce chemin est définit de la même manière que dans {{ SVGElement("path") }}.</p> +L'élement {{ SVGElement("animateMotion") }} permet d'animer la position et la rotation d'éléments en suivant un tracé spécifique. Ce chemin est définit de la même manière que dans {{ SVGElement("path") }}. -<h3 id="Exemple_1_Mouvement_linéaire">Exemple 1: Mouvement linéaire</h3> +### Exemple 1: Mouvement linéaire -<p>Dans cet exemple, un cercle bleu rebondit indéfiniment entre les bords gauche et droit d'une boîte noir. L'animation est ici gérée par l'élément {{ SVGElement("animateMotion") }}.</p> +Dans cet exemple, un cercle bleu rebondit indéfiniment entre les bords gauche et droit d'une boîte noir. L'animation est ici gérée par l'élément {{ SVGElement("animateMotion") }}. -<p>On crée ici un chemin avec les commandes<strong> M</strong>oveTo, pour définir le point de départ de l'animation<strong>, H</strong>orizontal-line, pour déplacer le cercle de 300 pixels vers la droite, et la commande <strong>Z</strong>, pour fermer le chemin — ce qui permet d'établir une boucle qui revient au début. En définissant la valeur de l'attribut <strong>repeatCount</strong> à <code>indefinite</code>, on indique que l'animation doit boucler indéfiniment, tant que l'image SVG existe.</p> +On crée ici un chemin avec les commandes **M**oveTo, pour définir le point de départ de l'animation**, H**orizontal-line, pour déplacer le cercle de 300 pixels vers la droite, et la commande **Z**, pour fermer le chemin — ce qui permet d'établir une boucle qui revient au début. En définissant la valeur de l'attribut **repeatCount** à `indefinite`, on indique que l'animation doit boucler indéfiniment, tant que l'image SVG existe. -<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" width="300" height="100"> - <title>SVG SMIL Animate with Path</title> - <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> - <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> - <animateMotion +```html +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100"> + <title>SVG SMIL Animate with Path</title> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> + <animateMotion path="M 0 0 H 300 Z" - dur="3s" repeatCount="indefinite" /> - </circle> -</svg> -</pre> + dur="3s" repeatCount="indefinite" /> + </circle> +</svg> +``` -<p>{{ EmbedLiveSample('Exemple_1_Mouvement_linéaire', '100%', 120) }}</p> +{{ EmbedLiveSample('Exemple_1_Mouvement_linéaire', '100%', 120) }} -<h3 id="Exemple_2_Mouvement_en_courbe">Exemple 2: Mouvement en courbe</h3> +### Exemple 2: Mouvement en courbe -<p>Le même exemple que précédemment mais avec une trajectoire courbe.</p> +Le même exemple que précédemment mais avec une trajectoire courbe. -<pre class="brush: html"><svg width="300" height="100"> - <title>SVG SMIL Animate with Path</title> - <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> - <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1"> - <animateMotion +```html +<svg width="300" height="100"> + <title>SVG SMIL Animate with Path</title> + <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> + <rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1"> + <animateMotion path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" - dur="3s" repeatCount="indefinite" rotate="auto" /> - </rect> -</svg> -</pre> + dur="3s" repeatCount="indefinite" rotate="auto" /> + </rect> +</svg> +``` -<p>{{ EmbedLiveSample('Exemple_2_Mouvement_en_courbe', '100%', 120) }}</p> +{{ EmbedLiveSample('Exemple_2_Mouvement_en_courbe', '100%', 120) }} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/SVG" title="en/SVG">SVG</a></li> - <li><a href="http://www.w3.org/TR/SVG/animate.html">SVG Animation Specification</a></li> - <li><a href="http://www.w3.org/TR/REC-smil">SMIL Specification</a></li> -</ul> +- [SVG](/fr/SVG "en/SVG") +- [SVG Animation Specification](http://www.w3.org/TR/SVG/animate.html) +- [SMIL Specification](http://www.w3.org/TR/REC-smil) diff --git a/files/fr/web/svg/svg_as_an_image/index.md b/files/fr/web/svg/svg_as_an_image/index.md index 1b07e3b69b..52b40872b0 100644 --- a/files/fr/web/svg/svg_as_an_image/index.md +++ b/files/fr/web/svg/svg_as_an_image/index.md @@ -7,69 +7,45 @@ tags: translation_of: Web/SVG/SVG_as_an_Image original_slug: Web/SVG/SVG_en_tant_qu_image --- -<div>{{SVGRef}}</div> -<p>Le format SVG peut être utilisé en tant qu'image dans de nombreux contextes. Beaucoup de navigateurs prennent en charge les images au format SVG avec :</p> - -<ul> - <li>les balises HTML {{HTMLElement("img")}} ou {{HTMLElement("svg")}}</li> - <li>l'attribut CSS {{cssxref("background-image")}}</li> -</ul> - -<h2 id="Contexte_spécifique_à_Gecko">Contexte spécifique à Gecko</h2> - -<p>De plus, Gecko 2.0 {{geckoRelease("2.0")}} prend en charge l'usage du format <a href="/fr/docs/SVG">SVG</a> dans ces contextes:</p> - -<ul> - <li>la propriété CSS {{cssxref("list-style-image")}}</li> - <li>la propriété CSS {{cssxref("content")}}</li> - <li>l'élément SVG {{SVGElement("image")}}</li> - <li>l'élément SVG {{SVGElement("feImage")}}</li> - <li>la fonction Canvas <a href="/fr/docs/HTML/Canvas/Tutorial/Using_images#drawImage"><code>drawImage</code></a></li> -</ul> - -<h3 id="Restrictions">Restrictions</h3> - -<p>Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsqu'il est utilisé en tant qu'image :</p> - -<ul> - <li><a href="/fr/docs/Web/JavaScript" title="JavaScript">JavaScript</a> est désactivé.</li> - <li>Les ressources externes (p. ex. images, stylesheets) ne peuvent pas être chargées, cependant elles peuvent être utilisées en étant déclaré à travers des URLs de données.</li> - <li>Les liens stylistiques {{cssxref(":visited")}} ne sont pas interprété.</li> - <li>Les widgets stylistiques natifs aux plateformes (basés sur le thème de l'OS) sont désactivés.</li> -</ul> - -<p>A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td>Définit l'usage de SVG dans les éléments {{HTMLElement("img")}}.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}</td> - <td>{{Spec2("CSS3 Backgrounds")}}</td> - <td>Définit l'usage de SVG dans la propriété {{cssxref("background-image")}}.</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<p> </p> - -<ul> - <li><a href="/fr/docs/Introduction_à_SVG_dans_HTML">Introduction à SVG dans HTML</a></li> -</ul> +{{SVGRef}} + +Le format SVG peut être utilisé en tant qu'image dans de nombreux contextes. Beaucoup de navigateurs prennent en charge les images au format SVG avec : + +- les balises HTML {{HTMLElement("img")}} ou {{HTMLElement("svg")}} +- l'attribut CSS {{cssxref("background-image")}} + +## Contexte spécifique à Gecko + +De plus, Gecko 2.0 {{geckoRelease("2.0")}} prend en charge l'usage du format [SVG](/fr/docs/SVG) dans ces contextes: + +- la propriété CSS {{cssxref("list-style-image")}} +- la propriété CSS {{cssxref("content")}} +- l'élément SVG {{SVGElement("image")}} +- l'élément SVG {{SVGElement("feImage")}} +- la fonction Canvas [`drawImage`](/fr/docs/HTML/Canvas/Tutorial/Using_images#drawImage) + +### Restrictions + +Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsqu'il est utilisé en tant qu'image : + +- [JavaScript](/fr/docs/Web/JavaScript "JavaScript") est désactivé. +- Les ressources externes (p. ex. images, stylesheets) ne peuvent pas être chargées, cependant elles peuvent être utilisées en étant déclaré à travers des URLs de données. +- Les liens stylistiques {{cssxref(":visited")}} ne sont pas interprété. +- Les widgets stylistiques natifs aux plateformes (basés sur le thème de l'OS) sont désactivés. + +A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}} + +## Spécifications + +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------- | +| {{SpecName("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}} | {{Spec2("HTML5 W3C")}} | Définit l'usage de SVG dans les éléments {{HTMLElement("img")}}. | +| {{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}} | {{Spec2("CSS3 Backgrounds")}} | Définit l'usage de SVG dans la propriété {{cssxref("background-image")}}. | + + + +## Voir aussi + + + +- [Introduction à SVG dans HTML](/fr/docs/Introduction_à_SVG_dans_HTML) diff --git a/files/fr/web/svg/tutorial/basic_shapes/index.md b/files/fr/web/svg/tutorial/basic_shapes/index.md index b880c7228a..013337e44d 100644 --- a/files/fr/web/svg/tutorial/basic_shapes/index.md +++ b/files/fr/web/svg/tutorial/basic_shapes/index.md @@ -4,163 +4,145 @@ slug: Web/SVG/Tutorial/Basic_Shapes translation_of: Web/SVG/Tutorial/Basic_Shapes original_slug: Web/SVG/Tutoriel/Formes_de_base --- -<p>{{PreviousNext("Web/SVG/Tutorial/Positions","Web/SVG/Tutorial/Paths")}}</p> +{{PreviousNext("Web/SVG/Tutorial/Positions","Web/SVG/Tutorial/Paths")}} -<p>Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes s'avère assez transparent si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à <a href="/fr/docs/Web/SVG/Element">la page des références SVG</a>. Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG.</p> +Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes s'avère assez transparent si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à [la page des références SVG](/fr/docs/Web/SVG/Element). Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG. -<h2 id="basic_shapes">Formes de base</h2> +## Formes de base -<p>Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :</p> +Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela : -<p><img alt="" src="shapes.png"></p> + -<pre class="brush:xml"> -<?xml version="1.0" standalone="no"?> -<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> +```xml +<?xml version="1.0" standalone="no"?> +<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> - <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> - <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> - <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> - <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> + <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> + <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> - <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/> - <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" - stroke="orange" fill="transparent" stroke-width="5"/> + <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/> + <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" + stroke="orange" fill="transparent" stroke-width="5"/> - <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" - stroke="green" fill="transparent" stroke-width="5"/> + <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" + stroke="green" fill="transparent" stroke-width="5"/> - <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> -</svg> -</pre> + <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> +</svg> +``` -<div class="note"> - <p><strong>Note :</strong> les attributs <code>stroke</code>, <code>stroke-width</code> et <code>fill</code> sont détaillés plus loin dans ce tutoriel.</p> -</div> +> **Note :** les attributs `stroke`, `stroke-width` et `fill` sont détaillés plus loin dans ce tutoriel. -<h3 id="rectangle">Rectangle</h3> +### Rectangle -<p>L'élément <a href="/fr/docs/Web/SVG/Element/rect"><code><rect></code></a> permet de dessiner des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle à l'écran. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs <code>rx</code> et <code>ry</code> définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits.</p> +L'élément [`<rect>`](/fr/docs/Web/SVG/Element/rect) permet de dessiner des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle à l'écran. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs `rx` et `ry` définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits. -<pre class="brush:xml"> -<rect x="10" y="10" width="30" height="30"/> -<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> -</pre> +```xml +<rect x="10" y="10" width="30" height="30"/> +<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> +``` -<dl> - <dt><code>x</code></dt> - <dd>Position du coin supérieur gauche du rectangle sur l'axe horizontal.</dd> - <dt><code>y</code></dt> - <dd>Position du coin supérieur gauche sur l'axe vertical.</dd> - <dt><code>width</code></dt> - <dd>Largeur du rectangle.</dd> - <dt><code>height</code></dt> - <dd>Hauteur du rectangle.</dd> - <dt><code>rx</code></dt> - <dd>Rayon x des coins du rectangle.</dd> - <dt><code>ry</code></dt> - <dd>Rayon y des coins du rectangle.</dd> -</dl> +- `x` + - : Position du coin supérieur gauche du rectangle sur l'axe horizontal. +- `y` + - : Position du coin supérieur gauche sur l'axe vertical. +- `width` + - : Largeur du rectangle. +- `height` + - : Hauteur du rectangle. +- `rx` + - : Rayon x des coins du rectangle. +- `ry` + - : Rayon y des coins du rectangle. -<h3 id="circle">Cercle</h3> +### Cercle -<p>L'élément <a href="/fr/docs/Web/SVG/Element/circle"><code><circle></code></a> permet de dessiner un cercle à l'écran. Seuls 3 attributs peuvent être définis pour cet élément.</p> +L'élément [`<circle>`](/fr/docs/Web/SVG/Element/circle) permet de dessiner un cercle à l'écran. Seuls 3 attributs peuvent être définis pour cet élément. -<pre class="brush:xml"> -<circle cx="25" cy="75" r="20"/> -</pre> +```xml +<circle cx="25" cy="75" r="20"/> +``` -<dl> - <dt><code>r</code></dt> - <dd>Rayon du cercle.</dd> - <dt><code>cx</code></dt> - <dd>Position du centre du cercle sur l'axe des abscisses.</dd> - <dt><code>cy</code></dt> - <dd>Position du centre du cercle sur l'axe des ordonnées.</dd> -</dl> +- `r` + - : Rayon du cercle. +- `cx` + - : Position du centre du cercle sur l'axe des abscisses. +- `cy` + - : Position du centre du cercle sur l'axe des ordonnées. -<h3 id="ellipses">Ellipse</h3> +### Ellipse -<p>L'élément <a href="/fr/docs/Web/SVG/Element/ellipse"><code><ellipse></code></a> permet de dessiner des ellipses, il s'agit d'une sorte de cercles, où l'on peut modifier les rayons x et y séparément l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe).</p> +L'élément [`<ellipse>`](/fr/docs/Web/SVG/Element/ellipse) permet de dessiner des ellipses, il s'agit d'une sorte de cercles, où l'on peut modifier les rayons x et y séparément l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe). -<pre class="brush:xml"> -<ellipse cx="75" cy="75" rx="20" ry="5"/> -</pre> +```xml +<ellipse cx="75" cy="75" rx="20" ry="5"/> +``` -<dl> - <dt><code>rx</code></dt> - <dd>Rayon x de l'ellipse.</dd> - <dt><code>ry</code></dt> - <dd>Rayon y de l'ellipse.</dd> - <dt><code>cx</code></dt> - <dd>Position du centre de l'ellipse sur l'axe des abscisses.</dd> - <dt><code>cy</code></dt> - <dd>Position du centre de l'ellipse sur l'axe des ordonnées.</dd> -</dl> +- `rx` + - : Rayon x de l'ellipse. +- `ry` + - : Rayon y de l'ellipse. +- `cx` + - : Position du centre de l'ellipse sur l'axe des abscisses. +- `cy` + - : Position du centre de l'ellipse sur l'axe des ordonnées. -<h3 id="line">Ligne</h3> +### Ligne -<p>L'élément SVG <a href="/fr/docs/Web/SVG/Element/line"><code><line></code></a> correspond à une portion de droite tracée entre 2 points.</p> +L'élément SVG [`<line>`](/fr/docs/Web/SVG/Element/line) correspond à une portion de droite tracée entre 2 points. -<pre class="brush:xml"> -<line x1="10" x2="50" y1="110" y2="150"/> -</pre> +```xml +<line x1="10" x2="50" y1="110" y2="150"/> +``` -<dl> - <dt><code>x1</code></dt> - <dd>Position horizontale du premier point.</dd> - <dt><code>x2</code></dt> - <dd>Position horizontale du deuxième point.</dd> - <dt><code>y1</code></dt> - <dd>Position verticale du premier point.</dd> - <dt><code>y2</code></dt> - <dd>Position verticale du deuxième point.</dd> -</dl> +- `x1` + - : Position horizontale du premier point. +- `x2` + - : Position horizontale du deuxième point. +- `y1` + - : Position verticale du premier point. +- `y2` + - : Position verticale du deuxième point. -<h3 id="polyline">Ligne brisée</h3> +### Ligne brisée -<p>Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément <a href="/fr/docs/Web/SVG/Element/polyline"><code><polyline></code></a> en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble des points :</p> +Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément [`<polyline>`](/fr/docs/Web/SVG/Element/polyline) en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble des points : -<pre class="brush:xml;"> -<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/> -</pre> +```xml +<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/> +``` -<dl> - <dt><code>points</code></dt> - <dd>Une liste de points, chaque paire de nombres (entiers positifs) correspondent aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par une virgule, un espace, un saut de ligne. Chaque point est séparé du suivant en utilisant un caractère qui n'est pas celui utilisé pour séparer les coordonnées. Exemple : points="100,10 190,78 160,198 40,198 10,78" ou points="100 10,190 78,160 198,40 198,10 78"</dd> -</dl> +- `points` + - : Une liste de points, chaque paire de nombres (entiers positifs) correspondent aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par une virgule, un espace, un saut de ligne. Chaque point est séparé du suivant en utilisant un caractère qui n'est pas celui utilisé pour séparer les coordonnées. Exemple : points="100,10 190,78 160,198 40,198 10,78" ou points="100 10,190 78,160 198,40 198,10 78" -<h3 id="polygon">Polygone</h3> - -<p>L'élément <a href="/fr/docs/Web/SVG/Element/polygon"><code><polygon></code></a> fonctionne de façon semblable à l'élément <code><polyline></code>. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée.</p> +### Polygone -<div class="note"> -<p><strong>Note :</strong> Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément <code><polygon></code>.</p> -</div> +L'élément [`<polygon>`](/fr/docs/Web/SVG/Element/polygon) fonctionne de façon semblable à l'élément `<polyline>`. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée. -<pre class="brush:xml;"> -<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/> -</pre> - -<dl> - <dt>points</dt> - <dd>Idem que l'attribut <code>points</code> de l'élément <code><polyline></code>.</dd> -</dl> - -<h3 id="path">Chemin</h3> - -<p>L'élément pour tracer les chemins, <a href="/fr/docs/Web/SVG/Tutorial/Paths"><code><path></code></a>, est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément <code><path></code>, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore.</p> - -<p>Pour cette raison, l'élément <code><path></code> fera l'objet du <a href="/fr/docs/Web/SVG/Tutorial/Paths">prochain chapitre</a> de ce tutoriel, mais pour le moment, nous allons uniquement voir comment définir cet élément.</p> +> **Note :** Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément `<polygon>`. -<pre class="brush:xml;"> -<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> -</pre> +```xml +<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/> +``` -<dl> - <dt><code>d</code></dt> - <dd>Un ensemble d'informations définissant le chemin à dessiner. Pour en savoir plus, consultez <a href="/fr/docs/Web/SVG/Tutorial/Paths">la section sur les chemins</a>.</dd> -</dl> +- points + - : Idem que l'attribut `points` de l'élément `<polyline>`. -<div>{{PreviousNext("Web/SVG/Tutorial/Positions","Web/SVG/Tutorial/Paths")}}</div> +### Chemin + +L'élément pour tracer les chemins, [`<path>`](/fr/docs/Web/SVG/Tutorial/Paths), est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément `<path>`, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore. + +Pour cette raison, l'élément `<path>` fera l'objet du [prochain chapitre](/fr/docs/Web/SVG/Tutorial/Paths) de ce tutoriel, mais pour le moment, nous allons uniquement voir comment définir cet élément. + +```xml +<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> +``` + +- `d` + - : Un ensemble d'informations définissant le chemin à dessiner. Pour en savoir plus, consultez [la section sur les chemins](/fr/docs/Web/SVG/Tutorial/Paths). + +{{PreviousNext("Web/SVG/Tutorial/Positions","Web/SVG/Tutorial/Paths")}} diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.md b/files/fr/web/svg/tutorial/basic_transformations/index.md index 900c050801..be91adc27b 100644 --- a/files/fr/web/svg/tutorial/basic_transformations/index.md +++ b/files/fr/web/svg/tutorial/basic_transformations/index.md @@ -8,107 +8,117 @@ tags: translation_of: Web/SVG/Tutorial/Basic_Transformations original_slug: Web/SVG/Tutoriel/Transformations_de_base --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }} -<p>Maintenant, nous sommes prêts à tordre nos images dans tous les sens. Mais avant toute chose, il faut vous présenter l'élément <code><g></code>. Cet assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple :</p> +Maintenant, nous sommes prêts à tordre nos images dans tous les sens. Mais avant toute chose, il faut vous présenter l'élément `<g>`. Cet assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple : -<h2>Exemple</h2> +## Exemple -<pre class="brush: html"><svg width="30" height="10"> - <g fill="red"> - <rect x="0" y="0" width="10" height="10" /> - <rect x="20" y="0" width="10" height="10" /> - </g> -</svg></pre> +```html +<svg width="30" height="10"> + <g fill="red"> + <rect x="0" y="0" width="10" height="10" /> + <rect x="20" y="0" width="10" height="10" /> + </g> +</svg> +``` -<p>{{ EmbedLiveSample('exemple', '30', '10') }}</p> +{{ EmbedLiveSample('exemple', '30', '10') }} -<p>Toutes les transformations suivantes sont résumées dans l'attribut <code>transform</code> de l'élément. Les transformations peuvent être mises les unes à la suite des autres, tout simplement en les écrivant toutes dans cet attribut, séparées par des espaces.</p> +Toutes les transformations suivantes sont résumées dans l'attribut `transform` de l'élément. Les transformations peuvent être mises les unes à la suite des autres, tout simplement en les écrivant toutes dans cet attribut, séparées par des espaces. -<h2 id="Translation">Translation</h2> +## Translation -<p>Il peut être nécessaire de décaler un élément, même s'il est possible de définir sa position dans ses attributs. Pour ce faire, la fonction <code>translate()</code> est parfaite.</p> +Il peut être nécessaire de décaler un élément, même s'il est possible de définir sa position dans ses attributs. Pour ce faire, la fonction `translate()` est parfaite. -<pre class="brush: html"><svg width="40" height="50" style="background-color:#bff;"> - <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> -</svg></pre> +```html +<svg width="40" height="50" style="background-color:#bff;"> + <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> +</svg> +``` -<p>Cet exemple a pour résultat un rectangle, qui est déplacé du point (0,0) au point (30,40).</p> +Cet exemple a pour résultat un rectangle, qui est déplacé du point (0,0) au point (30,40). -<p>{{ EmbedLiveSample('Translation', '40', '50') }}</p> +{{ EmbedLiveSample('Translation', '40', '50') }} -<p>Si la deuxième valeur de <code>translate()</code> n'est pas définie, elle sera pas défaut assignée à 0.</p> +Si la deuxième valeur de `translate()` n'est pas définie, elle sera pas défaut assignée à 0. -<h2 id="Rotation">Rotation</h2> +## Rotation -<p>Appliquer une rotation à un élément est assez simple : il suffit d'utiliser la fonction <code>rotate()</code>.</p> +Appliquer une rotation à un élément est assez simple : il suffit d'utiliser la fonction `rotate()`. -<pre class="brush: html"><svg width="31" height="31"> - <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> -</svg></pre> +```html +<svg width="31" height="31"> + <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> +</svg> +``` -<p>Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés.</p> +Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés. -<p>{{ EmbedLiveSample('Rotation', '31', '31') }}</p> +{{ EmbedLiveSample('Rotation', '31', '31') }} -<h2 id="Transformations_multiples">Transformations multiples</h2> +## Transformations multiples -<p>Les transformations peuvent être concaténées, séparées par des espaces. Par exemple, <code>translate()</code> et <code>rotate()</code> sont couramment utilisées ensemble:</p> +Les transformations peuvent être concaténées, séparées par des espaces. Par exemple, `translate()` et `rotate()` sont couramment utilisées ensemble: -<pre class="brush: html"><svg width="40" height="50" style="background-color:#bff;"> - <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> -</svg></pre> +```html +<svg width="40" height="50" style="background-color:#bff;"> + <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> +</svg> +``` -<p>{{ EmbedLiveSample('Transformations_multiples', '40', '50') }}</p> +{{ EmbedLiveSample('Transformations_multiples', '40', '50') }} -<p>Cet exemple montre un carré déplacé et pivoté de 45 degrés.</p> +Cet exemple montre un carré déplacé et pivoté de 45 degrés. -<h2 id="Déformation">Déformation</h2> +## Déformation -<p>Pour transformer un rectangle en un losange, vous pouvez utiliser les fonctions <code>skewX()</code> et <code>skewY()</code>. Chacun prend pour attribut un angle qui détermine le biais de l'élément transformé.</p> +Pour transformer un rectangle en un losange, vous pouvez utiliser les fonctions `skewX()` et `skewY()`. Chacun prend pour attribut un angle qui détermine le biais de l'élément transformé. -<h2 id="Agrandissement_et_réduction">Agrandissement et réduction</h2> +## Agrandissement et réduction -<p><code>scale()</code> modifie la taille d'un élément. Cette fonction prend en paramètre 2 valeurs de transformation, la première pour celle des X et la deuxième pour celle des Y. Ces valeurs sont écrites sous forme de ratio : 0.5 correspond à une réduction à 50%, 1.5 à une augmentation de 50%. Attention, c'est le système de chiffre anglo-saxon qui est ici utilisé, il faut donc déclarer un nombre réel en utilisant un point et non une virgule. <em>Si la deuxième valeur n'est pas déclarée, elle est considérée par défaut comme égale à la première.</em></p> +`scale()` modifie la taille d'un élément. Cette fonction prend en paramètre 2 valeurs de transformation, la première pour celle des X et la deuxième pour celle des Y. Ces valeurs sont écrites sous forme de ratio : 0.5 correspond à une réduction à 50%, 1.5 à une augmentation de 50%. Attention, c'est le système de chiffre anglo-saxon qui est ici utilisé, il faut donc déclarer un nombre réel en utilisant un point et non une virgule. _Si la deuxième valeur n'est pas déclarée, elle est considérée par défaut comme égale à la première._ -<h2 id="Transformations_complexes_avec_matrice">Transformations complexes avec matrice</h2> +## Transformations complexes avec matrice -<p>Toutes les transformations détaillées ci-dessous peuvent être décrites dans une matrice de passage 3 par 3. Il est alors possible de combiner plusieurs transformations en appliquant directement la matrice de transformation <code>matrix(a, b, c, d, e, f)</code> qui mappe les coordonnées d'un système de coordonnées précédent en un nouveau système de coordonnées par</p> +Toutes les transformations détaillées ci-dessous peuvent être décrites dans une matrice de passage 3 par 3. Il est alors possible de combiner plusieurs transformations en appliquant directement la matrice de transformation `matrix(a, b, c, d, e, f)` qui mappe les coordonnées d'un système de coordonnées précédent en un nouveau système de coordonnées par -<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p> +<math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x*{\mathrm{prevCoordSys}} = a x*{\mathrm{newCoordSys}} + c y*{\mathrm{newCoordSys}} + e \\ y*{\mathrm{prevCoordSys}} = b x*{\mathrm{newCoordSys}} + d y*{\mathrm{newCoordSys}} + f \end{matrix} \right.</annotation></semantics></math> -<p>Voici un <a href="/fr/docs/Web/SVG/Attribute/transform#General_Transformation">exemple concret sur la documentation de transformation SVG</a>. Pour plus de renseignements, veuillez vous référer à <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">la page de recommandation SVG</a>.</p> +Voici un [exemple concret sur la documentation de transformation SVG](/fr/docs/Web/SVG/Attribute/transform#General_Transformation). Pour plus de renseignements, veuillez vous référer à [la page de recommandation SVG](http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined). -<h2 id="Effets_sur_les_systèmes_de_coordonnées">Effets sur les systèmes de coordonnées</h2> +## Effets sur les systèmes de coordonnées -<p>Quand vous utilisez une transformation, vous définissez un nouveau système de coordonnées dans l'élément que vous transformez. Cela signifie que vous appliquez la transformation à tous les attributs de l'élément transformé et donc que cet élément n'est plus dans une carte de pixel d'échelle 1:1. Cette carte est également déplacée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée.</p> +Quand vous utilisez une transformation, vous définissez un nouveau système de coordonnées dans l'élément que vous transformez. Cela signifie que vous appliquez la transformation à tous les attributs de l'élément transformé et donc que cet élément n'est plus dans une carte de pixel d'échelle 1:1. Cette carte est également déplacée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée. -<pre class="brush: html"><svg width="100" height="100"> - <g transform="scale(2)"> - <rect width="50" height="50" /> - </g> -</svg> -</pre> +```html +<svg width="100" height="100"> + <g transform="scale(2)"> + <rect width="50" height="50" /> + </g> +</svg> +``` -<p>Cet exemple aura pour résultat un rectangle de 100 par 100 pixels. Les effets les plus étonnants apparaissent lorsque vous utilisez des attributs tels que <code>userSpaceOnUse</code>.</p> +Cet exemple aura pour résultat un rectangle de 100 par 100 pixels. Les effets les plus étonnants apparaissent lorsque vous utilisez des attributs tels que `userSpaceOnUse`. -<p>{{ EmbedLiveSample('Effets_sur_les_systèmes_de_coordonnées', '100', '100') }}</p> +{{ EmbedLiveSample('Effets_sur_les_systèmes_de_coordonnées', '100', '100') }} -<h2 id="Embarquer_du_SVG_dans_SVG">Embarquer du SVG dans SVG</h2> +## Embarquer du SVG dans SVG -<p>Par opposition au HTML, le SVG peut embarquer d'autres éléments <code>svg</code> déclarés de manière tout à fait transparente. De cette façon, vous pouvez très simplement créer de nouveaux systèmes de coordonnées en utilisant <code>viewBox</code>, <code>width</code> et <code>height</code> de l'élément <code>svg</code>.</p> +Par opposition au HTML, le SVG peut embarquer d'autres éléments `svg` déclarés de manière tout à fait transparente. De cette façon, vous pouvez très simplement créer de nouveaux systèmes de coordonnées en utilisant `viewBox`, `width` et `height` de l'élément `svg`. -<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> - <svg width="100" height="100" viewBox="0 0 50 50"> - <rect width="50" height="50" /> - </svg> -</svg> -</pre> +```html +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <svg width="100" height="100" viewBox="0 0 50 50"> + <rect width="50" height="50" /> + </svg> +</svg> +``` -<p>Cet exemple a le même effet que celui vu précédemment, soit un rectangle deux fois plus grand que ce qu'il est défini.</p> +Cet exemple a le même effet que celui vu précédemment, soit un rectangle deux fois plus grand que ce qu'il est défini. -<p>{{ EmbedLiveSample('Embarquer_du_SVG_dans_SVG', '100', '100') }}</p> +{{ EmbedLiveSample('Embarquer_du_SVG_dans_SVG', '100', '100') }} -<p>{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }} -<p>Interwiki Languages Links</p> +Interwiki Languages Links diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.md b/files/fr/web/svg/tutorial/clipping_and_masking/index.md index 868fa20e19..905c2c5eaf 100644 --- a/files/fr/web/svg/tutorial/clipping_and_masking/index.md +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.md @@ -7,86 +7,90 @@ tags: translation_of: Web/SVG/Tutorial/Clipping_and_masking original_slug: Web/SVG/Tutoriel/Découpages_et_masquages --- -<p>{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}</p> +{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }} -<p>Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle.</p> +Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle. -<p>Le <strong>découpage</strong> (<em>clipping</em>) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien.</p> +Le **découpage** (_clipping_) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien. -<p>D'un autre côté, le <strong>masquage</strong> (<em>masking</em>) permet plus de souplesse en prenant en compte la transparence et les niveaux de gris.</p> +D'un autre côté, le **masquage** (_masking_) permet plus de souplesse en prenant en compte la transparence et les niveaux de gris. -<h3 id="Découper">Découper</h3> +### Découper -<p>Pour créer un demi-cercle, on définit d'abord un élément <code>circle</code>:</p> +Pour créer un demi-cercle, on définit d'abord un élément `circle`: -<pre class="brush: html"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <clipPath id="cut-off-bottom"> - <rect x="0" y="0" width="200" height="100" /> - </clipPath> - </defs> +```html +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <clipPath id="cut-off-bottom"> + <rect x="0" y="0" width="200" height="100" /> + </clipPath> + </defs> - <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> -</svg> -</pre> + <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> +</svg> +``` -<p>On dessine ici un cercle d'un rayon de 100 pixels, dont le centre est placé au point (100,100). L'attribut <code>clip-path</code> fait référence à l'élément <code>clipPath</code> définit plus haut, qui est généralement placé dans la section <code>defs</code>.</p> +On dessine ici un cercle d'un rayon de 100 pixels, dont le centre est placé au point (100,100). L'attribut `clip-path` fait référence à l'élément `clipPath` définit plus haut, qui est généralement placé dans la section `defs`. -<p>L'élément <code>clipPath</code> contient un simple rectangle qui, seul, remplirait en noir la moitié supérieur du canvas. Le rectangle ne sera pas dessiné, parce qu'il est définit dans un élément <code>clipPath</code>, il a pour effet de déterminer quels pixels seront affichés ou non dans le dessin final. Le rectangle ne couvrant que la partie supérieure du cercle, la partie inférieure du cercle ne sera pas affichée:</p> +L'élément `clipPath` contient un simple rectangle qui, seul, remplirait en noir la moitié supérieur du canvas. Le rectangle ne sera pas dessiné, parce qu'il est définit dans un élément `clipPath`, il a pour effet de déterminer quels pixels seront affichés ou non dans le dessin final. Le rectangle ne couvrant que la partie supérieure du cercle, la partie inférieure du cercle ne sera pas affichée: -<p>{{ EmbedLiveSample('Découper','240','240','/files/3224/clipdemo.png') }}</p> +{{ EmbedLiveSample('Découper','240','240','/files/3224/clipdemo.png') }} -<p>Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément <code>path</code>. Pour le découpage, chaque forme à l'intérieur de <code>clipPath</code> est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans <code>clipPath</code> aura pour effet de masquer le contenu. La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.</p> +Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément `path`. Pour le découpage, chaque forme à l'intérieur de `clipPath` est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans `clipPath` aura pour effet de masquer le contenu. La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes. -<h3 id="Masquage">Masquage</h3> +### Masquage -<p>Le masquage, contrairement au découpage permet de travailler avec des gradients. Si vous voulez qu'un élément disparaisse progressivement, vous y parviendrez en utiilisant des masques.</p> +Le masquage, contrairement au découpage permet de travailler avec des gradients. Si vous voulez qu'un élément disparaisse progressivement, vous y parviendrez en utiilisant des masques. -<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <linearGradient id="Gradient"> - <stop offset="0" stop-color="white" stop-opacity="0" /> - <stop offset="1" stop-color="white" stop-opacity="1" /> - </linearGradient> - <mask id="Mask"> - <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> - </mask> - </defs> +```html +<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="Gradient"> + <stop offset="0" stop-color="white" stop-opacity="0" /> + <stop offset="1" stop-color="white" stop-opacity="1" /> + </linearGradient> + <mask id="Mask"> + <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" /> + </mask> + </defs> - <rect x="0" y="0" width="200" height="200" fill="green" /> - <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /> -</svg> -</pre> + <rect x="0" y="0" width="200" height="200" fill="green" /> + <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /> +</svg> +``` -<p>Vous pouvez voir qu'on a définit un rectangle vert en-dessous d'un rectangle rouge. Ce dernier a un attribut <code>mask</code> qui pointe vers le masque situé dans les définitions. Le contenu du masque est un simple élément <code>rect</code>, qui est rempli d'un gradient transparent-vers-blanc. Les pixels du rectangle rouge héritent de la valeur alpha (la transparence) du contenu du masque, si bien que le rectangle rouge est progressivement masqué et laisse voir le rectangle vert en-dessous:</p> +Vous pouvez voir qu'on a définit un rectangle vert en-dessous d'un rectangle rouge. Ce dernier a un attribut `mask` qui pointe vers le masque situé dans les définitions. Le contenu du masque est un simple élément `rect`, qui est rempli d'un gradient transparent-vers-blanc. Les pixels du rectangle rouge héritent de la valeur alpha (la transparence) du contenu du masque, si bien que le rectangle rouge est progressivement masqué et laisse voir le rectangle vert en-dessous: -<p>{{ EmbedLiveSample('Masquage','240','240','/files/3234/maskdemo.png') }}</p> +{{ EmbedLiveSample('Masquage','240','240','/files/3234/maskdemo.png') }} -<h3 id="Transparence_avec_opacity">Transparence avec <code>opacity</code></h3> +### Transparence avec `opacity` -<p>Pour définir la transparence d'un élément entier, on peut utiliser l'attribut <code>opacity</code>:</p> +Pour définir la transparence d'un élément entier, on peut utiliser l'attribut `opacity`: -<pre class="brush: xml"><rect x="0" y="0" width="100" height="100" opacity=".5" /> -</pre> +```xml +<rect x="0" y="0" width="100" height="100" opacity=".5" /> +``` -<p>Le rectangle ci-dessus sera dessiné semi-transparent.</p> +Le rectangle ci-dessus sera dessiné semi-transparent. -<p>On peut également utiliser deux attributs distincts pour le remplissage et le contour: <code>fill-opacity</code> et <code>stroke-opacity</code>, pour contrôler l'opacité des propriétés <code>fill</code> et <code>stroke</code> respecitvement. Notez que le contour est dessiné au-dessus du remplissage. Ainsi, si vous rendez le contour semi-transparent et non le remplissage, celui-ci sera visible à travers le contour:</p> +On peut également utiliser deux attributs distincts pour le remplissage et le contour: `fill-opacity` et `stroke-opacity`, pour contrôler l'opacité des propriétés `fill` et `stroke` respecitvement. Notez que le contour est dessiné au-dessus du remplissage. Ainsi, si vous rendez le contour semi-transparent et non le remplissage, celui-ci sera visible à travers le contour: -<pre class="brush: html"><svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <rect x="0" y="0" width="200" height="200" fill="blue" /> - <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> -</svg> -</pre> +```html +<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="200" height="200" fill="blue" /> + <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> +</svg> +``` -<p>{{ EmbedLiveSample('Transparence_avec_opacity','240','240','/files/3231/opacitydemo.png') }}</p> +{{ EmbedLiveSample('Transparence_avec_opacity','240','240','/files/3231/opacitydemo.png') }} -<p>Vous pouvez voir dans cet exemple un cercle rouge sur un fond bleu. Le contour jaune a une opacité de 50%, si bien qu'on se retrouve avec une partie du remplissage en orange.</p> +Vous pouvez voir dans cet exemple un cercle rouge sur un fond bleu. Le contour jaune a une opacité de 50%, si bien qu'on se retrouve avec une partie du remplissage en orange. -<h2 id="Utilisation_de_techniques_CSS_bien_connues">Utilisation de techniques CSS bien connues</h2> +## Utilisation de techniques CSS bien connues -<p>Un des outils les plus puissants parmis l'arsenal du développeur web est <code>display: none</code>. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que <code>visibility</code> et <code>clip</code> définis en CSS 2. Pour ré-afficher un élément précédemment caché avec <code>display: none</code> il est important de savoir que la valeur initiale des éléments SVG est <code>inline</code>. </p> +Un des outils les plus puissants parmis l'arsenal du développeur web est `display: none`. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que `visibility` et `clip` définis en CSS 2. Pour ré-afficher un élément précédemment caché avec `display: none` il est important de savoir que la valeur initiale des éléments SVG est `inline`. -<p>{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}</p> +{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }} -<p>{{ languages( { "en": "en/SVG/Tutorial/Clipping_and_masking" } ) }}</p> +{{ languages( { "en": "en/SVG/Tutorial/Clipping_and_masking" } ) }} diff --git a/files/fr/web/svg/tutorial/fills_and_strokes/index.md b/files/fr/web/svg/tutorial/fills_and_strokes/index.md index b0b44168f7..90838ae890 100644 --- a/files/fr/web/svg/tutorial/fills_and_strokes/index.md +++ b/files/fr/web/svg/tutorial/fills_and_strokes/index.md @@ -7,176 +7,179 @@ tags: translation_of: Web/SVG/Tutorial/Fills_and_Strokes original_slug: Web/SVG/Tutoriel/Fills_and_Strokes --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }} -<p>Il y a différentes manières de colorer des formes: utiliser différents attributs SVG sur l'objet, utiliser du {{glossary("CSS")}} en ligne, une section CSS ou un fichier CSS externe. La plupart des {{glossary("SVG")}} que vous trouverez sur le Web utilisent du CSS en ligne, mais il y a des avantages et inconvénients pour chaque manière.</p> +Il y a différentes manières de colorer des formes: utiliser différents attributs SVG sur l'objet, utiliser du {{glossary("CSS")}} en ligne, une section CSS ou un fichier CSS externe. La plupart des {{glossary("SVG")}} que vous trouverez sur le Web utilisent du CSS en ligne, mais il y a des avantages et inconvénients pour chaque manière. -<h2 id="Fill_and_Stroke_Attributes">Attributs Fill et Stroke</h2> +## Attributs Fill et Stroke -<h3 id="Painting">Colorer</h3> +### Colorer -<p>La coloration peut être faite en définissant deux attributs sur l'objet: <code>fill</code> et <code>stroke</code>. <code>Fill</code> définit la couleur de remplissage et <code>stroke</code> définit la couleur de la bordure. Vous pouvez utiliser la même convention de nommage des couleurs que CSS, que ce soit les noms (comme <em>red</em>), les valeurs rgb (comme <em>rgb(255,0,0)</em>), les valeurs hexadécimales, rgba, etc.</p> +La coloration peut être faite en définissant deux attributs sur l'objet: `fill` et `stroke`. `Fill` définit la couleur de remplissage et `stroke` définit la couleur de la bordure. Vous pouvez utiliser la même convention de nommage des couleurs que CSS, que ce soit les noms (comme _red_), les valeurs rgb (comme _rgb(255,0,0)_), les valeurs hexadécimales, rgba, etc. -<pre class="brush:xml;"><rect x="10" y="10" width="100" height="100" +```xml +<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" - stroke-opacity="0.8" fill-opacity="0.5"/> -</pre> + stroke-opacity="0.8" fill-opacity="0.5"/> +``` -<p>De plus, vous pouvez spécifier l'opacité de <code>fill</code> et/ou <code>stroke</code>. Celle-ci est contrôlé par les attributs <code>fill-opacity</code> et <code>stroke-opacity</code> respectivement.</p> +De plus, vous pouvez spécifier l'opacité de `fill` et/ou `stroke`. Celle-ci est contrôlé par les attributs `fill-opacity` et `stroke-opacity` respectivement. -<div class="note"> - <p><strong>Note :</strong> Dans Firefox 3+, les valeurs rgba sont autorisés, ce qui donne le même effet qu'utiliser les attributs d'opacité. En revanche, pour être compatible avec les autres navigateurs, il est souvent préférable de spécifier fill/stoke-opacity séparemment. Si vous spécifiez à la fois une valeur rgba et fill/stoke-opacity, les deux seront appliquées.</p> -</div> +> **Note :** Dans Firefox 3+, les valeurs rgba sont autorisés, ce qui donne le même effet qu'utiliser les attributs d'opacité. En revanche, pour être compatible avec les autres navigateurs, il est souvent préférable de spécifier fill/stoke-opacity séparemment. Si vous spécifiez à la fois une valeur rgba et fill/stoke-opacity, les deux seront appliquées. -<h3 id="Stroke">Options du contour</h3> +### Options du contour -<p>Outre les propriétés de couleur, il existe quelques attributs additionnels pour contrôler la manière dont le contour est dessiné.</p> +Outre les propriétés de couleur, il existe quelques attributs additionnels pour contrôler la manière dont le contour est dessiné. -<h4 id="stroke-width">stroke-width</h4> +#### stroke-width -<p>La propriété <code>stroke-width</code> définit la taille du contour. La ligne du contour est centrée autour du remplissage (si le contour vaut 10, 5 pixels du contour chevauchent le remplissage).</p> +La propriété `stroke-width` définit la taille du contour. La ligne du contour est centrée autour du remplissage (si le contour vaut 10, 5 pixels du contour chevauchent le remplissage). -<h4 id="stroke-linecap">stroke-linecap</h4> +#### stroke-linecap -<p>Le second attribut affectant le contour est la propriété <code>stroke-linecap</code>. Elle contrôle la forme des fins de ligne. Dans l'image ci-dessous, le chemin est dessiné en rose et le contour en noir.</p> +Le second attribut affectant le contour est la propriété `stroke-linecap`. Elle contrôle la forme des fins de ligne. Dans l'image ci-dessous, le chemin est dessiné en rose et le contour en noir. -<p><img alt="" src="svg_stroke_linecap_example.png"></p> + -<pre class="brush:html;"><svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> - <line x1="40" x2="120" y1="20" y2="20" - stroke-linecap="butt" stroke="black" stroke-width="20"/> - <line x1="40" x2="120" y1="60" y2="60" - stroke-linecap="square" stroke="black" stroke-width="20"/> - <line x1="40" x2="120" y1="100" y2="100" - stroke-linecap="round" stroke="black" stroke-width="20"/> -</svg></pre> +```html +<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <line x1="40" x2="120" y1="20" y2="20" + stroke-linecap="butt" stroke="black" stroke-width="20"/> + <line x1="40" x2="120" y1="60" y2="60" + stroke-linecap="square" stroke="black" stroke-width="20"/> + <line x1="40" x2="120" y1="100" y2="100" + stroke-linecap="round" stroke="black" stroke-width="20"/> +</svg> +``` -<p>{{ EmbedLiveSample('stroke-linecap', '220', '150') }}</p> +{{ EmbedLiveSample('stroke-linecap', '220', '150') }} -<p>Il y a trois valeurs possibles pour <code>stroke-linecap</code>:</p> +Il y a trois valeurs possibles pour `stroke-linecap`: -<ul> - <li><code>butt</code> (valeur par défaut) ferme la ligne avec un bord droit, à 90 degrés à l'endroit où la ligne se termine.</li> - <li><code>square</code> a la même apparence mais termine au delà de la ligne. La distance ajoutée est la moitié de <code>stroke-width</code>.</li> - <li><code>round</code> produit un effet arrondi à la fin du trait. La rayon de cette courbe est également contrôlé par <code>stroke-width</code>.</li> -</ul> +- `butt` (valeur par défaut) ferme la ligne avec un bord droit, à 90 degrés à l'endroit où la ligne se termine. +- `square` a la même apparence mais termine au delà de la ligne. La distance ajoutée est la moitié de `stroke-width`. +- `round` produit un effet arrondi à la fin du trait. La rayon de cette courbe est également contrôlé par `stroke-width`. -<h4 id="stroke-linejoin">stroke-linejoin</h4> +#### stroke-linejoin -<p>La propriété <code>stroke-linejoin</code> permet de contrôler la manière de dessiner la liaison entre deux segments de ligne.</p> +La propriété `stroke-linejoin` permet de contrôler la manière de dessiner la liaison entre deux segments de ligne. -<p><img alt="" src="svg_stroke_linejoin_example.png"></p> + -<pre class="brush:html;"><svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> - <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" - stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> +```html +<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" + stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> - <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" - stroke-linecap="round" fill="none" stroke-linejoin="round"/> + <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" + stroke-linecap="round" fill="none" stroke-linejoin="round"/> - <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" - stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> -</svg></pre> + <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" + stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> +</svg> +``` -<p>{{ EmbedLiveSample('stroke-linejoin', '220', '150') }}</p> +{{ EmbedLiveSample('stroke-linejoin', '220', '150') }} -<p>Chacune des ces polylignes est composée de deux segments de lignes. La liaison entre les deux est contrôlée par l'attribut <code>stroke-linejoin</code>. Il y a trois valeurs possibles pour cet attribut:</p> +Chacune des ces polylignes est composée de deux segments de lignes. La liaison entre les deux est contrôlée par l'attribut `stroke-linejoin`. Il y a trois valeurs possibles pour cet attribut: -<ul> - <li><code>miter</code> (valeur par défaut) prolonge légèrement la ligne au-delà de sa largeur normale pour créer un coin carré, de telle sorte qu'il n'y ait qu'un seul angle.</li> - <li><code>round</code> crée un coin arrondi.</li> - <li><code>bevel</code> crée un nouvel angle pour faciliter la transition entre les deux segments.</li> -</ul> +- `miter` (valeur par défaut) prolonge légèrement la ligne au-delà de sa largeur normale pour créer un coin carré, de telle sorte qu'il n'y ait qu'un seul angle. +- `round` crée un coin arrondi. +- `bevel` crée un nouvel angle pour faciliter la transition entre les deux segments. -<h4 id="stroke-dasharray">stroke-dasharray</h4> +#### stroke-dasharray -<p>Finalement, vous pouvez également créer des lignes pointillées en spécifiant l'attribut <code>stroke-dasharray</code>.</p> +Finalement, vous pouvez également créer des lignes pointillées en spécifiant l'attribut `stroke-dasharray`. -<p><img alt="" src="svg_stroke_dasharray_example.png"></p> + -<pre class="brush:html;"><svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> - <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" - stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> - <path d="M 10 75 L 190 75" stroke="red" - stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> -</svg></pre> +```html +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" + stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> + <path d="M 10 75 L 190 75" stroke="red" + stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> +</svg> +``` -<p>{{ EmbedLiveSample('stroke-dasharray', '220', '150') }}</p> +{{ EmbedLiveSample('stroke-dasharray', '220', '150') }} -<p>L'attribut <code>stroke-dasharray</code> prend une série de nombres séparés par une virgule en argument. </p> +L'attribut `stroke-dasharray` prend une série de nombres séparés par une virgule en argument. -<div class="note"> - <p><strong>Note :</strong> Contrairement aux paths, ces nombres <strong><em>doivent</em></strong> être séparés par des virgules (les espaces sont ignorés).</p> -</div> +> **Note :** Contrairement aux paths, ces nombres **_doivent_** être séparés par des virgules (les espaces sont ignorés). -<p>Le premier nombre spécifie la distance du trait et le second la distance de l'espace. Dans l'exemple précédent, la ligne rouge commence par un trait de 5 suivit d'un espace de 5 (<code>5,5</code>), motif qui se répète sur le reste de la ligne. Vous pouvez spécifier davantage de nombres pour créer un motif de pointillés plus complexe. Pour la ligne noire on a spécifié trois nombres (<code>5,10,5</code>), ce qui a pour effet d'alterner le motif: (5 trait, 10 espace, 5 trait), (5 espace, 10 trait, 5 espace), etc.</p> +Le premier nombre spécifie la distance du trait et le second la distance de l'espace. Dans l'exemple précédent, la ligne rouge commence par un trait de 5 suivit d'un espace de 5 (`5,5`), motif qui se répète sur le reste de la ligne. Vous pouvez spécifier davantage de nombres pour créer un motif de pointillés plus complexe. Pour la ligne noire on a spécifié trois nombres (`5,10,5`), ce qui a pour effet d'alterner le motif: (5 trait, 10 espace, 5 trait), (5 espace, 10 trait, 5 espace), etc. -<h4 id="Autres">Autres</h4> +#### Autres -<p>Il existe d'autres propriétés disponibles:</p> +Il existe d'autres propriétés disponibles: -<ul> - <li><code><a href="/fr/docs/Web/SVG/Attribute/fill-rule">fill-rule</a></code>, spécifie la règle de remplissage pour les formes où des chemins se chevauchent.</li> - <li><code><a href="/fr/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a></code>, détermine à partir de quel angle une liaison de segment de type <code>miter</code> sera affichée en <code>bevel</code>.</li> - <li><code><a href="/fr/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a></code>, définit à partir d'où commencer les pointilliés sur la ligne.</li> -</ul> +- [`fill-rule`](/fr/docs/Web/SVG/Attribute/fill-rule), spécifie la règle de remplissage pour les formes où des chemins se chevauchent. +- [`stroke-miterlimit`](/fr/docs/Web/SVG/Attribute/stroke-miterlimit), détermine à partir de quel angle une liaison de segment de type `miter` sera affichée en `bevel`. +- [`stroke-dashoffset`](/fr/docs/Web/SVG/Attribute/stroke-dashoffset), définit à partir d'où commencer les pointilliés sur la ligne. -<h2 id="Using_CSS">Utiliser CSS</h2> +## Utiliser CSS -<p>En plus de définir des attributs sur des objets, vous pouvez également utiliser CSS pour styliser les remplissages et les contours. Tous les attributs ne peuvent pas être définis via CSS. Ceux qui traitent le remplissage et le contour le sont généralement, <code>fill</code>, <code>stroke</code>, <code>stroke-dasharray</code>, etc... peuvent donc être définis de cette manière. Les attributs tels que <code>width</code>, <code>height</code>, ou les commandes des paths, ne peuvent pas être définis par CSS. Le plus simple est de tester pour découvrir ce qui est disponible et ce qui ne l'est pas.</p> +En plus de définir des attributs sur des objets, vous pouvez également utiliser CSS pour styliser les remplissages et les contours. Tous les attributs ne peuvent pas être définis via CSS. Ceux qui traitent le remplissage et le contour le sont généralement, `fill`, `stroke`, `stroke-dasharray`, etc... peuvent donc être définis de cette manière. Les attributs tels que `width`, `height`, ou les commandes des paths, ne peuvent pas être définis par CSS. Le plus simple est de tester pour découvrir ce qui est disponible et ce qui ne l'est pas. -<div class="note"> - <p><strong>Note :</strong> La <a href="http://www.w3.org/TR/SVG/propidx.html">spécification SVG</a> décide strictement entre les attributs qui sont des <em>propriétés</em> et les autres. Les premiers peuvent être modifiés avec CSS, les derniers non.</p> -</div> +> **Note :** La [spécification SVG](http://www.w3.org/TR/SVG/propidx.html) décide strictement entre les attributs qui sont des _propriétés_ et les autres. Les premiers peuvent être modifiés avec CSS, les derniers non. -<h4 id="En_ligne">En ligne</h4> +#### En ligne -<p>CSS peut être inséré en ligne avec l'élément via l'attribut <code>style</code>:</p> +CSS peut être inséré en ligne avec l'élément via l'attribut `style`: -<pre class="brush:xml;"> <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> -</pre> +```xml + <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> +``` -<h4 id="Dans_un_section_style">Dans un section style</h4> +#### Dans un section style -<p>Sinon, il peut être déplacé vers une section <code>style</code>. Au lieu de l'insérer dans une section <code><head></code> comme vous le feriez en HTML, on la place dans la zone <a href="/fr/SVG/Element/defs" title="en/SVG/Element/defs"><code><defs></code></a> du SVG. <code><defs></code> (abbréviation de definitions) est l'endroit où vous placez les éléments qui n'apparaissent pas dans le SVG directement, mais qui sont utilisés par les autres éléments.</p> +Sinon, il peut être déplacé vers une section `style`. Au lieu de l'insérer dans une section `<head>` comme vous le feriez en HTML, on la place dans la zone [`<defs>`](/fr/SVG/Element/defs "en/SVG/Element/defs") du SVG. `<defs>` (abbréviation de definitions) est l'endroit où vous placez les éléments qui n'apparaissent pas dans le SVG directement, mais qui sont utilisés par les autres éléments. -<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> -<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> - <defs> - <style type="text/css"><![CDATA[ +```xml +<?xml version="1.0" standalone="no"?> +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <style type="text/css"><![CDATA[ #MyRect { stroke: black; fill: red; } - ]]></style> - </defs> - <rect x="10" height="180" y="10" width="180" id="MyRect"/> -</svg></pre> + ]]></style> + </defs> + <rect x="10" height="180" y="10" width="180" id="MyRect"/> +</svg> +``` -<p>Déplacer les styles dans une zone comme ceci peut rendre les choses plus simples pour ajuster les propriétés d'un grand nombre d'éléments. Vous pouvez également utiliser les <strong>pseudo-classes comme hover</strong> pour créer des effets:</p> +Déplacer les styles dans une zone comme ceci peut rendre les choses plus simples pour ajuster les propriétés d'un grand nombre d'éléments. Vous pouvez également utiliser les **pseudo-classes comme hover** pour créer des effets: -<pre class="brush:css;"> #MyRect:hover { +```css + #MyRect:hover { stroke: black; fill: blue; } -</pre> +``` -<h4 id="Dans_un_fichier_externe">Dans un fichier externe</h4> +#### Dans un fichier externe -<p>Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la <a href="http://www.w3.org/TR/xml-stylesheet/">syntaxe XML pour les stylesheets</a>:</p> +Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la [syntaxe XML pour les stylesheets](http://www.w3.org/TR/xml-stylesheet/): -<pre class="brush:xml;"><?xml version="1.0" standalone="no"?> -<?xml-stylesheet type="text/css" href="style.css"?> +```xml +<?xml version="1.0" standalone="no"?> +<?xml-stylesheet type="text/css" href="style.css"?> -<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> - <rect height="10" width="10" id="MyRect"/> -</svg></pre> +<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect height="10" width="10" id="MyRect"/> +</svg> +``` -<p>où style.css ressemble à ça:</p> +où style.css ressemble à ça: -<pre class="brush:css;">#MyRect { +```css +#MyRect { fill: red; stroke: black; -}</pre> +} +``` -<p>{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }} diff --git a/files/fr/web/svg/tutorial/filter_effects/index.md b/files/fr/web/svg/tutorial/filter_effects/index.md index 4fb19b51a6..3878980a3e 100644 --- a/files/fr/web/svg/tutorial/filter_effects/index.md +++ b/files/fr/web/svg/tutorial/filter_effects/index.md @@ -7,132 +7,153 @@ tags: translation_of: Web/SVG/Tutorial/Filter_effects original_slug: Web/SVG/Tutoriel/filtres --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }} -<p>Dans certaines situations, les formes de base n'offrent pas la flexibilité nécessaire pour obtenir un certain effet. Par exemple, les ombres portées ne peuvent raisonnablement pas être crées avec des gradients. Les filtres sont des mécanismes SVG qui permettent de créer effets plus sophistiqués.</p> +Dans certaines situations, les formes de base n'offrent pas la flexibilité nécessaire pour obtenir un certain effet. Par exemple, les ombres portées ne peuvent raisonnablement pas être crées avec des gradients. Les filtres sont des mécanismes SVG qui permettent de créer effets plus sophistiqués. -<p>Un exemple de base consiste à ajouter un effet de flou au contenu du SVG. Bien que des effets de flou simples peuvent être obtenus avec les gradients, le filtre est nécessaire pour quelque chose de plus complexe.</p> +Un exemple de base consiste à ajouter un effet de flou au contenu du SVG. Bien que des effets de flou simples peuvent être obtenus avec les gradients, le filtre est nécessaire pour quelque chose de plus complexe. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>Les filtres sont définis par l'élément {{SVGElement('filter')}}, qui doit ête placé dans la section <code><defs></code> de votre fichier SVG. Entre les balises du filtre, se placent une liste de <em>primitives</em>, des opérations basiques qui s'ajoutent aux opérations précédentes (tel que du flou, de la lumière, etc). Pour appliquer le filtre créé sur un élément graphique, on définit l'attribut {{SVGAttr('filter')}}.</p> +Les filtres sont définis par l'élément {{SVGElement('filter')}}, qui doit ête placé dans la section `<defs>` de votre fichier SVG. Entre les balises du filtre, se placent une liste de _primitives_, des opérations basiques qui s'ajoutent aux opérations précédentes (tel que du flou, de la lumière, etc). Pour appliquer le filtre créé sur un élément graphique, on définit l'attribut {{SVGAttr('filter')}}. -<pre class="brush: html"><svg width="250" viewBox="0 0 200 85" - xmlns="http://www.w3.org/2000/svg" version="1.1"> - <defs> - <!-- Déclaration du filtre --> - <filter id="MyFilter" filterUnits="userSpaceOnUse" +```html +<svg width="250" viewBox="0 0 200 85" + xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <!-- Déclaration du filtre --> + <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" - width="200" height="120"> + width="200" height="120"> - <!-- offsetBlur --> - <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> - <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> + <!-- offsetBlur --> + <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> + <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> - <!-- litPaint --> - <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" + <!-- litPaint --> + <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" - result="specOut"> - <fePointLight x="-5000" y="-10000" z="20000"/> - </feSpecularLighting> - <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> - <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" - k1="0" k2="1" k3="1" k4="0" result="litPaint"/> - - <!-- fusionne offsetBlur + litPaint --> - <feMerge> - <feMergeNode in="offsetBlur"/> - <feMergeNode in="litPaint"/> - </feMerge> - </filter> - </defs> - - <!-- Éléments graphiques --> - <g filter="url(#MyFilter)"> - <path fill="none" stroke="#D90000" stroke-width="10" - d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> - <path fill="#D90000" - d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> - <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" > - <text x="52" y="52">SVG</text> - </g> - </g> -</svg> -</pre> - -<p>{{ EmbedLiveSample('Exemple', '100%', 120) }}</p> - -<h3 id="Étape_1">Étape 1</h3> - -<pre class="brush: html"><feGaussianBlur in="SourceAlpha" + result="specOut"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> + <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" + k1="0" k2="1" k3="1" k4="0" result="litPaint"/> + + <!-- fusionne offsetBlur + litPaint --> + <feMerge> + <feMergeNode in="offsetBlur"/> + <feMergeNode in="litPaint"/> + </feMerge> + </filter> + </defs> + + <!-- Éléments graphiques --> + <g filter="url(#MyFilter)"> + <path fill="none" stroke="#D90000" stroke-width="10" + d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> + <path fill="#D90000" + d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> + <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" > + <text x="52" y="52">SVG</text> + </g> + </g> +</svg> +``` + +{{ EmbedLiveSample('Exemple', '100%', 120) }} + +### Étape 1 + +```html +<feGaussianBlur in="SourceAlpha" stdDeviation="4" - result="blur"/></pre> + result="blur"/> +``` -<p>{{SVGElement('feGaussianBlur')}} prend en entrée (<code>in</code>) "SourceAlpha", qui est la couche alpha de l'élément source, applique un flou de 4, et stocke le résultat (<code>result</code>) dans un buffer temporaire nommé "blur".</p> +{{SVGElement('feGaussianBlur')}} prend en entrée (`in`) "SourceAlpha", qui est la couche alpha de l'élément source, applique un flou de 4, et stocke le résultat (`result`) dans un buffer temporaire nommé "blur". -<h3 id="Étape_2">Étape 2</h3> +### Étape 2 -<pre class="brush: html"><feOffset in="blur" +```html +<feOffset in="blur" dx="4" dy="4" - result="offsetBlur"/></pre> + result="offsetBlur"/> +``` -<p>{{SVGElement('feOffset')}} prend en entrée (<code>in</code>) "blur", qu'on a crée précedemment, le décale de 4 vers la droite et 4 vers le bas, et stocke le résultat (<code>result</code>) dans le buffer "offsetBlur". Les deux premières primitives viennent de créer une ombre portée.</p> +{{SVGElement('feOffset')}} prend en entrée (`in`) "blur", qu'on a crée précedemment, le décale de 4 vers la droite et 4 vers le bas, et stocke le résultat (`result`) dans le buffer "offsetBlur". Les deux premières primitives viennent de créer une ombre portée. -<h3 id="Étape_3">Étape 3</h3> +### Étape 3 -<pre class="brush: html"><feSpecularLighting in="blur" +```html +<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" - result="specOut"> - <fePointLight x="-5000" y="-10000" z="20000"/> -</feSpecularLighting></pre> + result="specOut"> + <fePointLight x="-5000" y="-10000" z="20000"/> +</feSpecularLighting> +``` -<p>{{SVGelement('feSpecularLighting')}} prend en entrée (<code>in</code>) "blur", génère un effet d'éclairage, et stocke le résultat (<code>result</code>) dans le buffer "specOut".</p> +{{SVGelement('feSpecularLighting')}} prend en entrée (`in`) "blur", génère un effet d'éclairage, et stocke le résultat (`result`) dans le buffer "specOut". -<h3 id="Étape_4">Étape 4</h3> +### Étape 4 -<pre class="brush: html"><feComposite in="specOut" in2="SourceAlpha" +```html +<feComposite in="specOut" in2="SourceAlpha" operator="in" - result="specOut"/></pre> + result="specOut"/> +``` -<p>Le premier {{SVGElement('feComposite')}} prend en entrée (<code>in</code>, <code>in2</code>) "specOut" et "SourceAlpha", masque le résultat de "specOut" de telle sorte qu'il ne soit pas plus grand que "SourceAlpha" (l'élément graphique d'origine), et remplace le résultat (<code>result</code>) "specOut".</p> +Le premier {{SVGElement('feComposite')}} prend en entrée (`in`, `in2`) "specOut" et "SourceAlpha", masque le résultat de "specOut" de telle sorte qu'il ne soit pas plus grand que "SourceAlpha" (l'élément graphique d'origine), et remplace le résultat (`result`) "specOut". -<h3 id="Étape_5">Étape 5</h3> +### Étape 5 -<pre class="brush: html"><feComposite in="SourceGraphic" in2="specOut" +```html +<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" - result="litPaint"/></pre> + result="litPaint"/> +``` -<p>Le second {{SVGElement('feComposite')}} prend en entrée (<code>in</code>, <code>in2</code>) "SourceAlpha" et "specOut", ajoute le résultat "specOut" au-dessus de "SourceAlpha", et stocke le résultat (<code>result</code>) dans "litPaint".</p> +Le second {{SVGElement('feComposite')}} prend en entrée (`in`, `in2`) "SourceAlpha" et "specOut", ajoute le résultat "specOut" au-dessus de "SourceAlpha", et stocke le résultat (`result`) dans "litPaint". -<h3 id="Étape_6">Étape 6</h3> +### Étape 6 -<pre class="brush: html"><feMerge> - <feMergeNode in="offsetBlur"/> - <feMergeNode in="litPaint"/> -</feMerge></pre> +```html +<feMerge> + <feMergeNode in="offsetBlur"/> + <feMergeNode in="litPaint"/> +</feMerge> +``` -<p>Finalement, {{SVGElement('feMerge')}} fusionne ensemble "offsetBlur", qui est l'ombre portée, et "litPaint", qui est l'élément d'origine avec l'effet d'éclairage.</p> +Finalement, {{SVGElement('feMerge')}} fusionne ensemble "offsetBlur", qui est l'ombre portée, et "litPaint", qui est l'élément d'origine avec l'effet d'éclairage. -<img alt="graphique source" src="filters01-0.png"> -<p>Graphique source</p> + -<img alt="Primitive 1" src="filters01-1.png"> -<p>Primitive 1</p> +Graphique source -<img alt="Primitive 2" src="filters01-2.png"> -<p>Primitive 2</p> + -<img alt="Primitive 3" src="filters01-3.png"> -<p>Primitive 3</p> +Primitive 1 -<img alt="Primitive 4" src="filters01-4.png"> -<p>Primitive 4</p> + -<img alt="Primitive 5" src="filters01-5.png"> -<p>Primitive 5</p> +Primitive 2 -<img alt="Primitive 6" src="filters01-6.png"> -<p>Primitive 6</p> -<p>{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}</p> + + +Primitive 3 + + + +Primitive 4 + + + +Primitive 5 + + + +Primitive 6 + +{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }} diff --git a/files/fr/web/svg/tutorial/getting_started/index.md b/files/fr/web/svg/tutorial/getting_started/index.md index 5b5fda31c5..53ba57e9ca 100644 --- a/files/fr/web/svg/tutorial/getting_started/index.md +++ b/files/fr/web/svg/tutorial/getting_started/index.md @@ -7,93 +7,88 @@ tags: translation_of: Web/SVG/Tutorial/Getting_Started original_slug: Web/SVG/Tutoriel/Premiers_pas --- -<p>{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}}</p> +{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}} -<h2 id="a_simple_example">Un exemple simple</h2> +## Un exemple simple -<p>Commençons directement avec un exemple pratique. Jetez un coup d'œil au morceau de code suivant :</p> +Commençons directement avec un exemple pratique. Jetez un coup d'œil au morceau de code suivant : -<pre class="brush: xml"> -<svg version="1.1" +```xml +<svg version="1.1" baseProfile="full" width="300" height="200" - xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg"> - <rect width="100%" height="100%" fill="red" /> + <rect width="100%" height="100%" fill="red" /> - <circle cx="150" cy="100" r="80" fill="green" /> + <circle cx="150" cy="100" r="80" fill="green" /> - <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> + <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> -</svg> -</pre> +</svg> +``` -<p>Copiez le code précédent dans un document texte, puis enregistrez-le sous le nom de <em>demo1.svg</em>. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez <a href="https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3075/89b1e0a26e8421e19f907e0522b188bd/svgdemo1.xml">ici</a>)</p> +Copiez le code précédent dans un document texte, puis enregistrez-le sous le nom de _demo1.svg_. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez [ici](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3075/89b1e0a26e8421e19f907e0522b188bd/svgdemo1.xml)) -<p><img alt="une image avec un rectangle rouge contenant un disque vert dans lequel est écrit SVG en blanc" src="svgdemo1.png"></p> + -<p>Quelques explications s'imposent quant au fonctionnement du rendu :</p> +Quelques explications s'imposent quant au fonctionnement du rendu : -<ol> - <li>Nous commençons avec l'élément <a href="/fr/docs/Web/SVG/Element/svg"><code>svg</code></a> à la racine : +1. Nous commençons avec l'élément [`svg`](/fr/docs/Web/SVG/Element/svg) à la racine : - <ul> - <li>La déclaration du doctype que l'on voit en (X)HTML peut être enlevée, car la validation DTD du SVG provoque plus de problèmes qu'elle n'en résout.</li> - <li>Avant SVG 2, pour identifier la version du SVG pour d'autre types de validation, les attributs <code>version</code> et <code>baseProfile</code> devaient toujours être utilisés. Ces deux attributs sont dépréciés en SVG 2.</li> - <li>En tant que langage basé sur XML, l'espace de noms du document SVG doit être correct, d'où l'attribut <code>xmlns</code>. Pour plus d'informations, n'hésitez pas à consulter la page <a href="/fr/docs/Web/SVG/Namespaces_Crash_Course">Cours d'introduction aux espaces de noms.</a></li> - </ul> - </li> - <li>L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise <a href="/fr/docs/Web/SVG/Element/rect"><code><rect></code></a> qui recouvre l'intégralité de l'espace.</li> - <li>Un cercle (<a href="/fr/docs/Web/SVG/Element/circle"><code><circle></code></a>) vert d'un rayon de 80px est dessiné par-dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut.</li> - <li>Le texte "SVG" est dessiné. L'intérieur de chaque lettre est rempli de blanc. Le texte est positionné grâce à une ancre placée là où nous souhaitons qu'elle soit. Dans le cas présent, le centre du texte doit correspondre au milieu du rectangle rouge. De petits ajustements peuvent être apportés à la taille de la police et au positionnement vertical, de manière à assurer un résultat final esthétiquement agréable.</li> -</ol> + - La déclaration du doctype que l'on voit en (X)HTML peut être enlevée, car la validation DTD du SVG provoque plus de problèmes qu'elle n'en résout. + - Avant SVG 2, pour identifier la version du SVG pour d'autre types de validation, les attributs `version` et `baseProfile` devaient toujours être utilisés. Ces deux attributs sont dépréciés en SVG 2. + - En tant que langage basé sur XML, l'espace de noms du document SVG doit être correct, d'où l'attribut `xmlns`. Pour plus d'informations, n'hésitez pas à consulter la page [Cours d'introduction aux espaces de noms.](/fr/docs/Web/SVG/Namespaces_Crash_Course) -<h2 id="basic_properties_of_svg_files">Les propriétés basiques des fichiers SVG</h2> +2. L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise [`<rect>`](/fr/docs/Web/SVG/Element/rect) qui recouvre l'intégralité de l'espace. +3. Un cercle ([`<circle>`](/fr/docs/Web/SVG/Element/circle)) vert d'un rayon de 80px est dessiné par-dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut. +4. Le texte "SVG" est dessiné. L'intérieur de chaque lettre est rempli de blanc. Le texte est positionné grâce à une ancre placée là où nous souhaitons qu'elle soit. Dans le cas présent, le centre du texte doit correspondre au milieu du rectangle rouge. De petits ajustements peuvent être apportés à la taille de la police et au positionnement vertical, de manière à assurer un résultat final esthétiquement agréable. -<ul> - <li>La première chose à retenir est l'ordre de rendu des éléments. La règle qui prévaut pour le SVG est que les éléments déclarés les plus récemment sont ceux qui seront affichés par-dessus les autres. En gros, l'élément défini en bas du document sera celui qui s'affichera au-dessus de tous les autres.</li> - <li>Les fichiers SVG peuvent être affichés directement dans un navigateur ou même être incorporés directement dans un fichier HTML, en suivant plusieurs méthodes : - <ul> - <li>Si le HTML est du XHTML et est distribué avec le type MIME <code>application/xhtml+xml</code>, le SVG peut directement être intégré dans la source XML.</li> - <li>SI le HTML est du HTML5 et que le navigateur est conforme HTML5, le SVG peut aussi être intégré directement dans les sources. Toutefois, il peut être nécessaire d'effectuer des modifications de syntaxe pour rendre le document compatible aux spécifications HTML5.</li> - <li>Le document SVG peut être défini avec un élément <code>object</code> : - <pre class="brush: html"><object data="image.svg" type="image/svg+xml" /></pre> - </li> - <li>De la même manière, un <code>iframe</code> peut être utilisé : - <pre class="brush: html"><iframe src="image.svg"></iframe></pre> - </li> - <li>Une balise <code>img</code> peut également être utilisée.</li> - <li>Enfin, SVG peut être créé dynamiquement avec du JavaScript et injecté dans le DOM HTML. Ceci permet aux technologies de remplacement pour les navigateurs, qui ne peuvent pas traiter SVG, d'être mises en œuvre. Pour approfondir cette technique, vous pouvez lire <a href="/fr/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction">cette page</a>.</li> - </ul> - </li> - <li>La manière dont SVG gère les tailles et les unités sera traitée à <a href="/fr/docs/Web/SVG/Tutorial/Positions">la page suivante</a>.</li> -</ul> +## Les propriétés basiques des fichiers SVG -<h2 id="svg_file_types">Les types de fichiers SVG</h2> +- La première chose à retenir est l'ordre de rendu des éléments. La règle qui prévaut pour le SVG est que les éléments déclarés les plus récemment sont ceux qui seront affichés par-dessus les autres. En gros, l'élément défini en bas du document sera celui qui s'affichera au-dessus de tous les autres. +- Les fichiers SVG peuvent être affichés directement dans un navigateur ou même être incorporés directement dans un fichier HTML, en suivant plusieurs méthodes : -<p>Les fichiers SVG peuvent exister sous deux formes. La première consiste en des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules).</p> + - Si le HTML est du XHTML et est distribué avec le type MIME `application/xhtml+xml`, le SVG peut directement être intégré dans la source XML. + - SI le HTML est du HTML5 et que le navigateur est conforme HTML5, le SVG peut aussi être intégré directement dans les sources. Toutefois, il peut être nécessaire d'effectuer des modifications de syntaxe pour rendre le document compatible aux spécifications HTML5. + - Le document SVG peut être défini avec un élément `object` : -<p>Toutefois, les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (voir ci-après).</p> + ```html + <object data="image.svg" type="image/svg+xml" /> + ``` -<h2 id="a_word_on_webservers">Un mot sur les serveurs web</h2> + - De la même manière, un `iframe` peut être utilisé : -<p>Maintenant qu'on sait comment créer des fichiers SVG basiques, la prochaine étape consiste à les envoyer sur un serveur web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP :</p> + ```html + <iframe src="image.svg"></iframe> + ``` -<pre> -Content-Type: image/svg+xml -Vary: Accept-Encoding -</pre> + - Une balise `img` peut également être utilisée. + - Enfin, SVG peut être créé dynamiquement avec du JavaScript et injecté dans le DOM HTML. Ceci permet aux technologies de remplacement pour les navigateurs, qui ne peuvent pas traiter SVG, d'être mises en œuvre. Pour approfondir cette technique, vous pouvez lire [cette page](/fr/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction). -<p>Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :</p> +- La manière dont SVG gère les tailles et les unités sera traitée à [la page suivante](/fr/docs/Web/SVG/Tutorial/Positions). -<pre> -Content-Type: image/svg+xml -Content-Encoding: gzip -Vary: Accept-Encoding -</pre> +## Les types de fichiers SVG -<p>Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant <a href="/fr/docs/Tools/Network_Monitor">le Moniteur réseau</a> ou un site comme <a href="https://websniffer.cc/">websniffer.cc</a>. Fournissez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez <a href="https://www.w3.org/services/svg-server/">la page de configuration d'un serveur</a> sur le site w3.org pour quelques solutions simples.</p> +Les fichiers SVG peuvent exister sous deux formes. La première consiste en des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules). -<p>La mauvaise configuration du serveur est souvent la cause de l'échec du chargement du SVG, donc assurez-vous bien d'avoir vérifié le vôtre. Si votre serveur n'est pas configuré pour envoyer les bons en-têtes avec les fichiers SVG qu'il fournit, alors Firefox affichera le contenu du fichier comme du texte ou comme du rebut encodé, ou demandera peut-être à l'utilisateur de choisir une application pour l'ouvrir.</p> +Toutefois, les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (voir ci-après). -<p>{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}}</p> +## Un mot sur les serveurs web + +Maintenant qu'on sait comment créer des fichiers SVG basiques, la prochaine étape consiste à les envoyer sur un serveur web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP : + + Content-Type: image/svg+xml + Vary: Accept-Encoding + +Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP : + + Content-Type: image/svg+xml + Content-Encoding: gzip + Vary: Accept-Encoding + +Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant [le Moniteur réseau](/fr/docs/Tools/Network_Monitor) ou un site comme [websniffer.cc](https://websniffer.cc/). Fournissez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez [la page de configuration d'un serveur](https://www.w3.org/services/svg-server/) sur le site w3.org pour quelques solutions simples. + +La mauvaise configuration du serveur est souvent la cause de l'échec du chargement du SVG, donc assurez-vous bien d'avoir vérifié le vôtre. Si votre serveur n'est pas configuré pour envoyer les bons en-têtes avec les fichiers SVG qu'il fournit, alors Firefox affichera le contenu du fichier comme du texte ou comme du rebut encodé, ou demandera peut-être à l'utilisateur de choisir une application pour l'ouvrir. + +{{PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions")}} diff --git a/files/fr/web/svg/tutorial/gradients/index.md b/files/fr/web/svg/tutorial/gradients/index.md index 4528d51fb7..ea0a26fd0b 100644 --- a/files/fr/web/svg/tutorial/gradients/index.md +++ b/files/fr/web/svg/tutorial/gradients/index.md @@ -7,219 +7,215 @@ tags: translation_of: Web/SVG/Tutorial/Gradients original_slug: Web/SVG/Tutoriel/Gradients --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }} -<p>Probablement plus excitant qu'un simple remplissage et contour, est le fait de pouvoir créer et appliquer des dégradés comme remplissage ou contour.</p> +Probablement plus excitant qu'un simple remplissage et contour, est le fait de pouvoir créer et appliquer des dégradés comme remplissage ou contour. -<p>Il y a deux types de dégradés: linéaire et radial. Les dégradés sont définis dans la section <code>defs</code> et non sur les formes elles-mêmes — cela favorise leur réusabilité. Vous <strong>devez</strong> donner au dégradé un attribut <code>id</code>; autrement, il ne pourra pas être utilisé par les autres éléments à l'intérieur du fichier SVG.</p> +Il y a deux types de dégradés: linéaire et radial. Les dégradés sont définis dans la section `defs` et non sur les formes elles-mêmes — cela favorise leur réusabilité. Vous **devez** donner au dégradé un attribut `id`; autrement, il ne pourra pas être utilisé par les autres éléments à l'intérieur du fichier SVG. -<h2 id="SVGLinearGradient">Dégradé Linéaire</h2> +## Dégradé Linéaire -<p>Les dégradés linéaires (<em>linear gradient</em> en anglais) changent de couleur le long d'une ligne droite. Pour en insérer un, on crée un élément {{SVGElement('linearGradient')}} dans la section des définitions du fichier SVG.</p> +Les dégradés linéaires (_linear gradient_ en anglais) changent de couleur le long d'une ligne droite. Pour en insérer un, on crée un élément {{SVGElement('linearGradient')}} dans la section des définitions du fichier SVG. -<h3 id="Exemple">Exemple</h3> +### Exemple -<p>Un exemple de dégradé linéaire appliqué à un élément <code><rect></code>:</p> +Un exemple de dégradé linéaire appliqué à un élément `<rect>`: -<pre class="brush: html"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> - <defs> - <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1"> - <stop offset="0%" stop-color="red"/> - <stop offset="50%" stop-color="black" stop-opacity="0"/> - <stop offset="100%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2"> - <stop class="stop1" offset="0%"/> - <stop class="stop2" offset="50%"/> - <stop class="stop3" offset="100%"/> - </linearGradient> - <style type="text/css"><![CDATA[ +```html +<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1"> + <stop offset="0%" stop-color="red"/> + <stop offset="50%" stop-color="black" stop-opacity="0"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2"> + <stop class="stop1" offset="0%"/> + <stop class="stop2" offset="50%"/> + <stop class="stop3" offset="100%"/> + </linearGradient> + <style type="text/css"><![CDATA[ #rect1 { fill: url(#Gradient2); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } - ]]></style> - </defs> + ]]></style> + </defs> - <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/> - <rect x="10" y="10" rx="15" ry="15" width="100" height="100" id="rect1" /> -</svg></pre> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/> + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" id="rect1" /> +</svg> +``` -<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p> +{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }} -<h3 id="Définir_le_dégradé">Définir le dégradé</h3> +### Définir le dégradé -<p>À l'intérieur du dégradé, il y a divers noeuds {{SVGElement('stop')}}. Ces noeuds disent au dégradé quelles couleurs doivent être affichées à quelles positions, en spécifiant les attributs <code>offset</code> pour la position et <code>stop-color</code> pour la couleur. On peut également le définir avec CSS. Les deux méthodes ont été utilisées dans l'exemple pour le démontrer.</p> +À l'intérieur du dégradé, il y a divers noeuds {{SVGElement('stop')}}. Ces noeuds disent au dégradé quelles couleurs doivent être affichées à quelles positions, en spécifiant les attributs `offset` pour la position et `stop-color` pour la couleur. On peut également le définir avec CSS. Les deux méthodes ont été utilisées dans l'exemple pour le démontrer. -<p>Dans cet exemple, on dit au dégradé de commencer en rouge, de passer au noir transparent au centre et de terminer par la couleur bleue. Vous pouvez ajouter autant de couleurs que vous le souhaitez, pour créer un dégradé aussi beau ou aussi laid que vous le souhaitez, mais les positions (<code>offset</code>) doivent toujours être incrementées de 0% (ou 0) à 100% (ou 1). Si des valeurs sont dupliquées, la couleur définie la plus en bas de la définition sera utilisée.</p> +Dans cet exemple, on dit au dégradé de commencer en rouge, de passer au noir transparent au centre et de terminer par la couleur bleue. Vous pouvez ajouter autant de couleurs que vous le souhaitez, pour créer un dégradé aussi beau ou aussi laid que vous le souhaitez, mais les positions (`offset`) doivent toujours être incrementées de 0% (ou 0) à 100% (ou 1). Si des valeurs sont dupliquées, la couleur définie la plus en bas de la définition sera utilisée. -<p>Aussi, comme pour le remplissage et le contour, vous pouvez spécifier un attribut <code>stop-opacity</code> pour définir l'opacité de la couleur à cette position (encore une fois, à partir de FF3 vous pouvez utiliser les valeurs rgba pour le même effet).</p> +Aussi, comme pour le remplissage et le contour, vous pouvez spécifier un attribut `stop-opacity` pour définir l'opacité de la couleur à cette position (encore une fois, à partir de FF3 vous pouvez utiliser les valeurs rgba pour le même effet). -<pre class="eval"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> -</pre> + <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/> -<h3 id="Utiliser_le_dégradé">Utiliser le dégradé</h3> +### Utiliser le dégradé -<p>Pour utiliser le dégradé, vous devez le référencer avec l'attribut <code>fill</code> ou <code>stroke</code> d'un objet. On référence un élément SVG de la même manière que l'on référence des éléments en CSS, via <code>url()</code>. Dans notre cas, l'url est juste une référence vers le dégradé avec l'ID "Gradient". Pour le référencer, on définit <code>fill="url(#Gradient)"</code>, et voilà! Notre objet est maintenant multi-coloré. Vous pouvez faire de même avec <code>stroke</code>.</p> +Pour utiliser le dégradé, vous devez le référencer avec l'attribut `fill` ou `stroke` d'un objet. On référence un élément SVG de la même manière que l'on référence des éléments en CSS, via `url()`. Dans notre cas, l'url est juste une référence vers le dégradé avec l'ID "Gradient". Pour le référencer, on définit `fill="url(#Gradient)"`, et voilà! Notre objet est maintenant multi-coloré. Vous pouvez faire de même avec `stroke`. -<h3 id="Orientation_du_dégradé">Orientation du dégradé</h3> +### Orientation du dégradé -<p>L'élément <code><linearGradient></code> peut également prendre différents attributs pour spécifier la taille et l'apparence du dégradé. L'orientation du dégradé est contrôlé par deux points, désignés par les attributs <code>x1</code>, <code>x2</code>, <code>y1</code>, et <code>y2</code>. Ces attributs définissent la ligne le long de laquelle le dégradé est tracé. Par défaut, le dégradé est horizontal, mais il peut être orienté autrement grâce à ces attributs. "Gradient2" dans l'exemple précédent crée un dégradé vertical.</p> +L'élément `<linearGradient>` peut également prendre différents attributs pour spécifier la taille et l'apparence du dégradé. L'orientation du dégradé est contrôlé par deux points, désignés par les attributs `x1`, `x2`, `y1`, et `y2`. Ces attributs définissent la ligne le long de laquelle le dégradé est tracé. Par défaut, le dégradé est horizontal, mais il peut être orienté autrement grâce à ces attributs. "Gradient2" dans l'exemple précédent crée un dégradé vertical. -<pre class="eval"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> -</pre> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> -<h3 id="xlinkhref">xlink:href</h3> +### xlink:href -<p>Vous pouvez également utiliser l'attribut <code>xlink:href</code> sur les dégradés. Quand il est utilisé, les attributs et stops d'un dégradé peuvent être réutilisé sur un autre. Ainsi, dans l'exemple précédent, on aurait pu ne pas redéfinir tous les stops dans Gradient2, comme ceci:</p> +Vous pouvez également utiliser l'attribut `xlink:href` sur les dégradés. Quand il est utilisé, les attributs et stops d'un dégradé peuvent être réutilisé sur un autre. Ainsi, dans l'exemple précédent, on aurait pu ne pas redéfinir tous les stops dans Gradient2, comme ceci: -<pre class="eval"> <linearGradient id="Gradient1"> - <stop id="stop1" offset="0%"/> - <stop id="stop2" offset="50%"/> - <stop id="stop3" offset="100%"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" - xmlns:xlink="<a href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/> -</pre> + <linearGradient id="Gradient1"> + <stop id="stop1" offset="0%"/> + <stop id="stop2" offset="50%"/> + <stop id="stop3" offset="100%"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" + xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/> -<p>Ici, le namespace xlink est inclut directement sur le noeud, bien qu'il soit généralement définit en haut du document, comme dans l'<a href="/fr/docs/Web/SVG/Tutoriel/Contenu_embarque_SVG">exemple avec les images</a></p> +Ici, le namespace xlink est inclut directement sur le noeud, bien qu'il soit généralement définit en haut du document, comme dans l'[exemple avec les images](/fr/docs/Web/SVG/Tutoriel/Contenu_embarque_SVG) -<h2 id="Radial_Gradient">Dégradé Radial</h2> +## Dégradé Radial -<p>Les dégradés radiaux (<em>radial gradient</em> en anglais) sont similaires aux dégradés linéaires à la différence près qu'ils irradient autour d'un point. Pour en créer un, on crée un élément {{SVGElement('radialGradient')}} dans la section de définitions du document SVG.</p> +Les dégradés radiaux (_radial gradient_ en anglais) sont similaires aux dégradés linéaires à la différence près qu'ils irradient autour d'un point. Pour en créer un, on crée un élément {{SVGElement('radialGradient')}} dans la section de définitions du document SVG. -<h3 id="Exemple_2">Exemple</h3> +### Exemple -<pre class="brush: html"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> - <defs> - <radialGradient id="RadialGradient1"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - </defs> +```html +<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="RadialGradient1"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> - <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/> - <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/> -</svg></pre> + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/> +</svg> +``` -<p>{{ EmbedLiveSample('Exemple_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p> +{{ EmbedLiveSample('Exemple_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }} -<h3 id="Définir_le_dégradé_2">Définir le dégradé</h3> +### Définir le dégradé -<p>Les stops utilisés ici sont les mêmes que précédemment, la différence étant que désormais l'objet sera rouge en son centre, et que la couleur changera progressivement vers le bleu en approchant des contours. Comme pour les dégradés linéaires, le noeud <code><radialGradient></code> peut prendre différents attributs pour décrire sa position et son orientation. Cependant, la définition est un peu plus complexe. Le dégradé linéaire est défini par deux points, qui déterminent où sont situé le centre et les bords:</p> +Les stops utilisés ici sont les mêmes que précédemment, la différence étant que désormais l'objet sera rouge en son centre, et que la couleur changera progressivement vers le bleu en approchant des contours. Comme pour les dégradés linéaires, le noeud `<radialGradient>` peut prendre différents attributs pour décrire sa position et son orientation. Cependant, la définition est un peu plus complexe. Le dégradé linéaire est défini par deux points, qui déterminent où sont situé le centre et les bords: -<ul> - <li>Le premier point définit le cercle où le dégradé se termine. Il requiert un point central, spécifié par les attributs <code>cx</code> et <code>cy</code>, et un rayon, <code>r</code>. Définir ces trois attributs vous permettra de déplacer le dégradé et de changer sa taille, comme illusté dans le deuxième <code>rect</code> de notre exemple.</li> - <li>Le second point est appelé le point focal et il est définit par les attributs <code>fx</code> et <code>fy</code>. Tandis que le premier point décrit où sont les bords du dégradé, le point focal décrit où est son centre. C'est plus facile à voir avec un exemple (voir la section qui suit).</li> -</ul> +- Le premier point définit le cercle où le dégradé se termine. Il requiert un point central, spécifié par les attributs `cx` et `cy`, et un rayon, `r`. Définir ces trois attributs vous permettra de déplacer le dégradé et de changer sa taille, comme illusté dans le deuxième `rect` de notre exemple. +- Le second point est appelé le point focal et il est définit par les attributs `fx` et `fy`. Tandis que le premier point décrit où sont les bords du dégradé, le point focal décrit où est son centre. C'est plus facile à voir avec un exemple (voir la section qui suit). -<h3 id="Centre_et_point_focal">Centre et point focal</h3> +### Centre et point focal -<pre class="brush: html"><svg width="120" height="120" version="1.1" - xmlns="http://www.w3.org/2000/svg"> - <defs> - <radialGradient id="Gradient" - cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - </defs> +```html +<svg width="120" height="120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <defs> + <radialGradient id="Gradient" + cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> - <rect x="10" y="10" rx="15" ry="15" width="100" height="100" - fill="url(#Gradient)" stroke="black" stroke-width="2"/> + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" + fill="url(#Gradient)" stroke="black" stroke-width="2"/> - <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> - <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> - <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> - <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> - <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> + <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> + <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> + <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> + <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> + <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> -</svg></pre> +</svg> +``` -<p>{{ EmbedLiveSample('Centre_et_point_focal','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}</p> +{{ EmbedLiveSample('Centre_et_point_focal','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }} -<p>Si le point focal est déplacé en dehors du cercle décrit précédemment, il est impossible que le dégradé s'affiche correctement, le point focal sera donc supposé être à l'intérieur du bord du cercle. Si le point focal n'est pas du tout indiqué, il sera supposé être au même endroit que le point central.</p> +Si le point focal est déplacé en dehors du cercle décrit précédemment, il est impossible que le dégradé s'affiche correctement, le point focal sera donc supposé être à l'intérieur du bord du cercle. Si le point focal n'est pas du tout indiqué, il sera supposé être au même endroit que le point central. -<h2 id="Attributs_additionnels">Attributs additionnels</h2> +## Attributs additionnels -<p>Les dégradés linéaires et radiaux peuvent également prendre quelques autres attributs pour décrire les transformations qu'ils peuvent subir.</p> +Les dégradés linéaires et radiaux peuvent également prendre quelques autres attributs pour décrire les transformations qu'ils peuvent subir. -<h3 id="spreadMethod">spreadMethod</h3> +### spreadMethod -<p>Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais que l'objet n'est pas encore rempli. Trois valeurs sont possibles: "pad", "reflect", ou "repeat".</p> +Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais que l'objet n'est pas encore rempli. Trois valeurs sont possibles: "pad", "reflect", ou "repeat". -<ul> - <li>"<code>pad</code>" est la valeur par défaut. Quand un dégradé arrive à sa fin, la dernière couleur est utilisée pour remplir le reste de l'objet.</li> - <li>"<code>reflect</code>" a pour effet de poursuivre le dégradé, mais en sens inverse: de la dernière couleur (offset 100%) à la première (offset 0%), puis de nouveau de la première à la dernière, etc.</li> - <li>"<code>repeat</code>" poursuit également le dégradé, mais au lieu de revenir en arrière, il revient au début et est exécuté de nouveau.</li> -</ul> +- "`pad`" est la valeur par défaut. Quand un dégradé arrive à sa fin, la dernière couleur est utilisée pour remplir le reste de l'objet. +- "`reflect`" a pour effet de poursuivre le dégradé, mais en sens inverse: de la dernière couleur (offset 100%) à la première (offset 0%), puis de nouveau de la première à la dernière, etc. +- "`repeat`" poursuit également le dégradé, mais au lieu de revenir en arrière, il revient au début et est exécuté de nouveau. -<pre class="brush: html"><svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> - <defs> - <!-- pad --> - <radialGradient id="GradientPad" +```html +<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <defs> + <!-- pad --> + <radialGradient id="GradientPad" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" - spreadMethod="pad"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> + spreadMethod="pad"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> - <!-- repeat --> - <radialGradient id="GradientRepeat" + <!-- repeat --> + <radialGradient id="GradientRepeat" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" - spreadMethod="repeat"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> + spreadMethod="repeat"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> - <!-- reflect --> - <radialGradient id="GradientReflect" + <!-- reflect --> + <radialGradient id="GradientReflect" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" - spreadMethod="reflect"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - </defs> + spreadMethod="reflect"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> - <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> - <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> - <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> + <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> - <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> - <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> - <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> + <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> + <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> + <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> -</svg></pre> +</svg> +``` -<p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p> +{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }} -<h3 id="gradientUnits">gradientUnits</h3> +### gradientUnits -<p>Les deux types de dégradés ont également un attribut <code>gradientUnits</code>, qui indique l'unité utilisée pour décrire la taille et l'orientation du dégradé. Deux valeurs sont posibles: <code>userSpaceOnUse</code> ou <code>objectBoundingBox</code>.</p> +Les deux types de dégradés ont également un attribut `gradientUnits`, qui indique l'unité utilisée pour décrire la taille et l'orientation du dégradé. Deux valeurs sont posibles: `userSpaceOnUse` ou `objectBoundingBox`. -<ul> - <li><code>objectBoundingBox</code> est la valeur par défaut, c'est ce qu'on a vu jusqu'à présent. Le dégradé est automatiquement redimensionné à la taille de l'objet sur lequel il est appliqué, vous n'avez donc qu'à spécifier les coordonnées de zéro à un (ou de 0% à 100%), et les coordonnées sont automatiquement redimensionnée à la taille de l'objet.</li> - <li><code>userSpaceOnUse</code> indique que les valeurs sont absolues. Vous devez donc savoir où se situe l'objet, et placer le dégradé à la même position. Le dégradé radial précédent devrait être ré-écrit comme suit: - <pre class="eval"><radialGradient id="Gradient" - cx="60" cy="60" r="50" - fx="35" fy="35" - gradientUnits="userSpaceOnUse"> -</pre> - </li> -</ul> +- `objectBoundingBox` est la valeur par défaut, c'est ce qu'on a vu jusqu'à présent. Le dégradé est automatiquement redimensionné à la taille de l'objet sur lequel il est appliqué, vous n'avez donc qu'à spécifier les coordonnées de zéro à un (ou de 0% à 100%), et les coordonnées sont automatiquement redimensionnée à la taille de l'objet. +- `userSpaceOnUse` indique que les valeurs sont absolues. Vous devez donc savoir où se situe l'objet, et placer le dégradé à la même position. Le dégradé radial précédent devrait être ré-écrit comme suit: -<p>Il y a quelques subtilités concernant l'utilisation de <code>gradientUnits="objectBoundingBox"</code> quand les limites de l'objet ne sont pas carrées, mais elles sont assez complexes et nous attendrons quelqu'un de plus au courant pour les expliquer.</p> + <radialGradient id="Gradient" + cx="60" cy="60" r="50" + fx="35" fy="35" + gradientUnits="userSpaceOnUse"> -<h3 id="gradientTransform">gradientTransform</h3> +Il y a quelques subtilités concernant l'utilisation de `gradientUnits="objectBoundingBox"` quand les limites de l'objet ne sont pas carrées, mais elles sont assez complexes et nous attendrons quelqu'un de plus au courant pour les expliquer. -<p>Vous pouvez également appliquer une transformation au gradient en utilisant l'attribut <code>gradientTransform</code>, mais puisque nous n'avons pas encore introduit les <a href="/fr/docs/Web/SVG/Tutoriel/Transformations_de_base" title="en-US/Web/SVG/Tutorial/Basic Transformations">transformations</a>, nous le laisserons de côté pour l'instant.</p> +### gradientTransform -<p> </p> +Vous pouvez également appliquer une transformation au gradient en utilisant l'attribut `gradientTransform`, mais puisque nous n'avons pas encore introduit les [transformations](/fr/docs/Web/SVG/Tutoriel/Transformations_de_base "en-US/Web/SVG/Tutorial/Basic Transformations"), nous le laisserons de côté pour l'instant. -<p>{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}</p> -<p> </p> + +{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }} diff --git a/files/fr/web/svg/tutorial/index.md b/files/fr/web/svg/tutorial/index.md index 8e47aea0cd..6df79a6272 100644 --- a/files/fr/web/svg/tutorial/index.md +++ b/files/fr/web/svg/tutorial/index.md @@ -11,34 +11,30 @@ tags: translation_of: Web/SVG/Tutorial original_slug: Web/SVG/Tutoriel --- -<p><a href="/fr/docs/Web/SVG">SVG</a>, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le <a href="/fr/docs/Web/XML">XML</a> du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web.</p> +[SVG](/fr/docs/Web/SVG), pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le [XML](/fr/docs/Web/XML) du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web. -<p>Ce tutoriel a pour but d'expliquer les mécanismes internes de SVG et regorge de détails techniques. Si vous souhaitez juste dessiner de belles images, vous trouverez plus facilement votre bonheur sur la <a href="https://inkscape.org/doc/">page de documentation d'Inkscape</a>. Le W3C fournit également une <a href="https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">bonne introduction au format SVG</a>, en anglais.</p> +Ce tutoriel a pour but d'expliquer les mécanismes internes de SVG et regorge de détails techniques. Si vous souhaitez juste dessiner de belles images, vous trouverez plus facilement votre bonheur sur la [page de documentation d'Inkscape](https://inkscape.org/doc/). Le W3C fournit également une [bonne introduction au format SVG](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html), en anglais. -<div class="note"> - <p><strong>Note :</strong> Le tutoriel en est encore à un stade précoce de développement. Si vous le pouvez, aidez-nous en rédigeant un paragraphe ou deux. Des points supplémentaires pour l'écriture d'une page entière !</p> -</div> +> **Note :** Le tutoriel en est encore à un stade précoce de développement. Si vous le pouvez, aidez-nous en rédigeant un paragraphe ou deux. Des points supplémentaires pour l'écriture d'une page entière ! -<h2 id="Introducing_SVG_from_Scratch">Introduction à « SVG from Scratch »</h2> +## Introduction à « SVG from Scratch » -<ul> - <li><a href="/fr/docs/Web/SVG/Tutorial/Introduction">Introduction</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Getting_Started">Premiers pas</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Positions">Positionnement</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Basic_Shapes">Formes de base</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Paths">Chemins</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Fills_and_Strokes">Remplissages et contours</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Gradients">Gradients</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Patterns">Motifs</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Texts">Textes</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Basic_Transformations">Transformations de base</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Clipping_and_masking">Découpages et masquages</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Other_content_in_SVG">Autre contenu en SVG</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Filter_effects">Filtres</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_fonts">Polices SVG</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_Image_Tag">SVG: Elément image</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/Tools_for_SVG">Outils pour SVG</a></li> - <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_and_CSS">Graphiques SVG</a></li> -</ul> +- [Introduction](/fr/docs/Web/SVG/Tutorial/Introduction) +- [Premiers pas](/fr/docs/Web/SVG/Tutorial/Getting_Started) +- [Positionnement](/fr/docs/Web/SVG/Tutorial/Positions) +- [Formes de base](/fr/docs/Web/SVG/Tutorial/Basic_Shapes) +- [Chemins](/fr/docs/Web/SVG/Tutorial/Paths) +- [Remplissages et contours](/fr/docs/Web/SVG/Tutorial/Fills_and_Strokes) +- [Gradients](/fr/docs/Web/SVG/Tutorial/Gradients) +- [Motifs](/fr/docs/Web/SVG/Tutorial/Patterns) +- [Textes](/fr/docs/Web/SVG/Tutorial/Texts) +- [Transformations de base](/fr/docs/Web/SVG/Tutorial/Basic_Transformations) +- [Découpages et masquages](/fr/docs/Web/SVG/Tutorial/Clipping_and_masking) +- [Autre contenu en SVG](/fr/docs/Web/SVG/Tutorial/Other_content_in_SVG) +- [Filtres](/fr/docs/Web/SVG/Tutorial/Filter_effects) +- [Polices SVG](/fr/docs/Web/SVG/Tutorial/SVG_fonts) +- [SVG: Elément image](/fr/docs/Web/SVG/Tutorial/SVG_Image_Tag) +- [Outils pour SVG](/fr/docs/Web/SVG/Tutorial/Tools_for_SVG) +- [Graphiques SVG](/fr/docs/Web/SVG/Tutorial/SVG_and_CSS) -<p>Les sujets suivants sont plus avancés et devraient donc faire l'objet de leurs propres tutoriels.</p>
\ No newline at end of file +Les sujets suivants sont plus avancés et devraient donc faire l'objet de leurs propres tutoriels. diff --git a/files/fr/web/svg/tutorial/introduction/index.md b/files/fr/web/svg/tutorial/introduction/index.md index 0bac917759..35d706917c 100644 --- a/files/fr/web/svg/tutorial/introduction/index.md +++ b/files/fr/web/svg/tutorial/introduction/index.md @@ -7,47 +7,43 @@ tags: translation_of: Web/SVG/Tutorial/Introduction original_slug: Web/SVG/Tutoriel/Introduction --- -<p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p> +{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }} -<p>SVG est un langage <a href="/fr/XML" title="XML">XML</a>, assez similaire au <a href="/fr/XHTML" title="fr/XHTML">XHTML</a>. Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité.</p> +SVG est un langage [XML](/fr/XML "XML"), assez similaire au [XHTML](/fr/XHTML "fr/XHTML"). Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité. -<p>La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript.</p> +La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript. -<p>SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au <a href="http://www.w3.org" title="en-US/W3C">W3C</a> sans succès. SVG est pris en charge par tous les <a href="https://caniuse.com/#search=svg">principaux navigateurs</a>. Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation.</p> +SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au [W3C](http://www.w3.org "en-US/W3C") sans succès. SVG est pris en charge par tous les [principaux navigateurs](https://caniuse.com/#search=svg). Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation. -<h2 id="Les_ingrédients_de_base">Les ingrédients de base</h2> +## Les ingrédients de base -<p>HTML founit des éléments pour définir des titres, paragraphes, tableaux, etc. De la même manière, SVG fournit des éléments pour dessiner des cercles, des rectangles, des courbes simples ou complexes, etc.</p> +HTML founit des éléments pour définir des titres, paragraphes, tableaux, etc. De la même manière, SVG fournit des éléments pour dessiner des cercles, des rectangles, des courbes simples ou complexes, etc. -<p>Un simple document SVG se compose de l'élément racine {{ SVGElement('svg') }}, à l'intérieur de laquelle vont être placées divers éléments. L'élément {{ SVGElement('g') }} permet de regrouper plusieurs éléments ensemble, un peu à la manière d'un div en HTML. À partir de là, l'image SVG peut devenir aussi complexe qu'on le veut.</p> +Un simple document SVG se compose de l'élément racine {{ SVGElement('svg') }}, à l'intérieur de laquelle vont être placées divers éléments. L'élément {{ SVGElement('g') }} permet de regrouper plusieurs éléments ensemble, un peu à la manière d'un div en HTML. À partir de là, l'image SVG peut devenir aussi complexe qu'on le veut. -<p>SVG prend en charge les dégradés, les rotations, les effets de filtre, les animations, l'interactivité avec JavaScript... Mais toutes ces fonctionnalités reposent sur un petit nombre d'éléments de base.</p> +SVG prend en charge les dégradés, les rotations, les effets de filtre, les animations, l'interactivité avec JavaScript... Mais toutes ces fonctionnalités reposent sur un petit nombre d'éléments de base. -<h2 id="Les_bons_outils">Les bons outils</h2> +## Les bons outils -<p>Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme <a href="http://www.inkscape.org/">Inkscape</a>, sont libres et gratuits. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage.</p> +Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme [Inkscape](http://www.inkscape.org/), sont libres et gratuits. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage. -<div class="note"> - <p><strong>Note :</strong> Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript.</p> -</div> +> **Note :** Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript. -<p>Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le <a href="/fr/HTML" title="fr/HTML">HTML</a>. Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête :</p> +Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le [HTML](/fr/HTML "fr/HTML"). Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête : -<ul> - <li>Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici).</li> - <li>Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres.</li> -</ul> +- Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici). +- Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres. -<p>La <a href="http://www.w3.org/Graphics/SVG/">spécification du langage SVG (en)</a> est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les <a href="/fr/SVG/Référence_d'éléments" title="fr/SVG/Référence_d'éléments">références d'éléments</a> et les <a href="/fr/SVG/Référence_d'interfaces" title="fr/SVG/Référence_d'interfaces">références d'interfaces</a> pour découvrir tout ce que vous aurez besoin de connaître.</p> +La [spécification du langage SVG (en)](http://www.w3.org/Graphics/SVG/) est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les [références d'éléments](/fr/SVG/Référence_d'éléments "fr/SVG/Référence_d'éléments") et les [références d'interfaces](/fr/SVG/Référence_d'interfaces "fr/SVG/Référence_d'interfaces") pour découvrir tout ce que vous aurez besoin de connaître. -<h2 id="Les_versions_SVG">Les versions SVG</h2> +## Les versions SVG -<p>La version "complète" la plus récente de SVG est la 1.1 (devenue recommendation en 2003). Elle s'appuie sur SVG 1.0 mais ajoute davantage de modularisation pour faciliter l'implémentation. <a href="http://www.w3.org/TR/SVG/">La seconde édition de SVG 1.1</a>, est devenue recommendation en 2011.</p> +La version "complète" la plus récente de SVG est la 1.1 (devenue recommendation en 2003). Elle s'appuie sur SVG 1.0 mais ajoute davantage de modularisation pour faciliter l'implémentation. [La seconde édition de SVG 1.1](http://www.w3.org/TR/SVG/), est devenue recommendation en 2011. -<p>SVG 1.2 devait être la prochaine version majeure de SVG mais celle-ci a été abandonnée pour le prochain <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, qui est actuellement en cours de développement. SVG 2.0 suit une approche similaire à CSS3: il divise les composants en plusieurs spécifications librement couplées.</p> +SVG 1.2 devait être la prochaine version majeure de SVG mais celle-ci a été abandonnée pour le prochain [SVG 2.0](http://www.w3.org/TR/SVG2/), qui est actuellement en cours de développement. SVG 2.0 suit une approche similaire à CSS3: il divise les composants en plusieurs spécifications librement couplées. -<p>Outre les recommendations complètes de SVG, le groupe de travail du W3C a introduit SVG Tiny et SVG basic en 2003. Ces deux profils d'adressent principalement aux mobiles. SVG Tiny devrait permettre d'obtenir des graphiques simples pour les périphériques qui ont de faibles capacités. SVG Basic, lui, offre de nombreuses fonctionnalités de SVG, mais n'inclut pas celles qui sont difficiles à implémenter ou lourdes à restituer (comme les animations). En 2008, SVG Tiny 1.2 est devenu une recommendation du W3C.</p> +Outre les recommendations complètes de SVG, le groupe de travail du W3C a introduit SVG Tiny et SVG basic en 2003. Ces deux profils d'adressent principalement aux mobiles. SVG Tiny devrait permettre d'obtenir des graphiques simples pour les périphériques qui ont de faibles capacités. SVG Basic, lui, offre de nombreuses fonctionnalités de SVG, mais n'inclut pas celles qui sont difficiles à implémenter ou lourdes à restituer (comme les animations). En 2008, SVG Tiny 1.2 est devenu une recommendation du W3C. -<p>Une spécification SVG Print était prévue, qui ajouterait la prise en charge de plusieurs pages et une gestion améliorée des couleurs. Ce travail a été interrompu.</p> +Une spécification SVG Print était prévue, qui ajouterait la prise en charge de plusieurs pages et une gestion améliorée des couleurs. Ce travail a été interrompu. -<p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p>
\ No newline at end of file +{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }} diff --git a/files/fr/web/svg/tutorial/other_content_in_svg/index.md b/files/fr/web/svg/tutorial/other_content_in_svg/index.md index 0356f8789c..a7226e604b 100644 --- a/files/fr/web/svg/tutorial/other_content_in_svg/index.md +++ b/files/fr/web/svg/tutorial/other_content_in_svg/index.md @@ -4,36 +4,35 @@ slug: Web/SVG/Tutorial/Other_content_in_SVG translation_of: Web/SVG/Tutorial/Other_content_in_SVG original_slug: Web/SVG/Tutoriel/Contenu_embarque_SVG --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }} -<p>En plus des formes graphiques simples comme les rectangles et les cercles, le format SVG permet d'ajouter d'autres types de contenu aux images.</p> +En plus des formes graphiques simples comme les rectangles et les cercles, le format SVG permet d'ajouter d'autres types de contenu aux images. -<h3 id="embarquer_des_images">Embarquer des images</h3> +### Embarquer des images -<p>De la même façon qu'il est possible d'utiliser la balise <strong>img</strong> en HTML, le format SVG possède un élément <strong><code>image</code></strong> qui a la même utilité. Vous pouvez l'utiliser pour insérer des images bitmap ou vectorielles dans votre image SVG. La spécification définit que les formats PNG, JPEG et SVG au moins doivent être supportés.</p> +De la même façon qu'il est possible d'utiliser la balise **img** en HTML, le format SVG possède un élément **`image`** qui a la même utilité. Vous pouvez l'utiliser pour insérer des images bitmap ou vectorielles dans votre image SVG. La spécification définit que les formats PNG, JPEG et SVG au moins doivent être supportés. -<p>L'image embarquée devient un élément SVG normal. Cela implique que vous pouvez utiliser le découpage, les masques, les filtres, les rotations et toute la panoplie des outils svg sur ce contenu embarqué :</p> +L'image embarquée devient un élément SVG normal. Cela implique que vous pouvez utiliser le découpage, les masques, les filtres, les rotations et toute la panoplie des outils svg sur ce contenu embarqué : -<pre class="brush: html"><svg version="1.1" +```html +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" - width="200" height="200"> -<image x="90" y="-65" width="128" height="146" transform="rotate(45)" - xlink:href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png"/> -</svg> -</pre> + width="200" height="200"> +<image x="90" y="-65" width="128" height="146" transform="rotate(45)" + xlink:href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image/mdn_logo_only_color.png"/> +</svg> +``` -<p>{{ EmbedLiveSample('embarquer_des_images','220','240') }}</p> +{{ EmbedLiveSample('embarquer_des_images','220','240') }} -<h3 id="Embarquer_du_contenu_XML_quelconque">Embarquer du contenu XML quelconque</h3> +### Embarquer du contenu XML quelconque -<p>Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG <code><strong>foreignObject</strong>, </code>son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la <em>largeur</em> et la <em>hauteur</em> de l'objet embarqué afin de définir la place que celui-ci occupera).</p> +Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG `foreignObject, `son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la _largeur_ et la _hauteur_ de l'objet embarqué afin de définir la place que celui-ci occupera). -<p>L'élément <strong><code>foreignObject</code></strong> est donc la bonne méthode pour embarquer du <strong>XHTML</strong> dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG <code>text</code>. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers.</p> +L'élément **`foreignObject`** est donc la bonne méthode pour embarquer du **XHTML** dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG `text`. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers. -<div class="note"> - <p><strong>Note :</strong> Gardez à l'esprit que le contenu du <code>foreignObject</code> doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML.</p> -</div> +> **Note :** Gardez à l'esprit que le contenu du `foreignObject` doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML. -<p>Etant donné que le <code>foreignObject</code> est un élément SVG comme un autre, vous pouvez, comme dans le case de l'élément <code>image</code>, utiliser toute la panoplie des attributs SVG qui pourrait s'appliquer au contenu embarqué.</p> +Etant donné que le `foreignObject` est un élément SVG comme un autre, vous pouvez, comme dans le case de l'élément `image`, utiliser toute la panoplie des attributs SVG qui pourrait s'appliquer au contenu embarqué. -<p>{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }} diff --git a/files/fr/web/svg/tutorial/paths/index.md b/files/fr/web/svg/tutorial/paths/index.md index e0160782bb..9c6b52844e 100644 --- a/files/fr/web/svg/tutorial/paths/index.md +++ b/files/fr/web/svg/tutorial/paths/index.md @@ -7,328 +7,333 @@ tags: translation_of: Web/SVG/Tutorial/Paths original_slug: Web/SVG/Tutoriel/Paths --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }} -<p>L’élément <a href="/fr/Web/SVG/Element/path"><code><path></code></a> (<em>chemin</em> en français) est le plus versatile des éléments de la bibliothèque SVG parmi les <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base">formes basiques</a>. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.</p> +L’élément [`<path>`](/fr/Web/SVG/Element/path) (_chemin_ en français) est le plus versatile des éléments de la bibliothèque SVG parmi les [formes basiques](/fr/docs/Web/SVG/Tutoriel/Formes_de_base). Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres. -<p>Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Lignes_brisées">lignes brisées</a> (<em>polylines</em>). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG.</p> +Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des [lignes brisées](/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Lignes_brisées) (_polylines_). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG. -<p>La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes.</p> +La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes. -<p>Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande <code>M</code> (pour <em>MoveTo, </em>« aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande.</p> +Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande `M` (pour _MoveTo,_ « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande. -<p>De plus, toutes les commandes se présentent sous deux formes: une <strong>lettre majuscule</strong> spécifie des coordonnées absolues dans la page, une <strong>lettre minuscule</strong> spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »).</p> +De plus, toutes les commandes se présentent sous deux formes: une **lettre majuscule** spécifie des coordonnées absolues dans la page, une **lettre minuscule** spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »). -<p>Les coordonnées dans l’attribut <code>d</code> sont <strong>toujours sans unité</strong> et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins.</p> +Les coordonnées dans l’attribut `d` sont **toujours sans unité** et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins. -<h2 id="Commandes_pour_les_lignes">Commandes pour les lignes</h2> +## Commandes pour les lignes -<p>Il existe cinq commandes pour tracer des lignes avec un élément <code><path></code>. Ces commandes permettent de tracer une ligne droite entre deux points.</p> +Il existe cinq commandes pour tracer des lignes avec un élément `<path>`. Ces commandes permettent de tracer une ligne droite entre deux points. -<h3 id="MoveTo">MoveTo</h3> +### MoveTo -<p>La première commande, « aller à », invoquée avec <code>M</code> (<em>MoveTo</em>), a été décrite ci-dessus. Elle prend en paramètres les coordonnées <code>x</code> et <code>y</code> où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple :</p> +La première commande, « aller à », invoquée avec `M` (_MoveTo_), a été décrite ci-dessus. Elle prend en paramètres les coordonnées `x` et `y` où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple : -<pre>M x y -</pre> + M x y -<p>ou</p> +ou -<pre>m dx dy</pre> + m dx dy -<p>Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position:</p> +Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position: -<p><img alt="" src="blank_path_area.png"></p> + -<pre class="brush: xml"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> - <path d="M10 10"/> +```xml +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 10"/> - <!-- Indique la position --> - <circle cx="10" cy="10" r="2" fill="red"/> -</svg></pre> + <!-- Indique la position --> + <circle cx="10" cy="10" r="2" fill="red"/> +</svg> +``` -<h3 id="LineTo_Horizontal_LineTo_Vertical_LineTo">LineTo, Horizontal LineTo, Vertical LineTo</h3> +### LineTo, Horizontal LineTo, Vertical LineTo -<p>Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec <code>L</code> (<em>LineTo</em>). <code>L</code> prend deux paramètres, les coordonnées <code>x</code> et <code>y</code>, et dessine une ligne depuis la position actuelle vers la nouvelle position.</p> +Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec `L` (_LineTo_). `L` prend deux paramètres, les coordonnées `x` et `y`, et dessine une ligne depuis la position actuelle vers la nouvelle position. -<pre>L x y (ou l dx dy) -</pre> + L x y (ou l dx dy) -<p>Il existe deux formes abrégées pour dessiner des lignes horizontales ou verticales. <code>H</code> (<em>Horizontal LineTo</em>) dessine une ligne horizontale, et <code>V</code> (<em>Vertical LineTo</em>) dessine une ligne verticale. Ces deux commandes ne prennent qu’un seul argument car elles ne se déplacent que le long d’une direction.</p> +Il existe deux formes abrégées pour dessiner des lignes horizontales ou verticales. `H` (_Horizontal LineTo_) dessine une ligne horizontale, et `V` (_Vertical LineTo_) dessine une ligne verticale. Ces deux commandes ne prennent qu’un seul argument car elles ne se déplacent que le long d’une direction. -<pre>H x (ou h dx) -V y (ou v dy) -</pre> + H x (ou h dx) + V y (ou v dy) -<p>Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <code><rect></code>). Il est composé uniquement de lignes horizontales et verticales :</p> +Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément `<rect>`). Il est composé uniquement de lignes horizontales et verticales : -<p><img alt="" src="path_line_commands.png"></p> + -<pre class="brush: xml"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> - <path d="M10 10 H 90 V 90 H 10 L 10 10"/> +```xml +<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 10 H 90 V 90 H 10 L 10 10"/> - <!-- Indique les points --> - <circle cx="10" cy="10" r="2" fill="red"/> - <circle cx="90" cy="90" r="2" fill="red"/> - <circle cx="90" cy="10" r="2" fill="red"/> - <circle cx="10" cy="90" r="2" fill="red"/> -</svg></pre> + <!-- Indique les points --> + <circle cx="10" cy="10" r="2" fill="red"/> + <circle cx="90" cy="90" r="2" fill="red"/> + <circle cx="90" cy="10" r="2" fill="red"/> + <circle cx="10" cy="90" r="2" fill="red"/> +</svg> +``` -<h3 id="ClosePath">ClosePath</h3> +### ClosePath -<p>On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec <code>Z</code> (<em>ClosePath</em>). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du <code>path</code>, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule.</p> +On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec `Z` (_ClosePath_). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du `path`, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule. -<pre>Z (ou z) -</pre> + Z (ou z) -<p>Ainsi, notre chemin précédent peut se raccourcir comme ceci:</p> +Ainsi, notre chemin précédent peut se raccourcir comme ceci: -<pre class="brush: xml"><path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> -</pre> +```xml +<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> +``` -<h2 id="Commandes_relatives">Commandes relatives</h2> +## Commandes relatives -<p>On aurait également pu utiliser des commandes relatives pour dessiner la même image.</p> +On aurait également pu utiliser des commandes relatives pour dessiner la même image. -<p>Les commandes relatives sont invoquées en utilisant des lettres minuscules. Plutôt que de déplacer le curseur vers des coordonnées absolues, elles le déplacent relativement à sa dernière position. Par exemple, puisque notre boîte est de dimension 80x80, l’élement <code>path</code> aurait pu être écrit:</p> +Les commandes relatives sont invoquées en utilisant des lettres minuscules. Plutôt que de déplacer le curseur vers des coordonnées absolues, elles le déplacent relativement à sa dernière position. Par exemple, puisque notre boîte est de dimension 80x80, l’élement `path` aurait pu être écrit: -<pre class="brush: xml"><path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> -</pre> +```xml +<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> +``` -<p>Le chemin va se positionner au point (10, 10), se déplacer horizontalement de 80 points vers la droite, puis de 80 points vers le bas, de 80 points vers la gauche, et enfin revenir à son point de départ.</p> +Le chemin va se positionner au point (10, 10), se déplacer horizontalement de 80 points vers la droite, puis de 80 points vers le bas, de 80 points vers la gauche, et enfin revenir à son point de départ. -<p>Dans ces exemples, il serait probablement plus simple d’utiliser un élément <code><polygon></code> ou <code><polyline></code>. Cependant, les chemins sont si couramment utilisés en dessin SVG qu'un développeur peut se sentir plus à l’aise avec eux. Il n’y a pas de réel avantage ou inconvénient à utiliser l’un ou l’autre.</p> +Dans ces exemples, il serait probablement plus simple d’utiliser un élément `<polygon>` ou `<polyline>`. Cependant, les chemins sont si couramment utilisés en dessin SVG qu'un développeur peut se sentir plus à l’aise avec eux. Il n’y a pas de réel avantage ou inconvénient à utiliser l’un ou l’autre. -<h2 id="Commandes_pour_les_courbes">Commandes pour les courbes</h2> +## Commandes pour les courbes -<p>Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">page Wikipedia Courbe de Bézier</a>.</p> +Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la [page Wikipedia Courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier). -<p>Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments <code>path</code>: l’une cubique, invoquée avec <code>C</code>, et l’autre quadratique, invoquée avec <code>Q</code>.</p> +Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments `path`: l’une cubique, invoquée avec `C`, et l’autre quadratique, invoquée avec `Q`. -<h3 id="CurveTo">CurveTo</h3> +### CurveTo -<p>La courbe de Bézier cubique, <code>C</code> (<em>CurveTo</em>), est la forme de courbe Bézier la plus complexe. Ce type de courbe nécessite deux points de contrôle. Ainsi, pour créer une courbe de Bézier cubique, vous devez spécifier trois paires de coordonnées.</p> +La courbe de Bézier cubique, `C` (_CurveTo_), est la forme de courbe Bézier la plus complexe. Ce type de courbe nécessite deux points de contrôle. Ainsi, pour créer une courbe de Bézier cubique, vous devez spécifier trois paires de coordonnées. -<pre>C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) -</pre> + C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) -<p>Les deux premières paires de coordonnées sont les points de contrôle: le point de contrôle pour le début de la courbe est (x1, y1), et (x2, y2) est celui de la fin de la courbe. La dernière paire de coordonnées (x, y) est l’endroit où vous voulez que la ligne se termine.</p> +Les deux premières paires de coordonnées sont les points de contrôle: le point de contrôle pour le début de la courbe est (x1, y1), et (x2, y2) est celui de la fin de la courbe. La dernière paire de coordonnées (x, y) est l’endroit où vous voulez que la ligne se termine. -<p>Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.</p> +Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité. -<p><img src="shortcut_cubic_bézier_with_grid.png"></p> + -<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> - <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> - <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> - <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> - <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> - <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> - <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> - <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> - <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> - <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> -</svg> -</pre> +```xml +<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> + <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> + <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> + <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> + <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> + <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> + <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> + <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> + <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> +</svg> +``` -<p>L’exemple ci-dessus crée neuf courbes de Bézier cubiques. De gauche à droite, les points de contrôle sont de plus en plus espacés horizontalement. De haut en bas, ils sont de plus en plus éloignés des extrémités. La chose à remarquer ici est que la courbe commence dans la direction du premier point de contrôle, puis se courbe de manière à terminer le long de la direction du second point de contrôle.</p> +L’exemple ci-dessus crée neuf courbes de Bézier cubiques. De gauche à droite, les points de contrôle sont de plus en plus espacés horizontalement. De haut en bas, ils sont de plus en plus éloignés des extrémités. La chose à remarquer ici est que la courbe commence dans la direction du premier point de contrôle, puis se courbe de manière à terminer le long de la direction du second point de contrôle. -<h3 id="Shorthand_CurveTo">Shorthand CurveTo</h3> +### Shorthand CurveTo -<p>Vous pouvez lier ensemble plusieurs courbes de Bézier pour créer des formes harmonieuses étendues. Souvent, le point de contrôle d’un côté d’une extrémité sera une réflexion du point de contrôle utilisé de l’autre côté, afin de garder une pente constante. Dans ce cas, vous pouvez utiliser une version raccourcie de la courbe cubique, désignée par la commande <code>S</code>, ou <code>s</code> (<em>Shorthand CuveTo</em>).</p> +Vous pouvez lier ensemble plusieurs courbes de Bézier pour créer des formes harmonieuses étendues. Souvent, le point de contrôle d’un côté d’une extrémité sera une réflexion du point de contrôle utilisé de l’autre côté, afin de garder une pente constante. Dans ce cas, vous pouvez utiliser une version raccourcie de la courbe cubique, désignée par la commande `S`, ou `s` (_Shorthand CuveTo_). -<pre>S x2 y2, x y (ou s dx2 dy2, dx dy) -</pre> + S x2 y2, x y (ou s dx2 dy2, dx dy) -<p><code>S</code> dessine une courbe de Bézier cubique entre le point actuel et (x, y).</p> +`S` dessine une courbe de Bézier cubique entre le point actuel et (x, y). -<ul> - <li>Si elle suit une autre commande <code>S</code> ou <code>C</code>, le premier point de contrôle est calculé pour être le reflet du point de contrôle précédent.</li> - <li>Si la commande <code>S</code> ne suit pas une autre commande <code>S</code> ou <code>C</code>, la position actuelle du curseur est utilisée comme premier point de contrôle. Dans ce cas, le résultat est le même que ce que la commande <code>Q</code> aurait produit avec les mêmes paramètres.</li> -</ul> +- Si elle suit une autre commande `S` ou `C`, le premier point de contrôle est calculé pour être le reflet du point de contrôle précédent. +- Si la commande `S` ne suit pas une autre commande `S` ou `C`, la position actuelle du curseur est utilisée comme premier point de contrôle. Dans ce cas, le résultat est le même que ce que la commande `Q` aurait produit avec les mêmes paramètres. -<p>(x2, y2) est le second point de contrôle.</p> +(x2, y2) est le second point de contrôle. -<p>Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.</p> +Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu. -<p><img src="shortcut_cubic_bézier_with_grid.png"></p> + -<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> - <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> -</svg></pre> +```xml +<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> +</svg> +``` -<h3 id="Quadratic_Bezier_CurveTo">Quadratic Bezier CurveTo</h3> +### Quadratic Bezier CurveTo -<p>L’autre type de courbe, la courbe de Bézier quadratique, est invoquée avec <code>Q</code> (<em>Quadratic Bezier CurveTo</em>). Elle est plus simple que la version cubique puisqu'elle ne nécessite qu'un point de contrôle. Le point de contrôle détermine la pente de la courbe à la fois au point de départ et au point d’arrivée.</p> +L’autre type de courbe, la courbe de Bézier quadratique, est invoquée avec `Q` (_Quadratic Bezier CurveTo_). Elle est plus simple que la version cubique puisqu'elle ne nécessite qu'un point de contrôle. Le point de contrôle détermine la pente de la courbe à la fois au point de départ et au point d’arrivée. -<pre>Q x1 y1, x y (ou q dx1 dy1, dx dy) -</pre> + Q x1 y1, x y (ou q dx1 dy1, dx dy) -<p>(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe.</p> +(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe. -<p><img alt="courbe de Bézier quadratique avec une grille" src="quadratic_bézier_with_grid.png"></p> + +```xml +<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> +</svg> +``` -<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> - <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> -</svg></pre> +### Shorthand Quadratic Bezier CurveTo -<h3 id="Shorthand_Quadratic_Bezier_CurveTo">Shorthand Quadratic Bezier CurveTo</h3> +Comme pour la courbe cubique, il existe un raccourci pour lier ensemble plusieurs courbes quadratiques, invoqué avec `T` (_Shorthand Quadratic Bezier CuveTo_). -<p>Comme pour la courbe cubique, il existe un raccourci pour lier ensemble plusieurs courbes quadratiques, invoqué avec <code>T</code> (<em>Shorthand Quadratic Bezier CuveTo</em>).</p> + T x y (ou t dx dy) -<pre>T x y (ou t dx dy) -</pre> +Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités. -<p>Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités.</p> +> **Note :** Ce raccourci fonctionne uniquement si la commande précédente est une commande `Q` ou `T`. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes. -<div class="note"> - <p><strong>Note :</strong> Ce raccourci fonctionne uniquement si la commande précédente est une commande <code>Q</code> ou <code>T</code>. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.</p> -</div> + -<p><img src="shortcut_quadratic_bézier_with_grid.png"></p> +```xml +<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> +</svg> +``` +Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne. -<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> - <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> -</svg></pre> +### Elliptical Arc -<p>Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.</p> +Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec `A` (_Elliptical Arc_). Les arcs sont des sections de cercles ou d’ellipses. -<h3 id="Arcs">Elliptical Arc</h3> +L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcourant la ligne le long d'une ellipse définie par `rx` et `ry`. Le centre de l'ellipse (cx, cy) est calculé automatiquement pour satisfaire les contraintes imposées par les autres paramètres. Si vous avez besoin d'un rappel sur les ellipses, voyez les [formes de base](/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Ellipses). Ensemble, ces quatre valeurs définissent la structure de base de l’arc. -<p>Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec <code>A</code> (<em>Elliptical Arc</em>). Les arcs sont des sections de cercles ou d’ellipses.</p> + A rx ry x-axis-rotation large-arc-flag sweep-flag x y + a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy -<p>L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcourant la ligne le long d'une ellipse définie par <code>rx</code> et <code>ry</code>. Le centre de l'ellipse (cx, cy) est calculé automatiquement pour satisfaire les contraintes imposées par les autres paramètres. Si vous avez besoin d'un rappel sur les ellipses, voyez les <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Ellipses">formes de base</a>. Ensemble, ces quatre valeurs définissent la structure de base de l’arc.</p> +#### x-axis-rotation -<pre>A rx ry x-axis-rotation large-arc-flag sweep-flag x y -a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy -</pre> +`x-axis-rotation` décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple: -<h4 id="x-axis-rotation">x-axis-rotation</h4> + -<p><code>x-axis-rotation</code> décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:</p> +```xml +<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> + <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" /> -<p><img alt="SVGArcs_XAxisRotation_with_grid" src="svgarcs_xaxisrotation_with_grid.png"></p> + <path d="M110 215 a 30 50 0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" /> + <path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" /> +</svg> +``` -<pre class="brush: xml"><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> - <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" /> +Cet exemple montre deux arcs elliptiques de rayon `dx` 30 et rayon `dy` 50. - <path d="M110 215 a 30 50 0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" /> - <path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" /> -</svg></pre> +- Pour le premier arc, le paramètre `x-axis-rotation` a été laissé à 0, et l’ellipse autour de laquelle passe l’arc (montrée en gris) est orientée verticalement. +- Pour le second arc en revanche, `x-axis-rotation` est passé à -45 degrés. Cela pivote l’ellipse, de telle sorte que son petit axe (dy) est aligné avec la direction du chemin, comme illustré par la seconde ellipse dans l’image. -<p>Cet exemple montre deux arcs elliptiques de rayon <code>dx</code> 30 et rayon <code>dy</code> 50.</p> +#### sweep-flag -<ul> - <li>Pour le premier arc, le paramètre <code>x-axis-rotation</code> a été laissé à 0, et l’ellipse autour de laquelle passe l’arc (montrée en gris) est orientée verticalement.</li> - <li>Pour le second arc en revanche, <code>x-axis-rotation</code> est passé à -45 degrés. Cela pivote l’ellipse, de telle sorte que son petit axe (dy) est aligné avec la direction du chemin, comme illustré par la seconde ellipse dans l’image.</li> -</ul> +Pour un rayon `rx` et un rayon `ry` donnés, il existe deux ellipses pouvant connecter deux points quelconques. -<h4 id="sweep-flag">sweep-flag</h4> +`sweep-flag` détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru. -<p>Pour un rayon <code>rx</code> et un rayon <code>ry</code> donnés, il existe deux ellipses pouvant connecter deux points quelconques.</p> +```html +<!-- sweep-flag: 0 --> +<path d="M 125,75 a100,50 0 0,0 100,50" + stroke="red" stroke-width="6" fill="none" /> -<p><code>sweep-flag</code> détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru.</p> +<!-- sweep-flag: 1 --> +<path d="M 125,75 a100,50 0 0,1 100,50" + stroke="blue" stroke-width="6" fill="none" /> +``` -<pre class="brush: html"><!-- sweep-flag: 0 --> -<path d="M 125,75 a100,50 0 0,0 100,50" - stroke="red" stroke-width="6" fill="none" /> +##### Exemple jouable -<!-- sweep-flag: 1 --> -<path d="M 125,75 a100,50 0 0,1 100,50" - stroke="blue" stroke-width="6" fill="none" /> -</pre> +```html hidden +<svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> -<h5>Exemple jouable</h5> + <g font-family="Verdana" font-size="13" > + <ellipse cx="125" cy="125" rx="100" ry="50" + fill="none" stroke="#888888" stroke-width="2" /> + <ellipse cx="225" cy="75" rx="100" ry="50" + fill="none" stroke="#888888" stroke-width="2" /> + <text x="120" y="70" text-anchor="end">Arc start</text> + <text x="230" y="140">Arc end</text> + </g> -<pre class="brush: html hidden"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> + <!-- large-arc-flag: 0 --> + <path d="M 125,75 a100,50 0 0,0 100,50" + stroke="red" stroke-width="6" fill="none" /> - <g font-family="Verdana" font-size="13" > - <ellipse cx="125" cy="125" rx="100" ry="50" - fill="none" stroke="#888888" stroke-width="2" /> - <ellipse cx="225" cy="75" rx="100" ry="50" - fill="none" stroke="#888888" stroke-width="2" /> - <text x="120" y="70" text-anchor="end">Arc start</text> - <text x="230" y="140">Arc end</text> - </g> + <!-- large-arc-flag: 1 --> + <path d="M 125,75 a100,50 0 0,1 100,50" + stroke="blue" stroke-width="6" fill="none" /> +</svg> +``` - <!-- large-arc-flag: 0 --> - <path d="M 125,75 a100,50 0 0,0 100,50" - stroke="red" stroke-width="6" fill="none" /> +{{ EmbedLiveSample('exemple_jouable', '100%', 200) }} - <!-- large-arc-flag: 1 --> - <path d="M 125,75 a100,50 0 0,1 100,50" - stroke="blue" stroke-width="6" fill="none" /> -</svg></pre> -</div> +#### large-arc-flag -<p>{{ EmbedLiveSample('exemple_jouable', '100%', 200) }}</p> +Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles. -<h4 id="large-arc-flag">large-arc-flag</h4> +`large-arc-flag` détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée. -<p>Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles.</p> +```html +<!-- large-arc-flag: 0 --> +<path d="M 125,75 a100,50 0 0,0 100,50" + stroke="red" stroke-width="6" fill="none" /> -<p><code>large-arc-flag</code> détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée.</p> +<!-- large-arc-flag: 1 --> +<path d="M 125,75 a100,50 0 1,0 100,50" + stroke="blue" stroke-width="6" fill="none" /> +``` -<pre class="brush: html"><!-- large-arc-flag: 0 --> -<path d="M 125,75 a100,50 0 0,0 100,50" - stroke="red" stroke-width="6" fill="none" /> +#### Code jouable 2 -<!-- large-arc-flag: 1 --> -<path d="M 125,75 a100,50 0 1,0 100,50" - stroke="blue" stroke-width="6" fill="none" /> -</pre> +```html hidden +<svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> -<h4 id="code_jouable_2">Code jouable 2</h4> + <g font-family="Verdana" font-size="13" > + <ellipse cx="125" cy="125" rx="100" ry="50" + fill="none" stroke="#888888" stroke-width="2" /> + <ellipse cx="225" cy="75" rx="100" ry="50" + fill="none" stroke="#888888" stroke-width="2" /> + <text x="120" y="70" text-anchor="end">Arc start</text> + <text x="230" y="140">Arc end</text> + </g> -<pre class="brush: html hidden"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> + <!-- sweep-flag: 0 --> + <path d="M 125,75 a100,50 0 0,0 100,50" + stroke="red" stroke-width="6" fill="none" /> - <g font-family="Verdana" font-size="13" > - <ellipse cx="125" cy="125" rx="100" ry="50" - fill="none" stroke="#888888" stroke-width="2" /> - <ellipse cx="225" cy="75" rx="100" ry="50" - fill="none" stroke="#888888" stroke-width="2" /> - <text x="120" y="70" text-anchor="end">Arc start</text> - <text x="230" y="140">Arc end</text> - </g> + <!-- sweep-flag: 1 --> + <path d="M 125,75 a100,50 0 1,0 100,50" + stroke="blue" stroke-width="6" fill="none" /> +</svg> +``` - <!-- sweep-flag: 0 --> - <path d="M 125,75 a100,50 0 0,0 100,50" - stroke="red" stroke-width="6" fill="none" /> +{{ EmbedLiveSample('code_jouable_2', '100%', 200) }} - <!-- sweep-flag: 1 --> - <path d="M 125,75 a100,50 0 1,0 100,50" - stroke="blue" stroke-width="6" fill="none" /> -</svg></pre> +L’exemple ci-dessous montre les quatre combinaisons possibles avec `sweep-flag` et `large-arc-flag`: -<p>{{ EmbedLiveSample('code_jouable_2', '100%', 200) }}</p> + -<p>L’exemple ci-dessous montre les quatre combinaisons possibles avec <code>sweep-flag</code> et <code>large-arc-flag</code>:</p> - -<p><img alt="" src="svgarcs_flags.png"></p> - -<pre class="brush: xml"><svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> - <path d="M80 80 +```xml +<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> + <path d="M80 80 A 45 45, 0, 0, 0, 125 125 - L 125 80 Z" fill="green"/> - <path d="M230 80 + L 125 80 Z" fill="green"/> + <path d="M230 80 A 45 45, 0, 1, 0, 275 125 - L 275 80 Z" fill="red"/> - <path d="M80 230 + L 275 80 Z" fill="red"/> + <path d="M80 230 A 45 45, 0, 0, 1, 125 275 - L 125 230 Z" fill="purple"/> - <path d="M230 230 + L 125 230 Z" fill="purple"/> + <path d="M230 230 A 45 45, 0, 1, 1, 275 275 - L 275 230 Z" fill="blue"/> -</svg></pre> + L 275 230 Z" fill="blue"/> +</svg> +``` -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>Les arcs sont un moyen facile de créer des portions de cercle ou d’ellipse dans vos dessins. Par exemple pour dessiner un graphique en camembert. Si vous êtes en train de migrer vers SVG depuis <a href="/fr/docs/Web/HTML/Canvas">Canvas</a>, les arcs peuvent être la partie la plus difficile à appréhender, mais sont également bien plus puissants.</p> +Les arcs sont un moyen facile de créer des portions de cercle ou d’ellipse dans vos dessins. Par exemple pour dessiner un graphique en camembert. Si vous êtes en train de migrer vers SVG depuis [Canvas](/fr/docs/Web/HTML/Canvas), les arcs peuvent être la partie la plus difficile à appréhender, mais sont également bien plus puissants. -<p>Comme les points de départ et d’arrivée de tout chemin parcourant un cercle sont confondus, un nombre infini de cercles peuvent être choisis, par conséquent le chemin est indéfini. Il est possible d’en faire une approximation en prenant des points de départ et d’arrivée légèrement décalés, puis de les connecter à l’aide d’un autre segment de chemin. Dans ces conditions, il est souvent plus facile d’utiliser un véritable élément cercle ou ellipse à la place.</p> +Comme les points de départ et d’arrivée de tout chemin parcourant un cercle sont confondus, un nombre infini de cercles peuvent être choisis, par conséquent le chemin est indéfini. Il est possible d’en faire une approximation en prenant des points de départ et d’arrivée légèrement décalés, puis de les connecter à l’aide d’un autre segment de chemin. Dans ces conditions, il est souvent plus facile d’utiliser un véritable élément cercle ou ellipse à la place. -<p>Vous pouvez trouver une démo interactive à l'adresse suivante, pour vous aider à comprendre les concepts derrière les arcs SVG: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (testé avec Chrome et Firefox seulement, peut ne pas marcher avec votre navigateur).</p> +Vous pouvez trouver une démo interactive à l'adresse suivante, pour vous aider à comprendre les concepts derrière les arcs SVG: <http://codepen.io/lingtalfi/pen/yaLWJG> (testé avec Chrome et Firefox seulement, peut ne pas marcher avec votre navigateur). -<p>{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }} diff --git a/files/fr/web/svg/tutorial/patterns/index.md b/files/fr/web/svg/tutorial/patterns/index.md index 703d6f3935..301cc9a134 100644 --- a/files/fr/web/svg/tutorial/patterns/index.md +++ b/files/fr/web/svg/tutorial/patterns/index.md @@ -7,88 +7,91 @@ tags: translation_of: Web/SVG/Tutorial/Patterns original_slug: Web/SVG/Tutoriel/Motifs --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }} -<p>Les motifs (<em>patterns</em> en anglais) sont sans aucun doute les types de remplissages les plus complexes à utiliser en SVG. Ce sont également des outils très puissants, ils méritent donc d'être abordés pour que vous en connaissiez les fondamentaux. Comme les dégradés, l'élément {{SVGElement('pattern')}} doit être placé dans la section <code><defs></code> du fichier SVG.</p> +Les motifs (_patterns_ en anglais) sont sans aucun doute les types de remplissages les plus complexes à utiliser en SVG. Ce sont également des outils très puissants, ils méritent donc d'être abordés pour que vous en connaissiez les fondamentaux. Comme les dégradés, l'élément {{SVGElement('pattern')}} doit être placé dans la section `<defs>` du fichier SVG. -<h2 id="Exemple">Exemple</h2> +## Exemple -<pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> +```html +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> - <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> -</svg></pre> + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> +</svg> +``` -<p>{{ EmbedLiveSample('Exemple','220','220','/files/725/SVG_Pattern_Example.png') }}</p> +{{ EmbedLiveSample('Exemple','220','220','/files/725/SVG_Pattern_Example.png') }} -<p>À l'intérieur de l'élément <code>pattern</code>, vous pouvez inclure toutes les formes de bases de SVG et les styliser de la même manière que d'habitude (remplissage, contour, dégradés, opacité, etc). Dans notre exemple, on a dessiné un cercle et deux rectangles (qui se chevauchent et dont l'un est deux fois plus grand que l'autre pour remplir le motif en entier).</p> +À l'intérieur de l'élément `pattern`, vous pouvez inclure toutes les formes de bases de SVG et les styliser de la même manière que d'habitude (remplissage, contour, dégradés, opacité, etc). Dans notre exemple, on a dessiné un cercle et deux rectangles (qui se chevauchent et dont l'un est deux fois plus grand que l'autre pour remplir le motif en entier). -<p>La partie pouvant apporter le plus de confusion avec les motifs est le système d'unité et la taille des éléments.</p> +La partie pouvant apporter le plus de confusion avec les motifs est le système d'unité et la taille des éléments. -<h2 id="Unités_du_motif_objectBoundingBox">Unités du motif: objectBoundingBox</h2> +## Unités du motif: objectBoundingBox -<p>Les attributs <code>width</code> et <code>height</code> sur l'élément <code>pattern</code> décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs <code>x</code> et <code>y</code> sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin.</p> +Les attributs `width` et `height` sur l'élément `pattern` décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs `x` et `y` sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin. -<p>Même principe que l'attribut <code>gradientUnits</code> (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut <code>patternUnits</code>, pour spécifier l'unité utilisée par le motif. La valeur par défaut est "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit <code>height</code> et <code>width</code> à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet.</p> +Même principe que l'attribut `gradientUnits` (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut `patternUnits`, pour spécifier l'unité utilisée par le motif. La valeur par défaut est "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit `height` et `width` à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet. -<p>De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de <code>x</code> et <code>y</code> à 0.05 (10/200 = 0.05).</p> +De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de `x` et `y` à 0.05 (10/200 = 0.05). -<h2 id="Unités_du_contenu_userSpaceOnUse">Unités du contenu: userSpaceOnUse</h2> +## Unités du contenu: userSpaceOnUse -<p>Contrairement aux dégradés, les motifs ont un deuxième argument, <code>patternContentUnits</code>, qui lui spécifie l'unité utilisée par les formes à l'intérieur du motif. La valeur par défaut est "userSpaceOnUse", l'opposé de l'attribut <code>patternUnits</code>. Cela signifie qu'à moins de définir ces attributs aurement (<code>patternContentUnits</code> et/ou <code>patternUnits</code>), les formes que vous dessinez à l'intérieur du motif ont un système de coordonnées différent du motif, ce qui peut rendre les choses un peu déroutantes si vous écrivez le code à la main.</p> +Contrairement aux dégradés, les motifs ont un deuxième argument, `patternContentUnits`, qui lui spécifie l'unité utilisée par les formes à l'intérieur du motif. La valeur par défaut est "userSpaceOnUse", l'opposé de l'attribut `patternUnits`. Cela signifie qu'à moins de définir ces attributs aurement (`patternContentUnits` et/ou `patternUnits`), les formes que vous dessinez à l'intérieur du motif ont un système de coordonnées différent du motif, ce qui peut rendre les choses un peu déroutantes si vous écrivez le code à la main. -<p>Pour que cela fonctionne dans l'exemple ci-dessus, nous avons dû prendre en compte la taille du rectangle sur lequel est appliqué le motif (200px) et le fait que l'on veut répéter le motif 4 fois horizontalement et verticalement, donc que le motif sera un carré de 50x50. Les deux rectangles et le cercle à l'intérieur du motif ont été dimensionnés pour tenir dans un carré de 50x50. Tout ce qui sortirait en dehors ne serait pas affiché.</p> +Pour que cela fonctionne dans l'exemple ci-dessus, nous avons dû prendre en compte la taille du rectangle sur lequel est appliqué le motif (200px) et le fait que l'on veut répéter le motif 4 fois horizontalement et verticalement, donc que le motif sera un carré de 50x50. Les deux rectangles et le cercle à l'intérieur du motif ont été dimensionnés pour tenir dans un carré de 50x50. Tout ce qui sortirait en dehors ne serait pas affiché. -<p>La chose à retenir est que si l'objet change de taille, le motif lui-même sera mis à l'échelle mais les objets à l'intérieur non. Ainsi, alors qu'on aura toujours 4 motifs qui se répètent horizontalement et verticalement, les objets à l'intérieur du motif garderont la même taille, et une zone vide sera affichée.</p> +La chose à retenir est que si l'objet change de taille, le motif lui-même sera mis à l'échelle mais les objets à l'intérieur non. Ainsi, alors qu'on aura toujours 4 motifs qui se répètent horizontalement et verticalement, les objets à l'intérieur du motif garderont la même taille, et une zone vide sera affichée. +### Exemple -<h3>Exemple</h6> +```html hidden +<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> -<pre class="brush: html hidden"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> - <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> +</svg> - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> -</svg> - -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> -rect.setAttribute('width', 300);</textarea> -</pre> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +rect.setAttribute('width', 300);</textarea> +``` -<pre class="brush: js hidden">var svg = document.getElementById('svg'), +```js hidden +var svg = document.getElementById('svg'), rect = svg.lastElementChild; var textarea = document.getElementById('code'), @@ -109,55 +112,58 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawSvg); window.addEventListener('load', drawSvg); -</pre> - -<p>{{ EmbedLiveSample('exemple_jouable','220','350') }}</p> - -<h2 id="Unités_du_contenu_objectBoundingBox">Unités du contenu: objectBoundingBox</h2> - -<p>En changeant l'attribut <code>patternContentUnits</code>, on peut utiliser le même système d'unité pour tous les éléments:</p> - -<pre class="brush: xml"> <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> - <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> - <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> - <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> -</pre> - -<p>Maintenant, parce le contenu du motif utilise le même système d'unité que le motif, le motif redimensionne automatiquement son contenu. Cela contraste avec le système "userSpaceOnUse" par défaut, où lorsque le motif change le taille, le contenu garde la même taille.</p> - -<h3 id="code_jouable_2">Code jouable 2</h3> - -<pre class="brush: html hidden"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> - <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> - <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> - <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> -</svg> - -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> -rect.setAttribute('width', 300);</textarea> -</pre> - -<pre class="brush: js hidden">var svg = document.getElementById('svg'), +``` + +{{ EmbedLiveSample('exemple_jouable','220','350') }} + +## Unités du contenu: objectBoundingBox + +En changeant l'attribut `patternContentUnits`, on peut utiliser le même système d'unité pour tous les éléments: + +```xml + <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +``` + +Maintenant, parce le contenu du motif utilise le même système d'unité que le motif, le motif redimensionne automatiquement son contenu. Cela contraste avec le système "userSpaceOnUse" par défaut, où lorsque le motif change le taille, le contenu garde la même taille. + +### Code jouable 2 + +```html hidden +<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> +</svg> + +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +rect.setAttribute('width', 300);</textarea> +``` + +```js hidden +var svg = document.getElementById('svg'), rect = svg.lastElementChild; var textarea = document.getElementById('code'), @@ -178,59 +184,60 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawSvg); window.addEventListener('load', drawSvg); -</pre> +``` + +{{ EmbedLiveSample('code_jouable_2','220','350') }} + +> **Note :** Dans Gecko, les cercles semblent avoir du mal à être dessinés si le rayon est inférieur à 0.075 (on ignore s'il s'agit d'un bug de l'élément pattern ou non). Pour contourner ce problème, il est probablement préférable d'éviter de dessiner des cercles dans des unités "objectBoundingBox". + +## Unités du motif: userSpaceOnUse + +Aucune des utilisations vu jusqu'ici ne correspond à l'usage habituel des motifs (tel qu'on le ferait en CSS): les motifs ont généralement une taille définie et se répètent indépendamment de la taille de l'objet sur lequel il est appliqué. Pour créer quelque chose comme ça, le motif et le contenu doivent être dessiné en mode "userSpaceOnUse": + +```xml + <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +``` + +Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous modifiez la taille de l'objet ultérieurement. + +### Exemple jouable + +```html hidden +<svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> -<p>{{ EmbedLiveSample('code_jouable_2','220','350') }}</p> + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> +</svg> -<div class="note"> - <p><strong>Note :</strong> Dans Gecko, les cercles semblent avoir du mal à être dessinés si le rayon est inférieur à 0.075 (on ignore s'il s'agit d'un bug de l'élément pattern ou non). Pour contourner ce problème, il est probablement préférable d'éviter de dessiner des cercles dans des unités "objectBoundingBox".</p> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> +<textarea id="code" class="playable-code"> +rect.setAttribute('width', 300);</textarea> +``` -<h2 id="Unités_du_motif_userSpaceOnUse">Unités du motif: userSpaceOnUse</h2> - -<p>Aucune des utilisations vu jusqu'ici ne correspond à l'usage habituel des motifs (tel qu'on le ferait en CSS): les motifs ont généralement une taille définie et se répètent indépendamment de la taille de l'objet sur lequel il est appliqué. Pour créer quelque chose comme ça, le motif et le contenu doivent être dessiné en mode "userSpaceOnUse":</p> - -<pre class="brush: xml"> <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> -</pre> - -<p>Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous modifiez la taille de l'objet ultérieurement.</p> - -<h3>Exemple jouable</h3> - -<pre class="brush: html hidden"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> -</svg> - -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> -rect.setAttribute('width', 300);</textarea> -</pre> - -<pre class="brush: js hidden">var svg = document.getElementById('svg'), +```js hidden +var svg = document.getElementById('svg'), rect = svg.lastElementChild; var textarea = document.getElementById('code'), @@ -251,14 +258,14 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawSvg); window.addEventListener('load', drawSvg); -</pre> +``` -<p>{{ EmbedLiveSample('exemple_jouable_3','220','350') }}</p> +{{ EmbedLiveSample('exemple_jouable_3','220','350') }} -<h2 id="Récapitulatif">Récapitulatif</h2> +## Récapitulatif -<p>Les trois exemples sont illustrés ci-dessous sur un rectangle allongé à une hauteur de 300px:</p> +Les trois exemples sont illustrés ci-dessous sur un rectangle allongé à une hauteur de 300px: -<p><img src="svg_pattern_comparison_of_units.png"></p> + -<p>{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }} diff --git a/files/fr/web/svg/tutorial/positions/index.md b/files/fr/web/svg/tutorial/positions/index.md index 4a42fe000f..7bd225f2d9 100644 --- a/files/fr/web/svg/tutorial/positions/index.md +++ b/files/fr/web/svg/tutorial/positions/index.md @@ -8,51 +8,46 @@ tags: translation_of: Web/SVG/Tutorial/Positions original_slug: Web/SVG/Tutoriel/Positionnement --- -<p>{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}</p> +{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }} -<h3 id="La_grille">La grille</h3> +### La grille -<p>Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans <a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.</p> +Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans [canvas](/fr/HTML/Canvas "fr/HTML/Canvas") (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML. -<img alt="" src="canvas_default_grid.png"> + -<h4 id="Exemple">Exemple</h4> +#### Exemple -<pre><rect x="0" y="0" width="100" height="100" /> -</pre> + <rect x="0" y="0" width="100" height="100" /> -<p>L'élément précédent définit un rectangle dans le coin supérieur gauche de l'écran, d'une taille de 100px par 100px.</p> +L'élément précédent définit un rectangle dans le coin supérieur gauche de l'écran, d'une taille de 100px par 100px. -<h3 id="Qu'est_ce_qu'un_pixel">Qu'est ce qu'un pixel ?</h3> +### Qu'est ce qu'un pixel ? -<p>Dans le cas le plus basique, un pixel dans un document SVG correspond à un pixel du périphérique de sortie, à savoir l'écran. Mais le SVG ne serait pas "scalable", c'est-à-dire évolutif, s'il n'y avait qu'une seule possibilité de gérer ce comportement. Tout comme les tailles de police absolues et relatives en CSS, SVG peut définir des unités absolues (avec des identifiants dimensionnels comme le "pt" ou encore le "cm") ou encore des unités dites définies par l'utilisateur, qui ne disposent pas de ces identifiants et correspondent à des nombres ordinaires.</p> +Dans le cas le plus basique, un pixel dans un document SVG correspond à un pixel du périphérique de sortie, à savoir l'écran. Mais le SVG ne serait pas "scalable", c'est-à-dire évolutif, s'il n'y avait qu'une seule possibilité de gérer ce comportement. Tout comme les tailles de police absolues et relatives en CSS, SVG peut définir des unités absolues (avec des identifiants dimensionnels comme le "pt" ou encore le "cm") ou encore des unités dites définies par l'utilisateur, qui ne disposent pas de ces identifiants et correspondent à des nombres ordinaires. -<p>Par défaut, l'unité utilisateur correspond à l'unité de l'écran. Pour modifier ce comportement de manière explicite, il existe plusieurs méthodes en SVG. Commençons par l'élément racine <code>svg</code> :</p> +Par défaut, l'unité utilisateur correspond à l'unité de l'écran. Pour modifier ce comportement de manière explicite, il existe plusieurs méthodes en SVG. Commençons par l'élément racine `svg` : -<pre><svg width="100" height="100"> -</pre> + <svg width="100" height="100"> -<p>La déclaration suivante crée un élément SVG d'une taille de 100px par 100px. Ici, une unité utilisateur correspond à l'unité de l'écran.</p> +La déclaration suivante crée un élément SVG d'une taille de 100px par 100px. Ici, une unité utilisateur correspond à l'unité de l'écran. -<pre><svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>> -</pre> + <svg width="200" height="200" viewBox="0 0 100 100"> -<p>L'image SVG suivante fait 200px par 200px. Toutefois, l'attribut <code>viewBox</code> définit que cet élément de 200 par 200 commence au point (0,0) et s'étend sur une grille de 100 unités sur 100 unités vers la droite et vers le bas de l'écran. 100 unités représentant 200 pixels, chaque unité vaut deux pixels : cela permet de doubler la taille de l'image.</p> +L'image SVG suivante fait 200px par 200px. Toutefois, l'attribut `viewBox` définit que cet élément de 200 par 200 commence au point (0,0) et s'étend sur une grille de 100 unités sur 100 unités vers la droite et vers le bas de l'écran. 100 unités représentant 200 pixels, chaque unité vaut deux pixels : cela permet de doubler la taille de l'image. -<p>La transformation des coordonnées réelles de l'écran en coordonnées personnalisées à l'aide d'un viewport permet de créer un <strong>système de coordonnées utilisateur</strong>. Celui-ci pourra pivoter, être zoomé, rendu oblique ou encore permettra de retourner une image. Par défaut, le système de coordonnées de l'utilisateur fait correspondre un pixel utilisateur à un pixel écran.</p> +La transformation des coordonnées réelles de l'écran en coordonnées personnalisées à l'aide d'un viewport permet de créer un **système de coordonnées utilisateur**. Celui-ci pourra pivoter, être zoomé, rendu oblique ou encore permettra de retourner une image. Par défaut, le système de coordonnées de l'utilisateur fait correspondre un pixel utilisateur à un pixel écran. -<p>Cependant, le périphérique peut décider lui-même ce qui correspond à un pixel.</p> +Cependant, le périphérique peut décider lui-même ce qui correspond à un pixel. -<p>Les tailles dans le fichier SVG ayant des unités spécifiques, tels que les "in" et les "cm", sont ensuite calculées de manière à les faire apparaître avec une échelle de 1:1 dans l'image résultante.</p> +Les tailles dans le fichier SVG ayant des unités spécifiques, tels que les "in" et les "cm", sont ensuite calculées de manière à les faire apparaître avec une échelle de 1:1 dans l'image résultante. -<p>Pour illustrer cette explication, rien de tel qu'une petite citation tirée des spécifications SVG 1.1 :</p> +Pour illustrer cette explication, rien de tel qu'une petite citation tirée des spécifications SVG 1.1 : -<blockquote> -<p>[…] imaginons que le user agent peut déterminer à partir de son environnement que "1px" correspond à "0.2822222mm" (c'est-à-dire 90dpi). Ainsi, pour le traitement de chaque élément SVG : […] "1cm" équivaut à "35.43307px" (et donc à 35.43307 unités utilisateur)</p> -</blockquote> +> \[…] imaginons que le user agent peut déterminer à partir de son environnement que "1px" correspond à "0.2822222mm" (c'est-à-dire 90dpi). Ainsi, pour le traitement de chaque élément SVG : \[…] "1cm" équivaut à "35.43307px" (et donc à 35.43307 unités utilisateur) -<p>{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}</p> +{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }} -<p>Interwiki Languages Links</p> +Interwiki Languages Links -<p>{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}</p> +{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }} diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.md b/files/fr/web/svg/tutorial/svg_and_css/index.md index d631eaa441..371effa145 100644 --- a/files/fr/web/svg/tutorial/svg_and_css/index.md +++ b/files/fr/web/svg/tutorial/svg_and_css/index.md @@ -13,232 +13,233 @@ tags: translation_of: Web/SVG/Tutorial/SVG_and_CSS original_slug: CSS/Premiers_pas/Graphiques_SVG --- -<div>Cette page illustre l'application de CSS sur des documents <a href="/fr/docs/Web/SVG">SVG</a>, le langage spécialisé dans la création d'éléments graphiques vectoriels.</div> - -<p>Nous allons voir par la suite un exemple que vous pourrez copier pour l'exécuter dans votre navigateur (à la condition que celui-ci soit compatible avec SVG).</p> - -<div class="note"> - <p><strong>Note :</strong> Les éléments référencés par des éléments <a href="/fr/docs/Web/SVG/Element/use"><code><use></code></a> héritent des styles de cet élément. Pour leur appliquer des styles différents, il faut donc utiliser <a href="/fr/docs/Web/CSS/CSS_Variables">les propriétés CSS personnalisées (<i>custom properties</i>)</a>.</p> -</div> - -<h2 id="example">Exemple</h2> - -<p>Créez un nouveau document SVG en tant que fichier texte brut, <code>doc.svg</code>. Copiez et collez le contenu qui suit, en vous assurant de faire défiler le texte pour obtenir l'intégralité de l'exemple :</p> - -<pre class="brush: html"><svg width="600px" height="600px" viewBox="-300 -300 600 600" - xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - -<title>Démonstration SVG</title> -<desc>Démarrer avec CSS et SVG</desc> - -<defs> - <radialGradient id="fade" cx="0" cy="0" r="200" - gradientUnits="userSpaceOnUse"> - <stop id="fade-stop-1" offset="33%"/> - <stop id="fade-stop-2" offset="95%"/> - </radialGradient> -</defs> - -<text id="heading" x="-280" y="-270">Démonstration SVG</text> -<text id="caption" x="-280" y="-250">Déplacez le pointeur de - votre souris sur la fleur.</text> - -<g id="flower"> - <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> - - <g id="outer-petals"> - <g class="quadrant"> - <g class="segment"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(18)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(36)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(54)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(72)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - </g> - - <g class="quadrant"> - <g class="segment" transform="rotate(90)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(108)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(126)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(144)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(162)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - </g> - - <g class="quadrant"> - <g class="segment" transform="rotate(180)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(198)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(216)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(234)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(252)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - </g> - - <g class="quadrant"> - <g class="segment" transform="rotate(270)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(288)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(306)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(324)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(342)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - </g> - </g> - - <g id="inner-petals" transform="rotate(9) scale(0.33)"> - <g class="quadrant"> - <g class="segment"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(18)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(36)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(54)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(72)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - </g> - - <g class="quadrant"> - <g class="segment" transform="rotate(90)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(108)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(126)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(144)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(162)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - </g> - - <g class="quadrant"> - <g class="segment" transform="rotate(180)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(198)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(216)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(234)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(252)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - </g> - - <g class="quadrant"> - <g class="segment" transform="rotate(270)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(288)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(306)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(324)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g class="segment" transform="rotate(342)"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - </g> - </g> -</g> -</svg></pre> - -<p>Créez un nouveau fichier CSS, <code>style.css</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité :</p> - -<pre class="brush: css">/*** Démonstration SVG ***/ +Cette page illustre l'application de CSS sur des documents [SVG](/fr/docs/Web/SVG), le langage spécialisé dans la création d'éléments graphiques vectoriels. + +Nous allons voir par la suite un exemple que vous pourrez copier pour l'exécuter dans votre navigateur (à la condition que celui-ci soit compatible avec SVG). + +> **Note :** Les éléments référencés par des éléments [`<use>`](/fr/docs/Web/SVG/Element/use) héritent des styles de cet élément. Pour leur appliquer des styles différents, il faut donc utiliser [les propriétés CSS personnalisées (_custom properties_)](/fr/docs/Web/CSS/CSS_Variables). + +## Exemple + +Créez un nouveau document SVG en tant que fichier texte brut, `doc.svg`. Copiez et collez le contenu qui suit, en vous assurant de faire défiler le texte pour obtenir l'intégralité de l'exemple : + +```html +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>Démonstration SVG</title> +<desc>Démarrer avec CSS et SVG</desc> + +<defs> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> +</defs> + +<text id="heading" x="-280" y="-270">Démonstration SVG</text> +<text id="caption" x="-280" y="-250">Déplacez le pointeur de + votre souris sur la fleur.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> + + <g id="outer-petals"> + <g class="quadrant"> + <g class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(18)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(36)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(54)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(72)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + </g> + + <g class="quadrant"> + <g class="segment" transform="rotate(90)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(108)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(126)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(144)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(162)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + </g> + + <g class="quadrant"> + <g class="segment" transform="rotate(180)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(198)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(216)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(234)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(252)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + </g> + + <g class="quadrant"> + <g class="segment" transform="rotate(270)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(288)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(306)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(324)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(342)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + </g> + </g> + + <g id="inner-petals" transform="rotate(9) scale(0.33)"> + <g class="quadrant"> + <g class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(18)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(36)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(54)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(72)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + </g> + + <g class="quadrant"> + <g class="segment" transform="rotate(90)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(108)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(126)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(144)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(162)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + </g> + + <g class="quadrant"> + <g class="segment" transform="rotate(180)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(198)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(216)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(234)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(252)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + </g> + + <g class="quadrant"> + <g class="segment" transform="rotate(270)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(288)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(306)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(324)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g class="segment" transform="rotate(342)"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + </g> + </g> +</g> +</svg> +``` + +Créez un nouveau fichier CSS, `style.css`. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité : + +```css +/*** Démonstration SVG ***/ /* page */ svg { @@ -305,7 +306,7 @@ svg { } /* - Façon non standard de styliser les éléments référencés via les éléments <use>, + Façon non standard de styliser les éléments référencés via les éléments <use>, supportée par certains anciens navigateurs */ #outer-petals .segment-fill { @@ -320,12 +321,12 @@ svg { stroke-width: 3; } -#outer-petals .segment:hover > .segment-fill { +#outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none; } -#outer-petals .segment:hover > .segment-edge { +#outer-petals .segment:hover > .segment-edge { stroke: slateblue; } @@ -343,7 +344,7 @@ svg { } /* - Façon non standard de styliser les éléments référencés via les éléments <use>, + Façon non standard de styliser les éléments référencés via les éléments <use>, supportée par certains anciens navigateurs */ #inner-petals .segment-fill { @@ -358,83 +359,82 @@ svg { stroke-width: 9; } -#inner-petals .segment:hover > .segment-fill { +#inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } -#inner-petals .segment:hover > .segment-edge { +#inner-petals .segment:hover > .segment-edge { stroke: green; -}</pre> - -<p>Ouvrez le document dans votre navigateur compatible SVG. Déplacez le pointeur de votre souris sur le graphique pour voir ce qui se passe.</p> - -<h3 id="result">Résultat</h3> - -<p>{{EmbedLiveSample("example", "660", "660")}}</p> - -<p>Notes sur cette démonstration :</p> - -<ul> - <li>Le document SVG lie la feuille de style de la façon habituelle.</li> - <li>Le SVG a ses propres propriétés et valeurs CSS. Certaines d'entre elles sont similaires aux propriétés CSS utilisées pour le HTML.</li> -</ul> - -<div class="note"> - <p><strong>Note :</strong> Modifiez la feuille de style de sorte que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris passe sur l'un d'entre eux, sans modifier le fonctionnement des pétales extérieurs.</</p> -</div> -<p><a href="/fr/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#svg_and_css">Voir une solution à ce défi.</a></p> - -<h2 id="simplified_structure">Structure simplifiée</h2> - -<p>La structure SVG présentée ci-dessus pourrait être écrite de manière beaucoup plus concise en référençant les différentes parties de la fleur via des éléments <a href="/fr/docs/Web/SVG/Element/use"><code><use></code></a>. Ce <a href="https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance">comportement est normalisé</a>, bien que seuls quelques navigateurs prennent en charge la pseudo-classe <a href="/fr/docs/Web/CSS/:hover"><code>:hover</code></a> et d'autres sélecteurs CSS plus complexes sur les éléments référencés via les éléments <code><use></code>, pour le moment. Il existe <a href="https://github.com/w3c/svgwg/issues/504">un débat sur les règles applicables à ces éléments référencés</a>.</p> - -<p>Voici comment se présente la structure du document SVG désormais.</p> - -<pre class="brush: html"><svg width="600px" height="600px" viewBox="-300 -300 600 600" - xmlns="http://www.w3.org/2000/svg"> - - <title>Démonstration SVG</title> - <desc>Démarrer avec CSS et SVG</desc> - - <defs> - <g id="segment" class="segment"> - <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> - <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> - </g> - <g id="quadrant"> - <use xlink:href="#segment"/> - <use xlink:href="#segment" transform="rotate(18)"/> - <use xlink:href="#segment" transform="rotate(36)"/> - <use xlink:href="#segment" transform="rotate(54)"/> - <use xlink:href="#segment" transform="rotate(72)"/> - </g> - <g id="petals"> - <use xlink:href="#quadrant"/> - <use xlink:href="#quadrant" transform="rotate(90)"/> - <use xlink:href="#quadrant" transform="rotate(180)"/> - <use xlink:href="#quadrant" transform="rotate(270)"/> - </g> - <radialGradient id="fade" cx="0" cy="0" r="200" - gradientUnits="userSpaceOnUse"> - <stop id="fade-stop-1" offset="33%"/> - <stop id="fade-stop-2" offset="95%"/> - </radialGradient> - </defs> - - <text id="heading" x="-280" y="-270">Démonstration SVG</text> - <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> - - <g id="flower"> - <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> - <use id="outer-petals" xlink:href="#petals"/> - <use id="inner-petals" xlink:href="#petals" - transform="rotate(9) scale(0.33)"/> - </g> - -</svg> -</pre> - -<h2 id="what_next">Et ensuite ?</h2> - -<p>Dans cette démonstration, le navigateur, compatible SVG, sait déjà comment afficher les éléments SVG. La feuille de style ne fait que modifier l'affichage de certaines manières. Ceci est également vrai pour les documents HTML. Mais vous pouvez utiliser CSS pour des documents XML à usage général, où il n'y a pas de manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : <a href="/fr/docs/Archive/Beginner_tutorials/XML_data">Données XML</a>.</p> +} +``` + +Ouvrez le document dans votre navigateur compatible SVG. Déplacez le pointeur de votre souris sur le graphique pour voir ce qui se passe. + +### Résultat + +{{EmbedLiveSample("example", "660", "660")}} + +Notes sur cette démonstration : + +- Le document SVG lie la feuille de style de la façon habituelle. +- Le SVG a ses propres propriétés et valeurs CSS. Certaines d'entre elles sont similaires aux propriétés CSS utilisées pour le HTML. + +> **Note :** Modifiez la feuille de style de sorte que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris passe sur l'un d'entre eux, sans modifier le fonctionnement des pétales extérieurs.<!--</p--> + +[Voir une solution à ce défi.](/fr/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#svg_and_css) + +## Structure simplifiée + +La structure SVG présentée ci-dessus pourrait être écrite de manière beaucoup plus concise en référençant les différentes parties de la fleur via des éléments [`<use>`](/fr/docs/Web/SVG/Element/use). Ce [comportement est normalisé](https://www.w3.org/TR/SVG2/struct.html#UseStyleInheritance), bien que seuls quelques navigateurs prennent en charge la pseudo-classe [`:hover`](/fr/docs/Web/CSS/:hover) et d'autres sélecteurs CSS plus complexes sur les éléments référencés via les éléments `<use>`, pour le moment. Il existe [un débat sur les règles applicables à ces éléments référencés](https://github.com/w3c/svgwg/issues/504). + +Voici comment se présente la structure du document SVG désormais. + +```html +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg"> + + <title>Démonstration SVG</title> + <desc>Démarrer avec CSS et SVG</desc> + + <defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + + <text id="heading" x="-280" y="-270">Démonstration SVG</text> + <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> + + <g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +``` + +## Et ensuite ? + +Dans cette démonstration, le navigateur, compatible SVG, sait déjà comment afficher les éléments SVG. La feuille de style ne fait que modifier l'affichage de certaines manières. Ceci est également vrai pour les documents HTML. Mais vous pouvez utiliser CSS pour des documents XML à usage général, où il n'y a pas de manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : [Données XML](/fr/docs/Archive/Beginner_tutorials/XML_data). diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.md b/files/fr/web/svg/tutorial/svg_fonts/index.md index 4ccc526697..89ee876a72 100644 --- a/files/fr/web/svg/tutorial/svg_fonts/index.md +++ b/files/fr/web/svg/tutorial/svg_fonts/index.md @@ -8,90 +8,97 @@ tags: translation_of: Web/SVG/Tutorial/SVG_fonts original_slug: Web/SVG/Tutoriel/polices_SVG --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }} -<p>Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Elle n'a pas été conçue pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage.</p> +Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Elle n'a pas été conçue pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage. -<div class="note"> - <p><strong>Note :</strong> Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android. Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">n'a pas envisagé de les implémenter</a>, la fonctionnalité a été <a href="https://www.chromestatus.com/feature/5930075908210688">supprimée de Chrome 38</a> (et Opera 25) et Firefox a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">reporté sa mise en œuvre indéfiniment</a> pour se concentrer sur <a href="/fr/WOFF" title="en/About WOFF">WOFF</a>. Cependant, d'autres outils comme le plugin <a href="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.</p> -</div> +> **Note :** Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android. Internet Explorer [n'a pas envisagé de les implémenter](http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx), la fonctionnalité a été [supprimée de Chrome 38](https://www.chromestatus.com/feature/5930075908210688) (et Opera 25) et Firefox a [reporté sa mise en œuvre indéfiniment](https://bugzilla.mozilla.org/show_bug.cgi?id=119490) pour se concentrer sur [WOFF](/fr/WOFF "en/About WOFF"). Cependant, d'autres outils comme le plugin [Adobe SVG Viewer](http://www.adobe.com/svg/viewer/install/), Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG. -<p>La base pour définir une police SVG est l'élément {{ SVGElement("font") }}.</p> +La base pour définir une police SVG est l'élément {{ SVGElement("font") }}. -<h2 id="Définir_une_police">Définir une police</h2> +## Définir une police -<p>Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle <a href="http://www.w3.org/TR/SVG/fonts.html#FontElement">de la spécification</a>), et expliquons-en les détails.</p> +Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle [de la spécification](http://www.w3.org/TR/SVG/fonts.html#FontElement)), et expliquons-en les détails. -<pre class="brush: html"><font id="Font1" horiz-adv-x="1000"> - <font-face font-family="Super Sans" font-weight="bold" font-style="normal" +```html +<font id="Font1" horiz-adv-x="1000"> + <font-face font-family="Super Sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" - alphabetic="0" mathematical="350" ideographic="400" hanging="500"> - <font-face-src> - <font-face-name name="Super Sans Bold"/> - </font-face-src> - </font-face> - <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> - <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph> - <glyph unicode="@"><!-- Outline of @ glyph --></glyph> - <!-- more glyphs --> -</font></pre> + alphabetic="0" mathematical="350" ideographic="400" hanging="500"> + <font-face-src> + <font-face-name name="Super Sans Bold"/> + </font-face-src> + </font-face> + <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> + <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph> + <glyph unicode="@"><!-- Outline of @ glyph --></glyph> + <!-- more glyphs --> +</font> +``` -<p>Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut <code>horiz-adv-x</code> définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe.</p> +Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut `horiz-adv-x` définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe. -<p>L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS <a href="/fr/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est <code>font-family</code> : Elle pourra alors être référencée via la propriété <code>font-family</code> présente dans les CSS et les SVG. Les attributs <code>font-weight</code> et <code>font-style</code> ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (<a href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">ascenders</a>).</p> +L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS [`@font-face`](/fr/CSS/@font-face "en/css/@font-face"). Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est `font-family` : Elle pourra alors être référencée via la propriété `font-family` présente dans les CSS et les SVG. Les attributs `font-weight` et `font-style` ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes ([ascenders](http://en.wikipedia.org/wiki/Ascender_%28typography%29)). -<p>Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' <code>src</code> descriptor in <code>@font-face</code> declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.</p> +Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' `src` descriptor in `@font-face` declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead. -<p>Following {{ SVGElement("font-face-src") }} is a {{ SVGElement("missing-glyph") }} element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By simply adding any graphical SVG content inside. You can use literally any other SVG elements in here, even {{ SVGElement("filter") }}, {{ SVGElement("a") }} or {{ SVGElement("script") }}. For simple glyphs, however, you can simply add a <code>d</code> attribute — this defines a shape for the glyph exactly like how standard SVG paths work.</p> +Following {{ SVGElement("font-face-src") }} is a {{ SVGElement("missing-glyph") }} element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By simply adding any graphical SVG content inside. You can use literally any other SVG elements in here, even {{ SVGElement("filter") }}, {{ SVGElement("a") }} or {{ SVGElement("script") }}. For simple glyphs, however, you can simply add a `d` attribute — this defines a shape for the glyph exactly like how standard SVG paths work. -<p>The actual glyphs are then defined by {{ SVGElement("glyph") }} elements. The most important attribute is <code>unicode</code>. It defines the unicode codepoint represented by this glyph. If you also specify the {{htmlattrxref("lang")}} attribute on a glyph, you can further restrict it to certain languages (represented by <code>xml:lang</code> on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents.</p> +The actual glyphs are then defined by {{ SVGElement("glyph") }} elements. The most important attribute is `unicode`. It defines the unicode codepoint represented by this glyph. If you also specify the {{htmlattrxref("lang")}} attribute on a glyph, you can further restrict it to certain languages (represented by `xml:lang` on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents. -<p>There are two further elements that can be defined inside <code>font</code>: {{ SVGElement("hkern") }} and {{ SVGElement("vkern") }}. Each carries references to at least two characters (attributes <code>u1</code> and <code>u2</code>) and an attribute <code>k</code> that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together the standard distance between characters.</p> +There are two further elements that can be defined inside `font`: {{ SVGElement("hkern") }} and {{ SVGElement("vkern") }}. Each carries references to at least two characters (attributes `u1` and `u2`) and an attribute `k` that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together the standard distance between characters. -<pre class="brush: html"><hkern u1="A" u2="V" k="20" /></pre> +```html +<hkern u1="A" u2="V" k="20" /> +``` -<h2 id="Référencer_une_police">Référencer une police</h2> +## Référencer une police -<p>Lorsque vous avez mis en place votre déclaration de police comme décrit ci-dessus, vous pouvez utiliser un simple attribut <code>font-family</code> pour réellement appliquer la police à un texte SVG:</p> +Lorsque vous avez mis en place votre déclaration de police comme décrit ci-dessus, vous pouvez utiliser un simple attribut `font-family` pour réellement appliquer la police à un texte SVG: -<pre class="brush: html"><font> - <font-face font-family="Super Sans" /> - <!-- ... --> -</font> +```html +<font> + <font-face font-family="Super Sans" /> + <!-- ... --> +</font> -<text font-family="Super Sans">My text uses Super Sans</text></pre> +<text font-family="Super Sans">My text uses Super Sans</text> +``` -<p>Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police.</p> +Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police. -<h3 id="Option_Utiliser_le_CSS_font-face">Option: Utiliser le CSS @font-face</h3> +### Option: Utiliser le CSS @font-face -<p>Vous pouvez utiliser <code>@font-face</code> pour les polices externes de référence :</p> +Vous pouvez utiliser `@font-face` pour les polices externes de référence : -<pre class="brush: html"><font id="Super_Sans"> - <!-- ... --> -</font> +```html +<font id="Super_Sans"> + <!-- ... --> +</font> -<style type="text/css"> +<style type="text/css"> @font-face { font-family: "Super Sans"; src: url(#Super_Sans); } -</style> +</style> -<text font-family="Super Sans">My text uses Super Sans</text></pre> +<text font-family="Super Sans">My text uses Super Sans</text> +``` -<h3 id="Option_Référencer_une_police_externe">Option: Référencer une police externe</h3> +### Option: Référencer une police externe -<p>L'élément mentionné <code>font-face-uri</code> vous permet de référencer une police externe, permettant donc une plus grande réutilisabilité :</p> +L'élément mentionné `font-face-uri` vous permet de référencer une police externe, permettant donc une plus grande réutilisabilité : +```html +<font> + <font-face font-family="Super Sans"> + <font-face-src> + <font-face-uri xlink:href="fonts.svg#Super_Sans" /> + </font-face-src> + </font-face> +</font> +``` -<pre class="brush: html"><font> - <font-face font-family="Super Sans"> - <font-face-src> - <font-face-uri xlink:href="fonts.svg#Super_Sans" /> - </font-face-src> - </font-face> -</font></pre> - -<p>{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }} diff --git a/files/fr/web/svg/tutorial/svg_image_tag/index.md b/files/fr/web/svg/tutorial/svg_image_tag/index.md index a1d8286039..5070f36eca 100644 --- a/files/fr/web/svg/tutorial/svg_image_tag/index.md +++ b/files/fr/web/svg/tutorial/svg_image_tag/index.md @@ -8,30 +8,26 @@ tags: translation_of: Web/SVG/Tutorial/SVG_Image_Tag original_slug: Web/SVG/Tutoriel/SVG_Image_Tag --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }} -<p>L'élément SVG {{ SVGElement("image") }} permet d'afficher des images pixélisées au sein d'un objet SVG.</p> +L'élément SVG {{ SVGElement("image") }} permet d'afficher des images pixélisées au sein d'un objet SVG. -<p>Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG.</p> +Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG. -<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="5cm" height="4cm" version="1.1" - xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> - <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> -</svg></pre> +```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="5cm" height="4cm" version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> + <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> +</svg> +``` -<p>Il faut prendre note de quelques point essentiels (donnés par les <a href="http://www.w3.org/TR/SVG/struct.html#ImageElement">spécifications W3</a>):</p> +Il faut prendre note de quelques point essentiels (donnés par les [spécifications W3](http://www.w3.org/TR/SVG/struct.html#ImageElement)): -<ul> - <li> - <p>Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0.</p> - </li> - <li> - <p>Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0.</p> - </li> - <li>Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image.</li> -</ul> +- Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0. +- Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0. +- Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image. -<p>{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }} diff --git a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md index 5eb5bade39..4f28884c41 100644 --- a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md @@ -6,81 +6,77 @@ tags: translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction original_slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML --- -<h3 id="Aper.C3.A7u">Aperçu</h3> +### Aperçu -<p>Cet article et son exemple associé montrent comment utiliser du <a href="fr/SVG">SVG</a> en ligne pour fournir une image de fond à un formulaire. Il montre comment <a href="fr/JavaScript">JavaScript</a> et <a href="fr/CSS">CSS</a> peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.</p> +Cet article et son exemple associé montrent comment utiliser du [SVG](fr/SVG) en ligne pour fournir une image de fond à un formulaire. Il montre comment [JavaScript](fr/JavaScript) et [CSS](fr/CSS) peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG. -<h3 id="Source">Source</h3> +### Source -<p>Voici le code source de cet exemple :</p> +Voici le code source de cet exemple : -<pre><html xmlns="http://www.w3.org/1999/xhtml"> -<head> - <title>XTech SVG Demo</title> - <style> - stop.begin { stop-color:yellow; } - stop.end { stop-color:green; } - body.invalid stop.end { stop-color:red; } - #err { display:none; } - body.invalid #err { display:inline; } - </style> - <script> - function signalError() { - document.getElementById('body').setAttribute("class", "invalid"); - } - </script> -</head> -<body id="body" - style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> - <form> - <fieldset> - <legend>HTML Form</legend> - <p><label>Enter something:</label> - <input type="text"/> - <span id="err">Incorrect value!</span></p> - <p><button onclick="signalError();">Activate!</button></p> - </fieldset> - </form> - <svg xmlns="http://www.w3.org/2000/svg" version="1.1" - viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" - style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> - <linearGradient id="gradient"> - <stop class="begin" offset="0%"/> - <stop class="end" offset="100%"/> - </linearGradient> - <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> - <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> - </svg> -</body> -</html></pre> + <html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>XTech SVG Demo</title> + <style> + stop.begin { stop-color:yellow; } + stop.end { stop-color:green; } + body.invalid stop.end { stop-color:red; } + #err { display:none; } + body.invalid #err { display:inline; } + </style> + <script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } + </script> + </head> + <body id="body" + style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> + <form> + <fieldset> + <legend>HTML Form</legend> + <p><label>Enter something:</label> + <input type="text"/> + <span id="err">Incorrect value!</span></p> + <p><button onclick="signalError();">Activate!</button></p> + </fieldset> + </form> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> + </svg> + </body> + </html> -<h3 id="Discussion">Discussion</h3> +### Discussion -<p>La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément <svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut <code>invalid</code> à la balise <body> et une règle de style modifie la couleur <code>end-stop</code> du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur).</p> +La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément \<svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut `invalid` à la balise \<body> et une règle de style modifie la couleur `end-stop` du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur). -<p>Cette approche bénéficie des points suivants en sa faveur :</p> +Cette approche bénéficie des points suivants en sa faveur : -<ul> - <li>Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif</li> - <li>L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux</li> - <li>Elle est très simple et remplit sa fonction parfaitement</li> - <li>L'image se redimensionne automatiquement à la taille requise de manière intelligente</li> - <li>Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG</li> - <li>Le même script manipule à la fois le HTML et le SVG</li> - <li>Le document est entièrement basé sur les standards</li> -</ul> +- Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif +- L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux +- Elle est très simple et remplit sa fonction parfaitement +- L'image se redimensionne automatiquement à la taille requise de manière intelligente +- Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG +- Le même script manipule à la fois le HTML et le SVG +- Le document est entièrement basé sur les standards -<h3 id="D.C3.A9tails">Détails</h3> +### Détails -<p>L'attribut <code>viewBox</code> établit un système de coordonnées logiques sur lequel les coordonnées de l'image SVG s'appuient de façon relative. Dans ce cas, notre image s'étend dans un cadre de visualisation de 100 sur 100.</p> +L'attribut `viewBox` établit un système de coordonnées logiques sur lequel les coordonnées de l'image SVG s'appuient de façon relative. Dans ce cas, notre image s'étend dans un cadre de visualisation de 100 sur 100. -<p>L'attribut <code>preserveAspectRatio</code> spécifie que le ratio de rendu doit être préservé en centrant l'image dans l'espace disponible, en augmentant la largeur ou la hauteur à leur maximum et en tronquant les débordements.</p> +L'attribut `preserveAspectRatio` spécifie que le ratio de rendu doit être préservé en centrant l'image dans l'espace disponible, en augmentant la largeur ou la hauteur à leur maximum et en tronquant les débordements. -<p>L'attribut <code>style</code> ancre l'élément SVG en arrière plan du formulaire.</p> +L'attribut `style` ancre l'élément SVG en arrière plan du formulaire. -<h3 id="Liens_sur_le_sujet">Liens sur le sujet</h3> +### Liens sur le sujet -<ul> - <li>L'article wikipedia sur le format <a href="http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a></li> - <li>La page <a href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> sur le wiki SVG</li> -</ul>
\ No newline at end of file +- L'article wikipedia sur le format [SVG](http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics) +- La page [Inline SVG](http://svg-whiz.com/wiki/index.php?title=Inline_SVG) sur le wiki SVG diff --git a/files/fr/web/svg/tutorial/texts/index.md b/files/fr/web/svg/tutorial/texts/index.md index 972538e2bd..7cc8dca62a 100644 --- a/files/fr/web/svg/tutorial/texts/index.md +++ b/files/fr/web/svg/tutorial/texts/index.md @@ -7,115 +7,118 @@ tags: translation_of: Web/SVG/Tutorial/Texts original_slug: Web/SVG/Tutoriel/Texts --- -<div> -<div>{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}</div> +{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}} -<div> </div> +Lorsqu'on parle de texte en SVG, on doit différencier deux choses pratiquement complètement séparées: 1. l'inclusion et l'affichage de texte dans une image, 2. les polices SVG. Un article séparé sera dédié aux polices SVG, celui-ci se concentrera uniquement sur le fait d'insérer du texte. -<p>Lorsqu'on parle de texte en SVG, on doit différencier deux choses pratiquement complètement séparées: 1. l'inclusion et l'affichage de texte dans une image, 2. les polices SVG. Un article séparé sera dédié aux polices SVG, celui-ci se concentrera uniquement sur le fait d'insérer du texte.</p> +## Les bases -<h2 id="Les_bases">Les bases</h2> +Nous avons vu dans l'[exemple de l'introduction](/fr/docs/Web/SVG/Tutoriel/Premiers_pas) que l'élément `text` peut être utilisé pour mettre du texte dans des documents SVG: -<p>Nous avons vu dans l'<a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas">exemple de l'introduction</a> que l'élément <code>text</code> peut être utilisé pour mettre du texte dans des documents SVG:</p> +```xml +<text x="10" y="10">Hello World!</text> +``` -<pre class="brush:xml"><text x="10" y="10">Hello World!</text> -</pre> +Les attributs `x` et `y` déterminent où le texte apparaîtra dans la fenêtre. L'attribut {{SVGAttr("text-anchor")}} spécifie l'alignement horizontal du texte (si ce point doit être le côté gauche, droit ou le centre du texte) et l'attribut {{SVGAttr("dominant-baseline")}} l'alignement vertical (si ce point est le haut, le bas ou le centre). -<p>Les attributs <code>x</code> et <code>y</code> déterminent où le texte apparaîtra dans la fenêtre. L'attribut {{SVGAttr("text-anchor")}} spécifie l'alignement horizontal du texte (si ce point doit être le côté gauche, droit ou le centre du texte) et l'attribut {{SVGAttr("dominant-baseline")}} l'alignement vertical (si ce point est le haut, le bas ou le centre).</p> +De même que les formes basiques, la couleur des éléments texte peut être modifié avec l'attribut `fill` pour le remplissage ou `stroke` pour le contour. Tout deux peuvent également faire référence à un dégradé ou motif, ce qui rend la coloration de texte SVG beaucoup plus puissante que CSS 2.1. -<p>De même que les formes basiques, la couleur des éléments texte peut être modifié avec l'attribut <code>fill</code> pour le remplissage ou <code>stroke</code> pour le contour. Tout deux peuvent également faire référence à un dégradé ou motif, ce qui rend la coloration de texte SVG beaucoup plus puissante que CSS 2.1.</p> +## Définir la police -<h2 id="Définir_la_police">Définir la police</h2> +Une partie essentielle d'un texte est la police dans laquelle il est affiché. SVG offre un ensemble d'attributs pour spécifier la police, dont beaucoup sont similaires à leurs équivalents CSS. Chacune des propriétés suivantes peut être définie en tant qu'attribut ou via une déclaration CSS: {{SVGAttr("font-family")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("word-spacing")}} et {{SVGAttr("text-decoration")}}. -<p>Une partie essentielle d'un texte est la police dans laquelle il est affiché. SVG offre un ensemble d'attributs pour spécifier la police, dont beaucoup sont similaires à leurs équivalents CSS. Chacune des propriétés suivantes peut être définie en tant qu'attribut ou via une déclaration CSS: {{SVGAttr("font-family")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("word-spacing")}} et {{SVGAttr("text-decoration")}}.</p> +## Autres éléments liés au texte -<h2 id="Autres_éléments_liés_au_texte">Autres éléments liés au texte</h2> +### tspan -<h3 id="tspan">tspan</h3> +Cet élément est utilisé pour baliser des sous-parties d'un texte. Il doit s'agit d'un enfant d'un élément `text` ou d'un autre élément `tspan`. Un cas typique consiste à écrire un mot d'une phrase en gras: -<p>Cet élément est utilisé pour baliser des sous-parties d'un texte. Il doit s'agit d'un enfant d'un élément <code>text</code> ou d'un autre élément <code>tspan</code>. Un cas typique consiste à écrire un mot d'une phrase en gras:</p> -</div> +```xml +<text> + This is <tspan font-weight="bold" fill="red">bold and red</tspan> +</text> +``` -<pre class="brush:xml"><text> - This is <tspan font-weight="bold" fill="red">bold and red</tspan> -</text> -</pre> +#### Exemple jouable -<h4 id="exemple_jouable">Exemple jouable</h6> +```html hidden +<svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> +<text> + This is <tspan font-weight="bold" fill="red">bold and red</tspan> +</text> -<pre class="brush:html hidden"><svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> -<text> - This is <tspan font-weight="bold" fill="red">bold and red</tspan> -</text> - -<style><![CDATA[ +<style><![CDATA[ text{ dominant-baseline: hanging; font: 28px Verdana, Helvetica, Arial, sans-serif; } -]]></style> -</svg> -</pre> +]]></style> +</svg> +``` -<p>{{ EmbedLiveSample('exemple_jouable', '100%', 100) }}</p> +{{ EmbedLiveSample('exemple_jouable', '100%', 100) }} -<p>L'élément tspan peut prendre les attributs personnalisés suivants:</p> +L'élément tspan peut prendre les attributs personnalisés suivants: -<p><strong>x</strong><br> - Définit une nouvelle coordonnées absolue pour le texte qu'il contient. Cela écrase la position par défaut du texte. Cet attribut peut également contenir une liste de nombres, qui sont appliqués un par un à chaque caractère du tspan.</p> +**x** +Définit une nouvelle coordonnées absolue pour le texte qu'il contient. Cela écrase la position par défaut du texte. Cet attribut peut également contenir une liste de nombres, qui sont appliqués un par un à chaque caractère du tspan. -<p><strong>dx</strong><br> - Définit un décalage horizontal relatif à la position par défaut du texte. Ici aussi, vous pouvez founir une liste de valeurs qui seront appliquées consécutivement à chaque caractère.</p> +**dx** +Définit un décalage horizontal relatif à la position par défaut du texte. Ici aussi, vous pouvez founir une liste de valeurs qui seront appliquées consécutivement à chaque caractère. -<p><strong>y</strong> et <strong>dy</strong> sont utilisés de la même manière mais pour le déplacement vertical.</p> +**y** et **dy** sont utilisés de la même manière mais pour le déplacement vertical. -<p><strong>rotate</strong><br> - Applique une rotation aux caractères, avec le nombre de degrés donné. Donner une liste de nombres aura pour effet d'appliquer une rotation à chaque caractère respectif, la dernière valeur sera appliquée aux caractères restants.</p> +**rotate** +Applique une rotation aux caractères, avec le nombre de degrés donné. Donner une liste de nombres aura pour effet d'appliquer une rotation à chaque caractère respectif, la dernière valeur sera appliquée aux caractères restants. -<p><strong>textLength</strong><br> - Un attribut quelque peu obscur qui donne la longueur calculée de la chaîne. Il est destiné au moteur de rendu pour lui permettre d'affiner la position des glyphes, lorsque la longueur de texte mesurée ne correspond pas à celle qui est indiquée.</p> +**textLength** +Un attribut quelque peu obscur qui donne la longueur calculée de la chaîne. Il est destiné au moteur de rendu pour lui permettre d'affiner la position des glyphes, lorsque la longueur de texte mesurée ne correspond pas à celle qui est indiquée. -<h3 id="tref">tref</h3> +### tref -<p>L'élément <code>tref</code> permet de référencer un texte déjà définit, et recopie le texte à sa place. Vous devez utiliser l'attribut <code>xlink:href</code> pour définir l'élément à copier. Vous pouvez ensuite styliser le texte et modifier son apparence indépendamment de la source.</p> +L'élément `tref` permet de référencer un texte déjà définit, et recopie le texte à sa place. Vous devez utiliser l'attribut `xlink:href` pour définir l'élément à copier. Vous pouvez ensuite styliser le texte et modifier son apparence indépendamment de la source. -<pre class="brush:xml"><text id="example">This is an example text.</text> +```xml +<text id="example">This is an example text.</text> -<text> - <tref xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#example" /> -</text> -</pre> +<text> + <tref xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#example" /> +</text> +``` -<h3 id="textPath">textPath</h3> +### textPath -<p>Cet élément récupère via son attribut <code>xlink:href</code> un chemin arbitraire et aligne ses caractères le long de ce chemin:</p> +Cet élément récupère via son attribut `xlink:href` un chemin arbitraire et aligne ses caractères le long de ce chemin: -<pre class="brush:xml"><path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> -<text> - <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> +```xml +<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> +<text> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> A curve. - </textPath> -</text></pre> + </textPath> +</text> +``` -<h4 id="code_jouable_2">Code jouable 2</h4> +#### Code jouable 2 -<pre class="brush:html hidden"><svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> -<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> -<text> - <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> +```html hidden +<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> +<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> +<text> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> A curve. - </textPath> -</text> + </textPath> +</text> -<style><![CDATA[ +<style><![CDATA[ text{ dominant-baseline: hanging; font: 28px Verdana, Helvetica, Arial, sans-serif; } -]]></style> -</svg> -</pre> +]]></style> +</svg> +``` -<p>{{ EmbedLiveSample('code_jouable_2', '100%', 100) }}</p> +{{ EmbedLiveSample('code_jouable_2', '100%', 100) }} -<div>{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}</div> +{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}} diff --git a/files/fr/web/svg/tutorial/tools_for_svg/index.md b/files/fr/web/svg/tutorial/tools_for_svg/index.md index 52468aa4d9..7dd9b1442d 100644 --- a/files/fr/web/svg/tutorial/tools_for_svg/index.md +++ b/files/fr/web/svg/tutorial/tools_for_svg/index.md @@ -4,68 +4,68 @@ slug: Web/SVG/Tutorial/Tools_for_SVG translation_of: Web/SVG/Tutorial/Tools_for_SVG original_slug: Web/SVG/Tutoriel/Tools_for_SVG --- -<p>{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }} -<p>Maintenant que nous avons vu les notions de base en SVG, nous allons nous intéresser à quelques outils qui permettent d'éditer des fichiers SVG.</p> +Maintenant que nous avons vu les notions de base en SVG, nous allons nous intéresser à quelques outils qui permettent d'éditer des fichiers SVG. -<h3 id="Support_des_navigateurs">Support des navigateurs</h3> +### Support des navigateurs -<p>Avec l'arrivée de IE9, on peut enfin dire que les principaux navigateurs - Internet Explorer 9, Mozilla Firefox, Safari, Google Chrome et Opera - supportent le SVG. Sur mobile c'est aussi le cas des navigateurs basés sur Webkit (principalement iOS et Android). Et il y a en général des chances pour que les appareils plus vieux ou plus petits supportent au moins SVG Tiny.</p> +Avec l'arrivée de IE9, on peut enfin dire que les principaux navigateurs - Internet Explorer 9, Mozilla Firefox, Safari, Google Chrome et Opera - supportent le SVG. Sur mobile c'est aussi le cas des navigateurs basés sur Webkit (principalement iOS et Android). Et il y a en général des chances pour que les appareils plus vieux ou plus petits supportent au moins SVG Tiny. -<h2 id="Inkscape">Inkscape</h2> +## Inkscape -<p>URL: <a href="http://www.inkscape.org">www.inkscape.org</a></p> +URL: [www.inkscape.org](http://www.inkscape.org) -<p>L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source.</p> +L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source. -<p>Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard.</p> +Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard. -<h2 id="Adobe_Illustrator">Adobe Illustrator</h2> +## Adobe Illustrator -<p>URL: <a href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> +URL: [www.adobe.com/products/illustrator/](http://www.adobe.com/products/illustrator/) -<p>Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator.</p> +Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator. -<h2 id="Apache_Batik">Apache Batik</h2> +## Apache Batik -<p>URL: <a href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> +URL: [xmlgraphics.apache.org/batik/](http://xmlgraphics.apache.org/batik/) -<p>Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2.</p> +Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2. -<p>En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG.</p> +En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG. -<p>Utilisé avec <a href="http://xmlgraphics.apache.org/fop/">Apache FOP</a>, il permet également de transformer du SVG en PDF.</p> +Utilisé avec [Apache FOP](http://xmlgraphics.apache.org/fop/), il permet également de transformer du SVG en PDF. -<h3 id="Autres_moteurs_de_rendu">Autres moteurs de rendu</h3> +### Autres moteurs de rendu -<p>Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. <a href="http://ImageMagick.org">ImageMagick</a> est l'un des outils les plus connus de traitement des images en ligne de commande. Wikipédia utilise la librairie de code Gnome <a href="http://library.gnome.org/devel/rsvg/">rsvg</a> pour le rendu de ses images SVG.</p> +Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. [ImageMagick](http://ImageMagick.org) est l'un des outils les plus connus de traitement des images en ligne de commande. Wikipédia utilise la librairie de code Gnome [rsvg](http://library.gnome.org/devel/rsvg/) pour le rendu de ses images SVG. -<h2 id="Raphael_JS">Raphael JS</h2> +## Raphael JS -<p>URL: <a href="http://raphaeljs.com/">raphaeljs.com</a></p> +URL: [raphaeljs.com](http://raphaeljs.com/) -<p>Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5.</p> +Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5. -<h2 id="Snap.svg">Snap.svg</h2> +## Snap.svg -<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p> +URL: [snapsvg.io](http://snapsvg.io/) -<p>Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael.</p> +Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael. -<h2 id="Google_Docs">Google Docs</h2> +## Google Docs -<p>URL: <a href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> +URL: [www.google.com/google-d-s/drawings/](http://www.google.com/google-d-s/drawings/) -<p>Les dessins réalisés dans Google Docs peuvent être exportés en SVG.</p> +Les dessins réalisés dans Google Docs peuvent être exportés en SVG. -<h2 id="Science">Science</h2> +## Science -<p>Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web <a href="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a> supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs.</p> +Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web [JSXGraph](http://jsxgraph.uni-bayreuth.de/wp/) supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs. -<p>SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf <a href="http://carto.net">carto.net</a> pour davantage de détails.</p> +SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf [carto.net](http://carto.net) pour davantage de détails. -<h2 id="Autres_outils">Autres outils</h2> +## Autres outils -<p>Le W3C propose une <a href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">liste des programmes</a> qui supportent le SVG.</p> +Le W3C propose une [liste des programmes](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) qui supportent le SVG. -<p>{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}</p> +{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }} |