diff options
100 files changed, 972 insertions, 1850 deletions
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index a425e2ef8d..7a241e04bc 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -3396,8 +3396,6 @@ /fr/docs/SVG:Tutoriel /fr/docs/Web/SVG/Tutorial /fr/docs/SVG:Tutoriel:Introduction /fr/docs/Web/SVG/Tutorial/Introduction /fr/docs/SVG:Tutoriel:Premiers_pas /fr/docs/Web/SVG/Tutorial/Getting_Started -/fr/docs/SVG_dans_Firefox /fr/docs/Web/SVG/SVG_1.1_Support_in_Firefox -/fr/docs/SVG_dans_Firefox_1.5 /fr/docs/Web/SVG/SVG_1.1_Support_in_Firefox /fr/docs/Server-sent_events /fr/docs/Web/API/Server-sent_events /fr/docs/Server-sent_events/Using_server-sent_events /fr/docs/Web/API/Server-sent_events/Using_server-sent_events /fr/docs/Tools/Debugger/How_to/Black_box_a_source /fr/docs/Tools/Debugger/How_to/Ignore_a_source diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 44ad23bfb9..7dc80ddcb4 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -41172,18 +41172,6 @@ "xdelatour" ] }, - "Web/SVG/SVG_1.1_Support_in_Firefox": { - "modified": "2019-03-23T23:49:52.334Z", - "contributors": [ - "marie-ototoi", - "wakka27", - "Fredchat", - "BenoitL", - "VincentN", - "Mgjbot", - "Chbok" - ] - }, "Web/SVG/SVG_animation_with_SMIL": { "modified": "2019-08-24T09:55:45.297Z", "contributors": [ diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.html b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html index f7f381646f..db0d54be2a 100644 --- a/files/fr/web/svg/applying_svg_effects_to_html_content/index.html +++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html @@ -1,11 +1,6 @@ --- title: Application d'effets SVG à du contenu HTML slug: Web/SVG/Applying_SVG_effects_to_HTML_content -tags: - - CSS - - Guide - - HTML - - SVG translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content original_slug: Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML --- @@ -13,7 +8,10 @@ original_slug: Web/SVG/Application_d_effets_SVG_a_du_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> -<div class="note"><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.</div> +<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> <h2 id="Utilisation_de_SVG_intégré">Utilisation de SVG intégré</h2> @@ -22,9 +20,9 @@ original_slug: Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML <pre class="brush: html"><style>p { mask: url(#my-mask); }</style> </pre> -<p>Dans l'exemple ci-dessus, tous les paragraphes utilisent un <a href="/en-US/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> +<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> -<h3 id="Exemple_Application_d'un_masque">Exemple : Application d'un masque</h3> +<h3 id="Appliquer_un_masque">Appliquer un masque</h3> <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> @@ -67,7 +65,7 @@ p { <p>L'exemple ci-dessus serait rendu avec le masque appliqué.</p> -<p>{{EmbedLiveSample('Exemple_Application_d\'un_masque', 650, 200)}}</p> +<p>{{EmbedLiveSample('Appliquer_un_masque', 650, 200)}}</p> <h3 id="Exemple_Rogner">Exemple : Rogner</h3> @@ -154,8 +152,8 @@ p { <p>Et encore d'autres filtres :</p> -<pre class="brush: html"><span><svg height="0"> -</span> <filter id="f3"> +<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> @@ -171,7 +169,7 @@ p { 0 0 1 0 0 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> </filter> -<span></svg></span></pre> +</svg></pre> <p>Les cinq filtres sont appliqués en utilisant le CSS suivant :</p> @@ -185,8 +183,6 @@ pre.target:hover { filter:url(#f3); } <p>{{EmbedLiveSample('Exemple_Filtres', 650, 200)}}</p> -<p class="hidden"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p> - <h3 id="Exemple_Texte_flouté">Exemple : Texte flouté</h3> <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> @@ -215,7 +211,7 @@ pre.target:hover { filter:url(#f3); } <p>Par exemple, si votre CSS est un fichier nommé <code>default.css</code>, il pourrait contenir le code ci-dessous :</p> -<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre> +<pre class="brush: css">.target { clip-path: url(resources.svg#c1); }</pre> <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> @@ -223,6 +219,6 @@ pre.target:hover { filter:url(#f3); } <ul> <li><a href="/fr-FR/docs/SVG" title="SVG">SVG</a></li> - <li><a class="external" 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><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (blog post) (<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> + <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> diff --git a/files/fr/web/svg/attribute/accent-height/index.html b/files/fr/web/svg/attribute/accent-height/index.html index e19d3c01bd..d720356008 100644 --- a/files/fr/web/svg/attribute/accent-height/index.html +++ b/files/fr/web/svg/attribute/accent-height/index.html @@ -34,7 +34,7 @@ translation_of: Web/SVG/Attribute/accent-height </tr> <tr> <th scope="row">Spécification</th> - <td><a class="external" href="https://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute">SVG 1.1 (seconde édition)</a></td> + <td><a href="https://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute">SVG 1.1 (seconde édition)</a></td> </tr> </tbody> </table> diff --git a/files/fr/web/svg/attribute/clip-path/index.html b/files/fr/web/svg/attribute/clip-path/index.html index a3ac7eba52..7aceae680c 100644 --- a/files/fr/web/svg/attribute/clip-path/index.html +++ b/files/fr/web/svg/attribute/clip-path/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/clip-path <p>L'attribut <strong><code>clip-path</code></strong> permet d'appliquer un détourage à un élément.</p> -<p class="note"><strong>Note:</strong> <code>clip-path</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clipPath id="myClip" clipPathUnits="objectBoundingBox"> @@ -43,8 +44,7 @@ translation_of: Web/SVG/Attribute/clip-path clip-path="circle() view-box" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -70,9 +70,11 @@ translation_of: Web/SVG/Attribute/clip-path <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> -<p class="note"><strong>Note:</strong> Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}.</p> +<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> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2>Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.clip-path")}}</p> diff --git a/files/fr/web/svg/attribute/color/index.html b/files/fr/web/svg/attribute/color/index.html index 461a173d1b..d1475d4c18 100644 --- a/files/fr/web/svg/attribute/color/index.html +++ b/files/fr/web/svg/attribute/color/index.html @@ -10,7 +10,9 @@ translation_of: Web/SVG/Attribute/color <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> -<p class="note"><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 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> <h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> @@ -22,7 +24,7 @@ translation_of: Web/SVG/Attribute/color </tr> <tr> <th scope="row">Valeur</th> - <td><a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | inherit</td> + <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> @@ -30,7 +32,7 @@ translation_of: Web/SVG/Attribute/color </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> @@ -60,6 +62,6 @@ translation_of: Web/SVG/Attribute/color <li>{{ SVGElement("feSpecularLighting") }}</li> </ul> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.color")}}</p> diff --git a/files/fr/web/svg/attribute/conditional_processing/index.html b/files/fr/web/svg/attribute/conditional_processing/index.html index af14256f8c..fe0f0c644d 100644 --- a/files/fr/web/svg/attribute/conditional_processing/index.html +++ b/files/fr/web/svg/attribute/conditional_processing/index.html @@ -5,28 +5,26 @@ 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> -<div class="index"> <ul> - <li><a href="#attr-externalResourcesRequired">externalResourcesRequired</a></li> - <li><a href="#attr-requiredExtensions">requiredExtensions</a></li> - <li><a href="#attr-requiredFeatures">requiredFeatures</a></li> - <li><a href="#attr-systemLanguage">systemLanguage</a></li> + <li>externalResourcesRequired</li> + <li>requiredExtensions</li> + <li>requiredFeatures</li> + <li>systemLanguage</li> </ul> -</div> <h2 id="Attributs">Attributs</h2> <dl> - <dt id="attr-externalResourcesRequired">{{SVGAttr('externalResourcesRequired')}} {{deprecated_inline('svg2')}}</dt> + <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 id="attr-requiredExtensions">{{SVGAttr('requiredExtensions')}}</dt> + <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 id="attr-requiredFeatures">{{SVGAttr('requiredFeatures')}} {{deprecated_inline('svg2')}}</dt> + <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 id="attr-systemLanguage">{{SVGAttr('systemLanguage')}}</dt> + <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> diff --git a/files/fr/web/svg/attribute/core/index.html b/files/fr/web/svg/attribute/core/index.html index 7a7e1710b6..bb0b65989e 100644 --- a/files/fr/web/svg/attribute/core/index.html +++ b/files/fr/web/svg/attribute/core/index.html @@ -5,50 +5,48 @@ 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> -<div class="index"> <ul> - <li><a href="#attr-id"><code>id</code></a></li> - <li><a href="#attr-lang"><code>lang</code></a></li> - <li><a href="#attr-tabindex"><code>tabindex</code></a></li> - <li><a href="#attr-xml:base"><code>xml:base</code></a></li> - <li><a href="#attr-xml:lang"><code>xml:lang</code></a></li> - <li><a href="#attr-xml:space"><code>xml:space</code></a></li> + <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> -</div> <h2 id="Attributs">Attributs</h2> <dl> - <dt id="attr-id">{{SVGAttr('id')}}</dt> + <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 id="attr-lang">{{SVGAttr('lang')}}</dt> + <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>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> + <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 id="attr-tabindex">{{SVGAttr('tabindex')}}</dt> + <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 id="attr-xml:base">{{SVGAttr('xml:base')}}</dt> + <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 id="attr-xml:lang">{{SVGAttr('xml:lang')}}</dt> + <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>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> + <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 id="attr-xml:space">{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}</dt> + <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> diff --git a/files/fr/web/svg/attribute/cx/index.html b/files/fr/web/svg/attribute/cx/index.html index bb97ab6341..02eeedde0c 100644 --- a/files/fr/web/svg/attribute/cx/index.html +++ b/files/fr/web/svg/attribute/cx/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Attribute/cx <p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialGradient cx="25%" id="myGradient"> @@ -28,8 +27,7 @@ translation_of: Web/SVG/Attribute/cx <rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', 100, 100)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', 100, 100)}}</p> <h2 id="circle">circle</h2> @@ -52,7 +50,9 @@ translation_of: Web/SVG/Attribute/cx </tbody> </table> -<p class="note"><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 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> <h2 id="ellipse">ellipse</h2> @@ -75,11 +75,13 @@ translation_of: Web/SVG/Attribute/cx </tbody> </table> -<p class="note"><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 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> <h2 id="radialGradient">radialGradient</h2> -<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="/en-US/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> +<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> <table class="standard-table"> <tbody> @@ -98,11 +100,9 @@ translation_of: Web/SVG/Attribute/cx </tbody> </table> -<h4 id="Exemple">Exemple</h4> +<h4 id="autre_exemple">Autre exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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> diff --git a/files/fr/web/svg/attribute/cy/index.html b/files/fr/web/svg/attribute/cy/index.html index 041e7bcdfd..24ec4c6c58 100644 --- a/files/fr/web/svg/attribute/cy/index.html +++ b/files/fr/web/svg/attribute/cy/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Attribute/cy <p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialGradient cy="25%" id="myGradient"> @@ -28,8 +27,7 @@ translation_of: Web/SVG/Attribute/cy <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 300)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 300)}}</p> <h2 id="circle">circle</h2> @@ -52,7 +50,9 @@ translation_of: Web/SVG/Attribute/cy </tbody> </table> -<p class="note"><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 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> <h2 id="ellipse">ellipse</h2> @@ -75,11 +75,13 @@ translation_of: Web/SVG/Attribute/cy </tbody> </table> -<p class="note"><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 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> <h2 id="radialGradient">radialGradient</h2> -<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="https://developer.mozilla.org/en-US/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> +<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> <table class="standard-table"> <tbody> @@ -98,11 +100,9 @@ translation_of: Web/SVG/Attribute/cy </tbody> </table> -<h4 id="Exemple">Exemple</h4> +<h4 id="autre_exemple">Autre exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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> diff --git a/files/fr/web/svg/attribute/d/index.html b/files/fr/web/svg/attribute/d/index.html index 7aad4f3a04..8593128d7e 100644 --- a/files/fr/web/svg/attribute/d/index.html +++ b/files/fr/web/svg/attribute/d/index.html @@ -10,14 +10,13 @@ translation_of: Web/SVG/Attribute/d <p>L'attribut <strong><code>d</code></strong> définit un tracé à dessiner.</p> -<p>La définition d'un tracé est une liste de <a dir="ltr" href="/fr/docs/" id="#Path_commands">commandes de tracé</a> 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> +<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> <p>Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}</p> -<div id="Example"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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"> <path fill="none" stroke="red" @@ -28,7 +27,7 @@ translation_of: Web/SVG/Attribute/d Q 10, 60 10, 30 z" /> </svg></pre> -<p>{{EmbedLiveSample('Example', '100%', 200)}}</p> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Tracé">Tracé</h2> @@ -53,7 +52,9 @@ translation_of: Web/SVG/Attribute/d <h2 id="glyph">glyph</h2> -<p class="warning"><strong>Attention :</strong> Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.</p> +</div> <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> @@ -74,11 +75,15 @@ translation_of: Web/SVG/Attribute/d </tbody> </table> -<p class="note"><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 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> <h2 id="missing-glyph">missing-glyph</h2> -<p class="warning"><strong>Attention :</strong> Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.</p> +<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> <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> @@ -113,9 +118,11 @@ translation_of: Web/SVG/Attribute/d <li>Fermer le chemin (ClosePath)</li> </ul> -<p class="note"><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 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> -<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><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee; font-size: 13.6px; white-space: nowrap;"><strong> </strong></span></font>négatives se déplaceront vers la gauche; et des valeurs <code>y</code> négatives se déplaceront vers le haut.</p> +<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> <h2 id="Moveto_(aller_à)">Moveto (aller à)</h2> @@ -150,21 +157,19 @@ translation_of: Web/SVG/Attribute/d <h2 id="Curveto">Curveto</h2> -<p>L'instruction Curveto trace une <a href="https://developer.mozilla.org/en-US/docs/User:Jt_Sandbox/Curves_in_Paths">courbe de Bézier</a>. 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> +<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> <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> -<div> + <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> <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> -<div class="geckoVersionNote"> <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> -</div> <h2 id="Arcto">Arcto</h2> @@ -177,7 +182,6 @@ translation_of: Web/SVG/Attribute/d <h2 id="ClosePath_(fermer_un_chemin)">ClosePath (fermer un chemin)</h2> <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> -</div> <h2 id="Éléments">Éléments</h2> @@ -193,4 +197,3 @@ translation_of: Web/SVG/Attribute/d <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> -</div> diff --git a/files/fr/web/svg/attribute/dx/index.html b/files/fr/web/svg/attribute/dx/index.html index 436b6dbd85..a77d19da24 100644 --- a/files/fr/web/svg/attribute/dx/index.html +++ b/files/fr/web/svg/attribute/dx/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Attribute/dx <p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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"> <!-- Lignes indiquant la position des glyphes --> @@ -36,12 +35,13 @@ translation_of: Web/SVG/Attribute/dx stroke-dasharray: 3px; }</pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="altGlyph">altGlyph</h2> -<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> @@ -108,7 +108,9 @@ translation_of: Web/SVG/Attribute/dx <h2 id="glyphRef">glyphRef</h2> -<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> @@ -154,9 +156,7 @@ translation_of: Web/SVG/Attribute/dx <h3 id="Exemple">Exemple</h3> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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 --> @@ -185,9 +185,9 @@ translation_of: Web/SVG/Attribute/dx <h2 id="tref">tref</h2> -<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> - -<p> </p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> diff --git a/files/fr/web/svg/attribute/dy/index.html b/files/fr/web/svg/attribute/dy/index.html index 2dd91bf46e..08d75f48a1 100644 --- a/files/fr/web/svg/attribute/dy/index.html +++ b/files/fr/web/svg/attribute/dy/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Attribute/dy <p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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"> <!-- Lignes indiquant la position des glyphes --> @@ -36,12 +35,13 @@ translation_of: Web/SVG/Attribute/dy stroke-dasharray: 3px; }</pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="altGlyph">altGlyph</h2> -<p class="warning"><strong>Attention:</strong> Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> @@ -108,7 +108,9 @@ translation_of: Web/SVG/Attribute/dy <h2 id="glyphRef">glyphRef</h2> -<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> @@ -135,8 +137,6 @@ translation_of: Web/SVG/Attribute/dy <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> @@ -156,9 +156,7 @@ translation_of: Web/SVG/Attribute/dy <h3 id="Exemple">Exemple</h3> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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 --> @@ -188,16 +186,14 @@ translation_of: Web/SVG/Attribute/dy <h2 id="tref">tref</h2> -<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> - -<p> </p> +<div class="warning"> + <p><strong>Attention :</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p> +</div> <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> <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> @@ -217,14 +213,10 @@ translation_of: Web/SVG/Attribute/dy <h2 id="tspan">tspan</h2> -<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> -<p> </p> - <table class="standard-table"> <tbody> <tr> diff --git a/files/fr/web/svg/attribute/fill-opacity/index.html b/files/fr/web/svg/attribute/fill-opacity/index.html index f25676d26c..82e5f456c3 100644 --- a/files/fr/web/svg/attribute/fill-opacity/index.html +++ b/files/fr/web/svg/attribute/fill-opacity/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/fill-opacity <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> -<p class="note"><strong>Note:</strong> <code>fill-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- Opacité par défaut: 1 --> @@ -36,8 +37,7 @@ translation_of: Web/SVG/Attribute/fill-opacity style="fill-opacity: .25;" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> <h2 id="Notes_d'utilisation">Notes d'utilisation</h2> @@ -58,7 +58,9 @@ translation_of: Web/SVG/Attribute/fill-opacity </tbody> </table> -<p class="note"><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'utiiser les valeurs de l'intervalle <code>[0-1]</code>.</p> +<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> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/svg/attribute/fill-rule/index.html b/files/fr/web/svg/attribute/fill-rule/index.html index 63503dc77b..04872838d2 100644 --- a/files/fr/web/svg/attribute/fill-rule/index.html +++ b/files/fr/web/svg/attribute/fill-rule/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/fill-rule <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> -<p class="note"><strong>Note:</strong> <code>fill-rule</code> est un attribut de présentation et peut donc être utilisé comme propriété CSS.</p> +<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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- Valeur par défaut pour fill-rule --> @@ -34,9 +35,8 @@ translation_of: Web/SVG/Attribute/fill-rule <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/> </svg></pre> -</div> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Usage">Usage</h2> @@ -67,9 +67,7 @@ translation_of: Web/SVG/Attribute/fill-rule <h4 id="Exemple">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <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 --> @@ -103,9 +101,7 @@ translation_of: Web/SVG/Attribute/fill-rule <h4 id="Exemple_2">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <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 --> @@ -133,7 +129,7 @@ translation_of: Web/SVG/Attribute/fill-rule <p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.fill-rule")}}</p> diff --git a/files/fr/web/svg/attribute/fill/index.html b/files/fr/web/svg/attribute/fill/index.html index c798d383fd..bca17a20a8 100644 --- a/files/fr/web/svg/attribute/fill/index.html +++ b/files/fr/web/svg/attribute/fill/index.html @@ -14,10 +14,9 @@ translation_of: Web/SVG/Attribute/fill <p>Pour les animations, il s'applique à cinq éléments: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, et {{SVGElement('set')}}</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- Remplir avec une simple couleur --> @@ -42,12 +41,13 @@ translation_of: Web/SVG/Attribute/fill </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="altGlyph">altGlyph</h2> -<p class="warning"><strong>Attention:</strong> {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> +</div> <p>Pour {{SVGElement('altGlyph')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du glyphe.</p> @@ -68,7 +68,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="animate">animate</h2> @@ -93,7 +95,9 @@ translation_of: Web/SVG/Attribute/fill <h2 id="animateColor">animateColor</h2> -<p class="warning"><strong>Attention:</strong> {{SVGElement('animateColor')}} est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser {{SVGElement('animate')}} à la place.</p> +<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> <p>Pour {{SVGElement('animateColor')}}, <code>fill</code> définit l'état final de l'animation.</p> @@ -177,7 +181,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="ellipse">ellipse</h2> @@ -200,7 +206,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="path">path</h2> @@ -223,7 +231,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="polygon">polygon</h2> @@ -246,7 +256,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="polyline">polyline</h2> @@ -269,7 +281,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="rect">rect</h2> @@ -292,7 +306,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="set">set</h2> @@ -336,7 +352,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="textPath">textPath</h2> @@ -359,11 +377,15 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="tref">tref</h2> -<p class="warning"><strong>Attention:</strong> {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> +<div class="warning"> + <p><strong>Attention :</strong> {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p> +</div> <p>Pour {{SVGElement('tref')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p> @@ -384,7 +406,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="tspan">tspan</h2> @@ -407,7 +431,9 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <h2 id="Spécifications">Spécifications</h2> @@ -429,7 +455,7 @@ translation_of: Web/SVG/Attribute/fill <td>{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}</td> <td>{{Spec2("SVG2")}}</td> <td>Définition pour les formes et le texte.<br> - Ajoute <code style="white-space: nowrap;">context-fill</code> et <code style="white-space: nowrap;">context-stroke</code>.</td> + Ajoute <code>context-fill</code> et <code>context-stroke</code>.</td> </tr> <tr> <td>{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}</td> @@ -444,8 +470,10 @@ translation_of: Web/SVG/Attribute/fill </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.fill")}}</p> -<p class="note"><strong>Note:</strong> Pour plus d'informations sur les valeurs de <code style="white-space: nowrap;">context-fill</code> (et <code style="white-space: nowrap;">context-stroke</code>) dans des documents HTML, voir la documentation pour la propriété non-standard <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span>.</p> +<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> diff --git a/files/fr/web/svg/attribute/height/index.html b/files/fr/web/svg/attribute/height/index.html index bb08f32bcd..d0caca7baf 100644 --- a/files/fr/web/svg/attribute/height/index.html +++ b/files/fr/web/svg/attribute/height/index.html @@ -6,7 +6,7 @@ tags: - SVG translation_of: Web/SVG/Attribute/height --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <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> @@ -22,7 +22,7 @@ translation_of: Web/SVG/Attribute/height </tr> <tr> <th scope="row">Valeur</th> - <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> + <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> @@ -30,14 +30,14 @@ translation_of: Web/SVG/Attribute/height </tr> <tr> <th scope="row">Documents normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute">SVG 1.1 (2nd Edition): image element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute">SVG 1.1 (2nd Edition): rect element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute">SVG 1.1 (2nd Edition): svg element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute">SVG 1.1 (2nd Edition): use element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute">SVG 1.1 (2nd Edition): mask element</a></td> + <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> @@ -46,20 +46,20 @@ translation_of: Web/SVG/Attribute/height <h2 id="Exemple">Exemple</h2> -<pre class="brush: xml line-numbers language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> - <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> - <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> <h2 id="Eléments">Eléments</h2> <p>Les éléments suivants peuvent utiliser l'attribut <code>height</code> :</p> <ul> - <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <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> diff --git a/files/fr/web/svg/attribute/in/index.html b/files/fr/web/svg/attribute/in/index.html index 19673d8804..3c4eb4f139 100644 --- a/files/fr/web/svg/attribute/in/index.html +++ b/files/fr/web/svg/attribute/in/index.html @@ -7,7 +7,7 @@ tags: - SVG Filter translation_of: Web/SVG/Attribute/in --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <p>L'attribut <code>in</code> identifie l'entrée pour la primitive de filtre donnée.</p> @@ -33,7 +33,7 @@ translation_of: Web/SVG/Attribute/in </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> @@ -65,7 +65,7 @@ translation_of: Web/SVG/Attribute/in <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> </filter> </defs> - <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <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> @@ -73,7 +73,7 @@ translation_of: Web/SVG/Attribute/in <defs> <filter id="imageMultiply"> <!-- Solution de contournement. --> - <feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feBlend in2="SourceGraphic" mode="multiply"/> </filter> </defs> @@ -83,7 +83,7 @@ translation_of: Web/SVG/Attribute/in <p>{{ EmbedLiveSample('Contournement_pour_BackgroundImage') }}</p> -<h2 id="Workaround_for_BackgroundImage" name="Workaround_for_BackgroundImage">Éléments</h2> +<h2>Éléments</h2> <p>Les éléments suivants peuvent utiliser l'attribut <code>in</code>:</p> diff --git a/files/fr/web/svg/attribute/index.html b/files/fr/web/svg/attribute/index.html index 87b1834e9c..aa176af715 100644 --- a/files/fr/web/svg/attribute/index.html +++ b/files/fr/web/svg/attribute/index.html @@ -12,11 +12,13 @@ translation_of: Web/SVG/Attribute --- <div>{{SVGRef}}</div> -<p class="summary"><span class="seoSummary">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.</span> 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> +<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> -<div class="index"> + <h3 id="A">A</h3> <ul> @@ -394,7 +396,7 @@ translation_of: Web/SVG/Attribute <li>{{SVGAttr("z")}}</li> <li>{{SVGAttr("zoomAndPan")}}</li> </ul> -</div> + <h2 id="Attributs_SVG_par_catégorie">Attributs SVG par catégorie</h2> @@ -418,7 +420,9 @@ translation_of: Web/SVG/Attribute <h3 id="Attributs_de_présentation"><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></h3> -<div class="note">Notez que tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS.</div> +<div class="note"> + <p><strong>Note :</strong> Tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS.</p> +</div> <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> diff --git a/files/fr/web/svg/attribute/mask/index.html b/files/fr/web/svg/attribute/mask/index.html index a3145cc508..c7059b649f 100644 --- a/files/fr/web/svg/attribute/mask/index.html +++ b/files/fr/web/svg/attribute/mask/index.html @@ -7,13 +7,14 @@ translation_of: Web/SVG/Attribute/mask <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> -<p class="note"><strong>Note:</strong> On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS.</p> - -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> +<div class="note"> + <p><strong>Note :</strong> On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS.</p> </div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> + <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%" /> @@ -27,8 +28,7 @@ translation_of: Web/SVG/Attribute/mask mask="url(#monMask)"/> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> <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> @@ -53,9 +53,7 @@ translation_of: Web/SVG/Attribute/mask </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> - - +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.mask")}}</p> diff --git a/files/fr/web/svg/attribute/points/index.html b/files/fr/web/svg/attribute/points/index.html index 7c78fd2030..1ca4f41fc7 100644 --- a/files/fr/web/svg/attribute/points/index.html +++ b/files/fr/web/svg/attribute/points/index.html @@ -9,10 +9,9 @@ translation_of: Web/SVG/Attribute/points <p>Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut.</p> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline est une forme ouverte --> @@ -30,14 +29,15 @@ translation_of: Web/SVG/Attribute/points --> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="polyline">polyline</h2> <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> -<p class="note"><strong>Remarque:</strong> Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.</p> +<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> <table class="properties"> <tbody> @@ -58,9 +58,7 @@ translation_of: Web/SVG/Attribute/points <h3 id="Exemple">Exemple</h3> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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"> <!-- polyline est une forme ouverte --> @@ -74,7 +72,9 @@ translation_of: Web/SVG/Attribute/points <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> -<p class="note"><strong>Remarque:</strong> Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.</p> +<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> <table class="properties"> <tbody> @@ -95,9 +95,7 @@ translation_of: Web/SVG/Attribute/points <h3 id="Example">Example</h3> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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 --> diff --git a/files/fr/web/svg/attribute/presentation/index.html b/files/fr/web/svg/attribute/presentation/index.html index d1c646c803..bf0a47bbee 100644 --- a/files/fr/web/svg/attribute/presentation/index.html +++ b/files/fr/web/svg/attribute/presentation/index.html @@ -7,266 +7,262 @@ translation_of: Web/SVG/Attribute/Presentation <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> -<div class="index"> <ul> - <li><a href="#attr-alignment-baseline">alignment-baseline</a></li> - <li><a href="#attr-baseline-shift">baseline-shift</a></li> - <li><a href="#attr-clip">clip</a></li> - <li><a href="#attr-clip-path">clip-path</a></li> - <li><a href="#attr-clip-rule">clip-rule</a></li> - <li><a href="#attr-color">color</a></li> - <li><a href="#attr-color-interpolation">color-interpolation</a></li> - <li><a href="#attr-color-interpolation-filters">color-interpolation-filters</a></li> - <li><a href="#attr-color-profile">color-profile</a></li> - <li><a href="#attr-color-rendering">color-rendering</a></li> - <li><a href="#attr-cursor">cursor</a></li> - <li><a href="#attr-direction">direction</a></li> - <li><a href="#attr-display">display</a></li> - <li><a href="#attr-dominant-baseline">dominant-baseline</a></li> - <li><a href="#attr-enable-background">enable-background</a></li> - <li><a href="#attr-fill">fill</a></li> - <li><a href="#attr-fill-opacity">fill-opacity</a></li> - <li><a href="#attr-fill-rule">fill-rule</a></li> - <li><a href="#attr-filter">filter</a></li> - <li><a href="#attr-flood-color">flood-color</a></li> - <li><a href="#attr-flood-opacity">flood-opacity</a></li> - <li><a href="#attr-font-family">font-family</a></li> - <li><a href="#attr-font-size">font-size</a></li> - <li><a href="#attr-font-size-adjust">font-size-adjust</a></li> - <li><a href="#attr-font-stretch">font-stretch</a></li> - <li><a href="#attr-font-style">font-style</a></li> - <li><a href="#attr-font-variant">font-variant</a></li> - <li><a href="#attr-font-weight">font-weight</a></li> - <li><a href="#attr-glyph-orientation-horizontal">glyph-orientation-horizontal</a></li> - <li><a href="#attr-glyph-orientation-vertical">glyph-orientation-vertical</a></li> - <li><a href="#attr-image-rendering">image-rendering</a></li> - <li><a href="#attr-kerning">kerning</a></li> - <li><a href="#attr-letter-spacing">letter-spacing</a></li> - <li><a href="#attr-lighting-color">lighting-color</a></li> - <li><a href="#attr-marker-end">marker-end</a></li> - <li><a href="#attr-marker-mid">marker-mid</a></li> - <li><a href="#attr-marker-start">marker-start</a></li> - <li><a href="#attr-mask">mask</a></li> - <li><a href="#attr-opacity">opacity</a></li> - <li><a href="#attr-overflow">overflow</a></li> - <li><a href="#attr-pointer-events">pointer-events</a></li> - <li><a href="#attr-shape-rendering">shape-rendering</a></li> - <li><a href="#attr-solid-color">solid-color</a></li> - <li><a href="#attr-solid-opacity">solid-opacity</a></li> - <li><a href="#attr-stop-color">stop-color</a></li> - <li><a href="#attr-stop-opacity">stop-opacity</a></li> - <li><a href="#attr-stroke">stroke</a></li> - <li><a href="#attr-stroke-dasharray">stroke-dasharray</a></li> - <li><a href="#attr-stroke-dashoffset">stroke-dashoffset</a></li> - <li><a href="#attr-stroke-linecap">stroke-linecap</a></li> - <li><a href="#attr-stroke-linejoin">stroke-linejoin</a></li> - <li><a href="#attr-stroke-miterlimit">stroke-miterlimit</a></li> - <li><a href="#attr-stroke-opacity">stroke-opacity</a></li> - <li><a href="#attr-stroke-width">stroke-width</a></li> - <li><a href="#attr-text-anchor">text-anchor</a></li> - <li><a href="#attr-text-decoration">text-decoration</a></li> - <li><a href="#attr-text-rendering">text-rendering</a></li> - <li><a href="#attr-transform">transform</a></li> - <li><a href="#attr-unicode-bidi">unicode-bidi</a></li> - <li><a href="#attr-vector-effect">vector-effect</a></li> - <li><a href="#attr-visibility">visibility</a></li> - <li><a href="#attr-word-spacing">word-spacing</a></li> - <li><a href="#attr-writing-mode">writing-mode</a></li> + <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> -</div> <h2 id="Attributs">Attributs</h2> -<p> </p> - <dl> - <dt id="attr-alignment-baseline">{{SVGAttr('alignment-baseline')}}</dt> + <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 id="attr-baseline-shift">{{SVGAttr('baseline-shift')}}</dt> + <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 id="attr-clip">{{SVGAttr('clip')}} {{deprecated_inline('css')}}</dt> + <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 id="attr-clip-path">{{SVGAttr('clip-path')}}</dt> + <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 id="attr-clip-rule">{{SVGAttr('clip-rule')}}</dt> + <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 id="attr-color">{{SVGAttr('color')}}</dt> + <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 id="attr-color-interpolation">{{SVGAttr('color-interpolation')}}</dt> + <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 id="attr-color-interpolation-filters">{{SVGAttr('color-interpolation-filters')}}</dt> + <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 id="attr-color-profile">{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}</dt> + <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 id="attr-color-rendering">{{SVGAttr('color-rendering')}}</dt> + <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 id="attr-cursor">{{SVGAttr('cursor')}}</dt> + <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 id="attr-direction">{{SVGAttr('direction')}}</dt> + <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 id="attr-display">{{SVGAttr('display')}}</dt> + <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 id="attr-dominant-baseline">{{SVGAttr('dominant-baseline')}}</dt> + <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 id="attr-enable-background">{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}</dt> + <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 id="attr-fill">{{SVGAttr('fill')}}</dt> + <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 id="attr-fill-opacity">{{SVGAttr('fill-opacity')}}</dt> + <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 id="attr-fill-rule">{{SVGAttr('fill-rule')}}</dt> + <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 id="attr-filter">{{SVGAttr('filter')}}</dt> + <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 id="attr-flood-color">{{SVGAttr('flood-color')}}</dt> + <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 id="attr-flood-opacity">{{SVGAttr('flood-opacity')}}</dt> + <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 id="attr-font-family">{{SVGAttr('font-family')}}</dt> + <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 id="attr-font-size">{{SVGAttr('font-size')}}</dt> + <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 id="attr-font-size-adjust">{{SVGAttr('font-size-adjust')}}</dt> + <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 id="attr-font-stretch">{{SVGAttr('font-stretch')}}</dt> + <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 id="attr-font-style">{{SVGAttr('font-style')}}</dt> + <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 id="attr-font-variant">{{SVGAttr('font-variant')}}</dt> + <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 id="attr-font-weight">{{SVGAttr('font-weight')}}</dt> + <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 id="attr-glyph-orientation-horizontal">{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}</dt> + <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 id="attr-glyph-orientation-vertical">{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}</dt> + <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 id="attr-image-rendering">{{SVGAttr('image-rendering')}}</dt> + <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 id="attr-kerning">{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}</dt> + <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 id="attr-letter-spacing">{{SVGAttr('letter-spacing')}}</dt> + <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 id="attr-lighting-color">{{SVGAttr('lighting-color')}}</dt> + <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 id="attr-marker-end">{{SVGAttr('marker-end')}}</dt> + <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 id="attr-marker-mid">{{SVGAttr('marker-mid')}}</dt> + <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 id="attr-marker-start">{{SVGAttr('marker-start')}}</dt> + <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 id="attr-mask">{{SVGAttr('mask')}}</dt> + <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 id="attr-opacity">{{SVGAttr('opacity')}}</dt> + <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 id="attr-overflow">{{SVGAttr('overflow')}}</dt> + <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 id="attr-pointer-events">{{SVGAttr('pointer-events')}}</dt> + <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 id="attr-shape-rendering">{{SVGAttr('shape-rendering')}}</dt> + <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 id="attr-solid-color">{{SVGAttr('solid-color')}}</dt> + <dt>{{SVGAttr('solid-color')}}</dt> <dd>-<br> <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd> - <dt id="attr-solid-opacity">{{SVGAttr('solid-opacity')}}</dt> + <dt>{{SVGAttr('solid-opacity')}}</dt> <dd>-<br> <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd> - <dt id="attr-stop-color">{{SVGAttr('stop-color')}}</dt> + <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="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a>|<a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stop-opacity">{{SVGAttr('stop-opacity')}}</dt> + <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="/en/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 id="attr-stroke">{{SVGAttr('stroke')}}</dt> + <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 id="attr-stroke-dasharray">{{SVGAttr('stroke-dasharray')}}</dt> + <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 id="attr-stroke-dashoffset">{{SVGAttr('stroke-dashoffset')}}</dt> + <dt>{{SVGAttr('stroke-dashoffset')}}</dt> <dd>Décale la position de départ des pointillés.<br> - <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a>|<a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke-linecap"><strong>{{SVGAttr('stroke-linecap')}}</strong></dt> + <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 id="attr-stroke-linejoin"><strong>{{SVGAttr('stroke-linejoin')}}</strong></dt> + <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 id="attr-stroke-miterlimit"><strong>{{SVGAttr('stroke-miterlimit')}}</strong></dt> + <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="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a>; <em>Animation</em>: <strong>Oui</strong></small></dd> - <dt id="attr-stroke-opacity"><strong>{{SVGAttr('stroke-opacity')}}</strong></dt> + <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="/en/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 id="attr-stroke-width"><strong>{{SVGAttr('stroke-width')}}</strong></dt> + <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 id="attr-text-anchor"><strong>{{SVGAttr('text-anchor')}}</strong></dt> + <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 id="attr-text-decoration"><strong>{{SVGAttr('text-decoration')}}</strong></dt> + <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 id="attr-text-rendering"><strong>{{SVGAttr('text-rendering')}}</strong></dt> + <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 id="attr-transform"><strong>{{SVGAttr('transform')}}</strong></dt> + <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 id="attr-unicode-bidi"><strong>{{SVGAttr('unicode-bidi')}}</strong></dt> + <dt><strong>{{SVGAttr('unicode-bidi')}}</strong></dt> <dd>-<br> <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd> - <dt id="attr-vector-effect"><strong>{{SVGAttr('vector-effect')}}</strong></dt> + <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 id="attr-visibility"><strong>{{SVGAttr('visibility')}}</strong></dt> + <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 id="attr-word-spacing"><strong>{{SVGAttr('word-spacing')}}</strong></dt> + <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="/en/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 id="attr-writing-mode"><strong>{{SVGAttr('writing-mode')}}</strong></dt> + <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> diff --git a/files/fr/web/svg/attribute/preserveaspectratio/index.html b/files/fr/web/svg/attribute/preserveaspectratio/index.html index 7d5ffb6db1..894241bcf5 100644 --- a/files/fr/web/svg/attribute/preserveaspectratio/index.html +++ b/files/fr/web/svg/attribute/preserveaspectratio/index.html @@ -20,41 +20,6 @@ translation_of: Web/SVG/Attribute/preserveAspectRatio </defs> <!-- (largeur>hauteur) meet --> - <svg preserveAspectRatio="xMidYMid meet" x="0" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMinYMid meet" x="25" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMaxYMid meet" x="50" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - - <!-- (largeur>hauteur) slice --> - <svg preserveAspectRatio="xMidYMin slice" x="0" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMid slice" x="25" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMax slice" x="50" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> - - <!-- (largeur<hauteur) meet --> - <svg preserveAspectRatio="xMidYMin meet" x="75" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMid meet" x="90" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMax meet" x="105" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - - <!-- (largeur<hauteur) slice --> - <svg preserveAspectRatio="xMinYMid slice" x="120" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMidYMid slice" x="135" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - <svg preserveAspectRatio="xMaxYMid slice" x="150" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> - - <!-- none --> - <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg> -</svg></pre> - -<div class="hidden"> -<h6 id="topExample">topExample</h6> - -<pre class="brush: css">html,body,svg { height:100% } -</pre> - -<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> @@ -164,7 +129,11 @@ translation_of: Web/SVG/Attribute/preserveAspectRatio </svg> </svg></pre> -<pre class="brush: css">path { + +<pre class="brush: css hidden"> +html,body,svg { height:100% } + +path { fill: yellow; stroke: black; stroke-width: 8px; @@ -176,7 +145,6 @@ translation_of: Web/SVG/Attribute/preserveAspectRatio rect:hover, rect:active { outline: 1px solid red; }</pre> -</div> <p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> diff --git a/files/fr/web/svg/attribute/seed/index.html b/files/fr/web/svg/attribute/seed/index.html index e4b985d459..23d668208f 100644 --- a/files/fr/web/svg/attribute/seed/index.html +++ b/files/fr/web/svg/attribute/seed/index.html @@ -22,7 +22,7 @@ translation_of: Web/SVG/Attribute/seed </tr> <tr> <th scope="row">Valeur</th> - <td><a href="/en-US/docs/SVG/Content_type#Number" title="/en-US/docs/SVG/Content_type#Number"><number></a></td> + <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> diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.html b/files/fr/web/svg/attribute/stroke-dasharray/index.html index 0680b8e9bc..c9cf9f4f60 100644 --- a/files/fr/web/svg/attribute/stroke-dasharray/index.html +++ b/files/fr/web/svg/attribute/stroke-dasharray/index.html @@ -8,15 +8,15 @@ 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> -<p class="note"><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 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> <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> <h2 id="Exemple">Exemple</h2> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg"> @@ -40,7 +40,7 @@ translation_of: Web/SVG/Attribute/stroke-dasharray </tr> <tr> <th scope="row">Valeur</th> - <td><strong title="this is the default value">none</strong> | <dasharray> | inherit</td> + <td>none | <dasharray> | inherit</td> </tr> <tr> <th scope="row">Animable</th> @@ -48,17 +48,17 @@ translation_of: Web/SVG/Attribute/stroke-dasharray </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td> + <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 <span><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a> et</span> <a href="/en/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> + <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> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke-dasharray")}}</p> diff --git a/files/fr/web/svg/attribute/stroke-dashoffset/index.html b/files/fr/web/svg/attribute/stroke-dashoffset/index.html index ef1bbc8db7..071512cffe 100644 --- a/files/fr/web/svg/attribute/stroke-dashoffset/index.html +++ b/files/fr/web/svg/attribute/stroke-dashoffset/index.html @@ -10,14 +10,16 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset <p>L'attribut <strong><code>stroke-dashoffset</code></strong> décale la position de départ des pointillés sur les lignes SVG.</p> -<p class="note"><strong>Note:</strong> <code>stroke-dashoffset</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> + <pre class="brush: html"><svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> <!-- Pas de tiret --> @@ -60,8 +62,7 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -69,7 +70,7 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset <tbody> <tr> <th scope="row">Valeur</th> - <td><strong><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a></strong> | <strong><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a></strong></td> + <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> @@ -82,9 +83,9 @@ translation_of: Web/SVG/Attribute/stroke-dashoffset </tbody> </table> -<p>Le décalage est généralement exprimé en unités résolues par {{SVGAttr('pathLength')}} mais si un <a href="/en/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> +<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> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke-dashoffset")}}</p> diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.html b/files/fr/web/svg/attribute/stroke-linecap/index.html index 856c000a03..d8b46b8472 100644 --- a/files/fr/web/svg/attribute/stroke-linecap/index.html +++ b/files/fr/web/svg/attribute/stroke-linecap/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-linecap <p>L'attribut <strong><code>stroke-linecap</code></strong> définit la forme de la fin des lignes SVG.</p> -<p class="note"><strong>Note:</strong> <code>stroke-linecap</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> @@ -41,8 +42,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -69,9 +69,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap <h4 id="Exemple">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> @@ -103,9 +101,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap <h4 id="Exemple_2">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> @@ -137,9 +133,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap <h4 id="Exemple_3">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> @@ -164,7 +158,7 @@ translation_of: Web/SVG/Attribute/stroke-linecap <p>{{EmbedLiveSample('square', '100%', 200)}}</p> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</p> diff --git a/files/fr/web/svg/attribute/stroke-linejoin/index.html b/files/fr/web/svg/attribute/stroke-linejoin/index.html index c6a7cac4cd..019611c57d 100644 --- a/files/fr/web/svg/attribute/stroke-linejoin/index.html +++ b/files/fr/web/svg/attribute/stroke-linejoin/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <p>L'attribut <strong><code>stroke-linejoin</code></strong> définit la manière de dessiner la liaison entre deux segments de ligne.</p> -<div class="blockIndicator note"><strong>Note:</strong> <code>stroke-linejoin</code> étant un attribut de présentation, il peut être utililsé comme propriété CSS.</div> +<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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- @@ -75,8 +76,7 @@ translation_of: Web/SVG/Attribute/stroke-linejoin </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 400)}}</p> <h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> @@ -99,15 +99,15 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h3 id="arcs">arcs</h3> -<div class="blockIndicator note"><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.</div> +<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> <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> <h4 id="Exemple">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "arcs" --> @@ -135,9 +135,7 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h4 id="Exemple_2">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "bevel" --> @@ -163,13 +161,13 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <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> -<div class="blockIndicator note"><strong>Note:</strong> Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type <code>bevel</code> est utilisé à la place.</div> +<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> <h4 id="Exemple_3">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "miter" --> @@ -206,7 +204,9 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h3 id="miter-clip">miter-clip</h3> -<div class="blockIndicator note"><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.</div> +<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> <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> @@ -214,9 +214,7 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h4 id="Exemple_4">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "miter-clip" --> @@ -257,9 +255,7 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <h4 id="Exemple_5">Exemple</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- Effet de la valeur "round" --> diff --git a/files/fr/web/svg/attribute/stroke-miterlimit/index.html b/files/fr/web/svg/attribute/stroke-miterlimit/index.html index 76ce54a173..f1dfd341e8 100644 --- a/files/fr/web/svg/attribute/stroke-miterlimit/index.html +++ b/files/fr/web/svg/attribute/stroke-miterlimit/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-miterlimit <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> -<p class="note"><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 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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- Impact du miterlimit par défaut --> @@ -53,8 +54,7 @@ translation_of: Web/SVG/Attribute/stroke-miterlimit 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> -<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 400)}}</p> <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> @@ -70,7 +70,7 @@ translation_of: Web/SVG/Attribute/stroke-miterlimit <tbody> <tr> <th scope="row">Valeur</th> - <td><strong><a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number"><number></a></strong></td> + <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> @@ -85,7 +85,7 @@ translation_of: Web/SVG/Attribute/stroke-miterlimit <p>La valeur de <code>stroke-miterlimit</code> doit être supérieure ou égale à 1.</p> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke-miterlimit")}}</p> diff --git a/files/fr/web/svg/attribute/stroke-opacity/index.html b/files/fr/web/svg/attribute/stroke-opacity/index.html index 1476dac1b5..c1ba3c17f0 100644 --- a/files/fr/web/svg/attribute/stroke-opacity/index.html +++ b/files/fr/web/svg/attribute/stroke-opacity/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-opacity <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> -<p class="note"><strong>Note:</strong> <code>stroke-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- Opacité par défaut: 1 --> @@ -36,8 +37,7 @@ translation_of: Web/SVG/Attribute/stroke-opacity style="stroke-opacity: .3;" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -58,7 +58,9 @@ translation_of: Web/SVG/Attribute/stroke-opacity </tbody> </table> -<p class="note"><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 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> <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> diff --git a/files/fr/web/svg/attribute/stroke-width/index.html b/files/fr/web/svg/attribute/stroke-width/index.html index 5ea9c710b4..db0bb6754d 100644 --- a/files/fr/web/svg/attribute/stroke-width/index.html +++ b/files/fr/web/svg/attribute/stroke-width/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke-width <p>L'attribut <strong><code>stroke-width</code></strong> définit l'épaisseur du contour à appliquer à une forme SVG.</p> -<p class="note"><strong>Note:</strong> <code>stroke-width</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- Épaisseur par défaut: 1 --> @@ -32,8 +33,7 @@ translation_of: Web/SVG/Attribute/stroke-width stroke-width="2%" /> </svg></pre> -<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 150)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -54,7 +54,9 @@ translation_of: Web/SVG/Attribute/stroke-width </tbody> </table> -<p class="note"><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 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> <p>Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée.</p> diff --git a/files/fr/web/svg/attribute/stroke/index.html b/files/fr/web/svg/attribute/stroke/index.html index d9e92d5a03..01e3b44595 100644 --- a/files/fr/web/svg/attribute/stroke/index.html +++ b/files/fr/web/svg/attribute/stroke/index.html @@ -10,14 +10,15 @@ translation_of: Web/SVG/Attribute/stroke <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> -<p class="note"><strong>Note:</strong> <code>stroke</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p> +<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> <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> @@ -37,8 +38,7 @@ translation_of: Web/SVG/Attribute/stroke </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> <h2 id="Notes_d'usage">Notes d'usage</h2> @@ -74,7 +74,7 @@ translation_of: Web/SVG/Attribute/stroke <td>{{SpecName("SVG2", "painting.html#StrokeProperty", "stroke")}}</td> <td>{{Spec2("SVG2")}}</td> <td>Définition pour les formes et le texte.<br> - Ajoute <code style="white-space: nowrap;">context-fill</code> et <code style="white-space: nowrap;">context-stroke</code>.</td> + Ajoute <code>context-fill</code> et <code>context-stroke</code>.</td> </tr> <tr> <td>{{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}}</td> @@ -84,8 +84,10 @@ translation_of: Web/SVG/Attribute/stroke </tbody> </table> -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> +<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("svg.attributes.presentation.stroke")}}</p> -<p class="note"><strong>Note:</strong> Pour plus d'informations sur les valeurs de <code style="white-space: nowrap;">context-stroke</code> (et <code style="white-space: nowrap;">context-fill</code>) à partir de documents HTML, voir la documentation pour la propriété non-standard <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span>.</p> +<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> diff --git a/files/fr/web/svg/attribute/style/index.html b/files/fr/web/svg/attribute/style/index.html index ea98e02782..658ac2d4a0 100644 --- a/files/fr/web/svg/attribute/style/index.html +++ b/files/fr/web/svg/attribute/style/index.html @@ -9,7 +9,7 @@ translation_of: Web/SVG/Attribute/style --- <p>{{SVGRef}}</p> -<p><span class="seoSummary">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>.</span></p> +<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> <h2 id="Context_d'utilisation">Context d'utilisation</h2> @@ -29,16 +29,17 @@ translation_of: Web/SVG/Attribute/style </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2ème Edition)</a></td> + <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>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>.</dd> - <dd> - <p class="note"><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> + <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> diff --git a/files/fr/web/svg/attribute/styling/index.html b/files/fr/web/svg/attribute/styling/index.html index 488332eb22..60021207eb 100644 --- a/files/fr/web/svg/attribute/styling/index.html +++ b/files/fr/web/svg/attribute/styling/index.html @@ -5,20 +5,18 @@ 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> -<div class="index"> <ul> - <li><a href="#attr-class"><code>class</code></a></li> - <li><a href="#attr-style"><code>style</code></a></li> + <li><code>class</code></li> + <li><code>style</code></li> </ul> -</div> <h2 id="Attributs">Attributs</h2> <dl> - <dt id="attr-class">{{SVGAttr('class')}}</dt> + <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 id="attr-style">{{SVGAttr('style')}}</dt> + <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> diff --git a/files/fr/web/svg/attribute/text-anchor/index.html b/files/fr/web/svg/attribute/text-anchor/index.html index 8f094d8e97..449c87238f 100644 --- a/files/fr/web/svg/attribute/text-anchor/index.html +++ b/files/fr/web/svg/attribute/text-anchor/index.html @@ -13,9 +13,8 @@ browser-compat: svg.attributes.presentation.text-anchor <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> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>En tant qu'attribut de présentation, <code>text-anchor</code> peut être utilisé comme une propriété CSS.</p> +<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> <p>Cet attribut peut être utilisé pour les éléments SVG suivants :</p> @@ -28,12 +27,12 @@ browser-compat: svg.attributes.presentation.text-anchor <li><a href="/fr/docs/Web/SVG/Element/tspan"><code><tspan></code></a></li> </ul> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html, body, svg { +<h2>Exemple</h2> + +<pre class="brush: css hidden">html, body, svg { height: 100%; }</pre> -</div> + <pre class="brush: html"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- Matérialisation des ancrages --> @@ -56,8 +55,7 @@ browser-compat: svg.attributes.presentation.text-anchor ]]></style> </svg></pre> -<p>{{EmbedLiveSample("topExample", "120", "120")}}</p> -</div> +<p>{{EmbedLiveSample("exemple", "120", "120")}}</p> <h2 id="usage_notes">Notes d'utilisation</h2> diff --git a/files/fr/web/svg/attribute/transform/index.html b/files/fr/web/svg/attribute/transform/index.html index e8b3843ed2..9ed4c9cc25 100644 --- a/files/fr/web/svg/attribute/transform/index.html +++ b/files/fr/web/svg/attribute/transform/index.html @@ -10,10 +10,9 @@ translation_of: Web/SVG/Attribute/transform <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> -<div id="topExample"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <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" @@ -28,10 +27,11 @@ translation_of: Web/SVG/Attribute/transform </svg> </pre> -<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p> -<p class="note"><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 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> <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> @@ -58,7 +58,9 @@ translation_of: Web/SVG/Attribute/transform <p>Les fonctions de transformation suivantes peuvent être utilisées par l'attribut <code>transform</code>.</p> -<p class="warning"><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 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> <h3 id="matrix"><code>matrix()</code></h3> @@ -66,10 +68,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <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" /> @@ -110,10 +110,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_2">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- Pas de translation --> @@ -140,10 +138,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_3">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <pre class="brush: html"><svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- uniform scale --> @@ -170,10 +166,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_4">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <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" /> @@ -195,10 +189,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_5">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <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" /> @@ -215,10 +207,8 @@ translation_of: Web/SVG/Attribute/transform <h4 id="Exemples_6">Exemples</h4> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% } +<pre class="brush: css hidden">html,body,svg { height:100% } </pre> -</div> <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" /> diff --git a/files/fr/web/svg/attribute/viewbox/index.html b/files/fr/web/svg/attribute/viewbox/index.html index c180c650ce..d8133f9c84 100644 --- a/files/fr/web/svg/attribute/viewbox/index.html +++ b/files/fr/web/svg/attribute/viewbox/index.html @@ -32,7 +32,7 @@ translation_of: Web/SVG/Attribute/viewBox </tr> <tr> <th scope="row">Document de norme</th> - <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td> + <td><a href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody> </table> diff --git a/files/fr/web/svg/attribute/width/index.html b/files/fr/web/svg/attribute/width/index.html index 6ac999e8fe..bc98142691 100644 --- a/files/fr/web/svg/attribute/width/index.html +++ b/files/fr/web/svg/attribute/width/index.html @@ -3,7 +3,7 @@ title: Width slug: Web/SVG/Attribute/width translation_of: Web/SVG/Attribute/width --- -<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>« <a href="/fr/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> <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> @@ -19,7 +19,7 @@ translation_of: Web/SVG/Attribute/width </tr> <tr> <th scope="row">Valeur</th> - <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> + <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> @@ -27,14 +27,14 @@ translation_of: Web/SVG/Attribute/width </tr> <tr> <th scope="row">Document normatif</th> - <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> - <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td> + <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> @@ -43,20 +43,20 @@ translation_of: Web/SVG/Attribute/width <h2 id="Exemple">Exemple</h2> -<pre class="brush: xml line-numbers language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> - <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> - <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> <h2 id="Eléments">Eléments</h2> <p>Les éléments suivants peuvent utiliser l'attribut <code>width</code> :</p> <ul> - <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <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> diff --git a/files/fr/web/svg/attribute/x/index.html b/files/fr/web/svg/attribute/x/index.html index 86786e50e3..b34d43d08c 100644 --- a/files/fr/web/svg/attribute/x/index.html +++ b/files/fr/web/svg/attribute/x/index.html @@ -32,22 +32,22 @@ translation_of: Web/SVG/Attribute/x </tr> <tr> <th scope="row">Spécifications</th> - <td><a class="external" href="https://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (seconde édition) : élément <code>altGlyph</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (seconde édition) : élément <code>cursor</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (seconde édition) : élément <code>fePointLight</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (seconde édition) : élément <code>feSpotLight</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (seconde édition) : élément <code>filter</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>foreignObject</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (seconde édition) : élément <code>glyphRef</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (seconde édition) : élément <code>image</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (seconde édition) : élément <code>pattern</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>rect</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (seconde édition) : élément <code>svg</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (seconde édition) : élément <code>text</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (seconde édition) : élément <code>use</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (seconde édition) : primitive de filtre</a><br> - <a class="external" href="https://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (seconde édition) : élément <code>mask</code></a><br> - <a class="external" href="https://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (seconde édition) : élément <code>tspan</code></a></td> + <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> diff --git a/files/fr/web/svg/compatibility_sources/index.html b/files/fr/web/svg/compatibility_sources/index.html index b14495faa2..83b37b09d7 100644 --- a/files/fr/web/svg/compatibility_sources/index.html +++ b/files/fr/web/svg/compatibility_sources/index.html @@ -10,11 +10,11 @@ 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> <ul> - <li><a href="/En/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 class="external" 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 class="external" 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 class="external" href="http://www.opera.com/docs/specs/opera8/">http://www.opera.com/docs/specs/opera8/</a> pour Opera 8</li> - <li><a class="external" 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 class="external" 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 class="external" href="http://en.wikipedia.org/wiki/SVG">Wikipedia</a> pour des conseils basiques, non normatif</li> + <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> diff --git a/files/fr/web/svg/element/a/index.html b/files/fr/web/svg/element/a/index.html index dcd2251bff..a3d70a3edd 100644 --- a/files/fr/web/svg/element/a/index.html +++ b/files/fr/web/svg/element/a/index.html @@ -15,19 +15,18 @@ translation_of: Web/SVG/Element/a <h2 id="Exemple">Exemple</h2> -<div class="hidden"> -<pre class="brush: css">@namespace svgns url(http://www.w3.org/2000/svg); +<pre class="brush: css hidden">@namespace svgns url(http://www.w3.org/2000/svg); html,body,svg { height:100% }</pre> -</div> + <pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Un lien autour d'une forme --> - <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"> + <a href="/docs/Web/SVG/Element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- Un lien autour d'un texte --> - <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"> + <a href="/docs/Web/SVG/Element/circle"> <text x="50" y="90" text-anchor="middle"> &lt;circle&gt; </text> @@ -55,7 +54,7 @@ svgns|a:hover, svgns|a:active { <p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> <div class="warning"> -<p>Étant donné que cet élément partage son nom de balise avec l'<a href="/fr/docs/Web/HTML/Element/a">élément HTML <code><a></code></a>, la sélection de "<code>a</code>" avec CSS ou <a href="/fr/docs/Web/API/Document/querySelector"><code>querySelector</code></a> peut s'appliquer au mauvais type d'élément. La <a href="/fr/docs/Web/CSS/@namespace">règle <code>@namespace</code></a> permet de faire la distinction entre les deux.</p> + <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> @@ -96,7 +95,7 @@ svgns|a:hover, svgns|a:active { <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a href="/en-US/docs/DOM/SVGAElement" title="DOM/SVGAElement">SVGAElement</a></code>.</p> +<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> diff --git a/files/fr/web/svg/element/altglyphdef/index.html b/files/fr/web/svg/element/altglyphdef/index.html index 26f1616c86..a326de0562 100644 --- a/files/fr/web/svg/element/altglyphdef/index.html +++ b/files/fr/web/svg/element/altglyphdef/index.html @@ -22,7 +22,7 @@ translation_of: Web/SVG/Element/altGlyphDef <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> + <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> </ul> <h3 id="Attributs_spécifiques">Attributs spécifiques</h3> @@ -31,7 +31,7 @@ translation_of: Web/SVG/Element/altGlyphDef <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a class="new" href="/fr/docs/Web/API/SVGAltGlyphDefElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphDefElement</a></code>.</p> +<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGAltGlyphDefElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphDefElement</a></code>.</p> <h2 id="Voir_également">Voir également</h2> diff --git a/files/fr/web/svg/element/altglyphitem/index.html b/files/fr/web/svg/element/altglyphitem/index.html index ddd7465200..2302fb57fa 100644 --- a/files/fr/web/svg/element/altglyphitem/index.html +++ b/files/fr/web/svg/element/altglyphitem/index.html @@ -22,7 +22,7 @@ translation_of: Web/SVG/Element/altGlyphItem <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> + <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> </ul> <h3 id="Attributs_spécifiques">Attributs spécifiques</h3> @@ -31,7 +31,7 @@ translation_of: Web/SVG/Element/altGlyphItem <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a class="new" href="/fr/docs/Web/API/SVGAltGlyphItemElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphItemElement</a></code>.</p> +<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGAltGlyphItemElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphItemElement</a></code>.</p> <p> </p> diff --git a/files/fr/web/svg/element/animate/index.html b/files/fr/web/svg/element/animate/index.html index fdd49d7f6e..49b8564999 100644 --- a/files/fr/web/svg/element/animate/index.html +++ b/files/fr/web/svg/element/animate/index.html @@ -44,7 +44,7 @@ translation_of: Web/SVG/Element/animate <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a href="/en-US/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code>.</p> +<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code>.</p> <h2 id="Exemple">Exemple</h2> @@ -74,7 +74,7 @@ translation_of: Web/SVG/Element/animate <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="/en-US/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="/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> diff --git a/files/fr/web/svg/element/animatecolor/index.html b/files/fr/web/svg/element/animatecolor/index.html index 9b274cfadc..dd2d640ab4 100644 --- a/files/fr/web/svg/element/animatecolor/index.html +++ b/files/fr/web/svg/element/animatecolor/index.html @@ -10,7 +10,7 @@ translation_of: Web/SVG/Element/animateColor <div>{{SVGRef}}{{deprecated_header}}</div> <div class="warning"> -<p>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> + <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> <p>L'élément <strong><code><animateColor></code></strong> spécifie une transformation de couleur à travers le temps.</p> @@ -24,14 +24,14 @@ translation_of: Web/SVG/Element/animateColor <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Attributs à traitement conditionnel</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationEvent">Attributs d'événements d'animation</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#XLink">Attributs XLink</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#AnimationAttributeTarget">Attributs de cible d'attribut d'animation</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Attributs d'animation de timing</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Attributs d'animation de valeurs</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Attributs d'animation d'ajout</a> »</li> + <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> diff --git a/files/fr/web/svg/element/animatemotion/index.html b/files/fr/web/svg/element/animatemotion/index.html index 059aab46e5..d5bc8130ca 100644 --- a/files/fr/web/svg/element/animatemotion/index.html +++ b/files/fr/web/svg/element/animatemotion/index.html @@ -20,13 +20,13 @@ translation_of: Web/SVG/Element/animateMotion <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Attributs à traitement conditionnel</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationEvent">Attributs d'événements d'animation</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#XLink">Attributs XLink</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Attributs d'animation de timing</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Attributs d'animation de valeurs</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Attributs d'animation d'ajout</a> »</li> + <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> diff --git a/files/fr/web/svg/element/animatetransform/index.html b/files/fr/web/svg/element/animatetransform/index.html index ba0230f67a..b572d797e3 100644 --- a/files/fr/web/svg/element/animatetransform/index.html +++ b/files/fr/web/svg/element/animatetransform/index.html @@ -40,14 +40,14 @@ translation_of: Web/SVG/Element/animateTransform <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing"><span class="short_text" id="result_box" lang="fr"><span class="hps">Attributs de traitement conditionnel</span></span></a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Attributs de base</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">Attributs de l'évènement d'animation</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Attributs Xlink</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="en/SVG/Attribute#AnimationAttributeTarget">Attributs de ciblage d'animation</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">Attributs de chronométrage d'animation</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">Attributs de valeur d'animation</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">Attributs d'ajout d'animations</a> »</li> + <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> @@ -62,7 +62,7 @@ translation_of: Web/SVG/Element/animateTransform <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a href="/en-US/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code>.</p> +<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> diff --git a/files/fr/web/svg/element/circle/index.html b/files/fr/web/svg/element/circle/index.html index 8cc64ab6f0..6fba0b5e8d 100644 --- a/files/fr/web/svg/element/circle/index.html +++ b/files/fr/web/svg/element/circle/index.html @@ -17,9 +17,7 @@ translation_of: Web/SVG/Element/circle <h2 id="Exemple">Exemple</h2> -<div class="hidden"> -<pre class="brush: css"> html,body,svg { height:100% } </pre> -</div> +<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"> diff --git a/files/fr/web/svg/element/clippath/index.html b/files/fr/web/svg/element/clippath/index.html index 60707ba146..8ff3ec5a54 100644 --- a/files/fr/web/svg/element/clippath/index.html +++ b/files/fr/web/svg/element/clippath/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Element/clipPath <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> -<div id="Example"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html"><svg viewBox="0 0 100 100"> <clipPath id="myClip"> @@ -42,8 +41,7 @@ translation_of: Web/SVG/Element/clipPath animation: openYourHeart 15s infinite; }</pre> -<p>{{EmbedLiveSample('Example', 100, 100)}}</p> -</div> +<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> diff --git a/files/fr/web/svg/element/defs/index.html b/files/fr/web/svg/element/defs/index.html index 2531f7524a..6072fe6564 100644 --- a/files/fr/web/svg/element/defs/index.html +++ b/files/fr/web/svg/element/defs/index.html @@ -36,10 +36,10 @@ translation_of: Web/SVG/Element/defs <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <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> @@ -52,7 +52,7 @@ translation_of: Web/SVG/Element/defs <h2 id="Interface_avec_DOM">Interface avec DOM</h2> -<p>Cet élément est implémenté par l'interface <code><a href="/en-US/docs/Web/API/SVGDefsElement">SVGDefsElement</a></code>.</p> +<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> diff --git a/files/fr/web/svg/element/desc/index.html b/files/fr/web/svg/element/desc/index.html index 02cb205cdd..8ef116c3d2 100644 --- a/files/fr/web/svg/element/desc/index.html +++ b/files/fr/web/svg/element/desc/index.html @@ -19,7 +19,7 @@ translation_of: Web/SVG/Element/desc <h2 id="Attributs">Attributs</h2> -<h3 id="Attributs_globaux" style="line-height: 24px; font-size: 1.71428571428571rem;">Attributs globaux</h3> +<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> @@ -27,11 +27,11 @@ translation_of: Web/SVG/Element/desc <li>{{ SVGAttr("style") }}</li> </ul> -<h3 id="Attributs_spécifiques" style="line-height: 24px; font-size: 1.71428571428571rem;">Attributs spécifiques</h3> +<h3 id="Attributs_spécifiques">Attributs spécifiques</h3> <p><em>(Aucun)</em></p> -<h2 id="Interface_DOM" style="line-height: 30px; font-size: 2.14285714285714rem;">Interface DOM</h2> +<h2 id="Interface_DOM">Interface DOM</h2> <p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGDescElement" title="en/DOM/SVGDescElement">SVGDescElement</a></code>.</p> diff --git a/files/fr/web/svg/element/ellipse/index.html b/files/fr/web/svg/element/ellipse/index.html index 4ca81837ec..450766fb25 100644 --- a/files/fr/web/svg/element/ellipse/index.html +++ b/files/fr/web/svg/element/ellipse/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Element/ellipse <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="notranslate"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> +<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> @@ -94,7 +94,7 @@ translation_of: Web/SVG/Element/ellipse <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGEllipseElement" title="en/DOM/SVGEllipseElement">SVGEllipseElement</a></code>.</p> +<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> diff --git a/files/fr/web/svg/element/fecomposite/index.html b/files/fr/web/svg/element/fecomposite/index.html index 903bc3d238..096b79e038 100644 --- a/files/fr/web/svg/element/fecomposite/index.html +++ b/files/fr/web/svg/element/fecomposite/index.html @@ -33,7 +33,7 @@ translation_of: Web/SVG/Element/feComposite <ul> <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de base</a></li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Attributs de présentation</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> diff --git a/files/fr/web/svg/element/feconvolvematrix/index.html b/files/fr/web/svg/element/feconvolvematrix/index.html index e2621f7c59..21e05a3104 100644 --- a/files/fr/web/svg/element/feconvolvematrix/index.html +++ b/files/fr/web/svg/element/feconvolvematrix/index.html @@ -13,7 +13,7 @@ translation_of: Web/SVG/Element/feConvolveMatrix <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> -<p id="feConvolveMatrixElementFormula">COLOR<sub>X,Y</sub> = ( <br> +<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> @@ -50,7 +50,7 @@ translation_of: Web/SVG/Element/feConvolveMatrix 7 8 9 </pre> -<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><span class="attr-name">divisor</span></code>, <code><span class="attr-name">targetX</span></code> et <code><span class="attr-name">targetY</span></code>, alors la valeur de couleur résultante sera :</p> +<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> <pre>(9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + diff --git a/files/fr/web/svg/element/fegaussianblur/index.html b/files/fr/web/svg/element/fegaussianblur/index.html index 7dfc80a073..c2a9fdbe70 100644 --- a/files/fr/web/svg/element/fegaussianblur/index.html +++ b/files/fr/web/svg/element/fegaussianblur/index.html @@ -1,10 +1,6 @@ --- title: <feGaussianBlur> slug: Web/SVG/Element/feGaussianBlur -tags: - - Element - - SVG - - SVG Filter translation_of: Web/SVG/Element/feGaussianBlur --- <div>{{SVGRef}}</div> @@ -20,9 +16,9 @@ translation_of: Web/SVG/Element/feGaussianBlur <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><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> @@ -61,9 +57,9 @@ translation_of: Web/SVG/Element/feGaussianBlur <h4 id="Résultat">Résultat</h4> -<p>{{EmbedLiveSample("Exemple_simple",232,124,"/files/4227/feGaussianBlur.png")}}</p> +<p>{{EmbedLiveSample("Exemple_simple",232,124)}}</p> -<h3 id="Exemple_d'ombre_portée">Exemple d'ombre portée</h3> +<h3 id="Exemple_avec_une_ombre_portée">Exemple avec une ombre portée</h3> <h4 id="SVG_2">SVG</h4> @@ -86,7 +82,7 @@ translation_of: Web/SVG/Element/feGaussianBlur <h4 id="Résultat_2">Résultat</h4> -<p>{{EmbedLiveSample("Exemple_d'ombre_portée",125,124,"/files/4229/feGaussianBlur-dropshadow.png")}}</p> +<p>{{EmbedLiveSample("Exemple_avec_une_ombre_portée",125,124)}}</p> <h2 id="Spécifications">Spécifications</h2> @@ -135,5 +131,5 @@ translation_of: Web/SVG/Element/feGaussianBlur <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> + <li><a href="/fr/docs/Web/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li> </ul> diff --git a/files/fr/web/svg/element/fetile/index.html b/files/fr/web/svg/element/fetile/index.html index b66ac9f9bf..f4acbdf1c9 100644 --- a/files/fr/web/svg/element/fetile/index.html +++ b/files/fr/web/svg/element/fetile/index.html @@ -109,5 +109,5 @@ translation_of: Web/SVG/Element/feTile <li>{{SVGElement("feOffset")}}</li> <li>{{SVGElement("feSpecularLighting")}}</li> <li>{{SVGElement("feTurbulence")}}</li> - <li><a href="/en-US/docs/Web/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li> + <li><a href="/fr/docs/Web/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li> </ul> diff --git a/files/fr/web/svg/element/foreignobject/index.html b/files/fr/web/svg/element/foreignobject/index.html index ef67d24b0b..993f08a761 100644 --- a/files/fr/web/svg/element/foreignobject/index.html +++ b/files/fr/web/svg/element/foreignobject/index.html @@ -11,10 +11,9 @@ translation_of: Web/SVG/Element/foreignObject <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> -<div id="Exemple"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <pre class="brush: html; highlight[16,27]"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> @@ -45,8 +44,7 @@ translation_of: Web/SVG/Element/foreignObject </foreignObject> </svg></pre> -<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> -</div> +<p>{{EmbedLiveSample('exemple', 150, '100%')}}</p> <h2 id="Attributs">Attributs</h2> diff --git a/files/fr/web/svg/element/g/index.html b/files/fr/web/svg/element/g/index.html index e5b414e425..87392d44f3 100644 --- a/files/fr/web/svg/element/g/index.html +++ b/files/fr/web/svg/element/g/index.html @@ -14,21 +14,20 @@ translation_of: Web/SVG/Element/g <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> -<div id="Exemple"> -<div class="hidden"> -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html,body,svg </span><span class="punctuation token">{</span> <span class="property token">height</span><span class="punctuation token">:</span><span class="number token">100%</span> <span class="punctuation token">}</span></code></pre> -</div> - -<pre class="brush: html; highlight[4] line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 100 100<span class="punctuation token">"</span></span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="comment token"><!-- Les enfants de g héritent de ses attributs de présentation --></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>g</span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>green<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>25<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>25<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>g</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> -</div> - -<p>{{EmbedLiveSample('Exemple', 100, '100%')}}</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> diff --git a/files/fr/web/svg/element/hkern/index.html b/files/fr/web/svg/element/hkern/index.html index 60f8869c10..72fed53d97 100644 --- a/files/fr/web/svg/element/hkern/index.html +++ b/files/fr/web/svg/element/hkern/index.html @@ -23,7 +23,7 @@ translation_of: Web/SVG/Element/hkern <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> + <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li> </ul> <h3 id="Attributs_spécifiques">Attributs spécifiques</h3> diff --git a/files/fr/web/svg/element/image/index.html b/files/fr/web/svg/element/image/index.html index e81004b2f9..24e230b8a4 100644 --- a/files/fr/web/svg/element/image/index.html +++ b/files/fr/web/svg/element/image/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Element/image <p>Rendu basique d'une image PNG dans un objet SVG :</p> -<pre class="brush: html notranslate"><svg width="100%" height="100%" viewBox="0 0 100 100" +<pre class="brush: 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" /> @@ -33,7 +33,7 @@ translation_of: Web/SVG/Element/image <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="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Attributs de présentation</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> diff --git a/files/fr/web/svg/element/index.html b/files/fr/web/svg/element/index.html index 730456be9f..1b01700206 100644 --- a/files/fr/web/svg/element/index.html +++ b/files/fr/web/svg/element/index.html @@ -11,13 +11,10 @@ tags: - 'l10n:priority' translation_of: Web/SVG/Element --- -<p>« <a href="https://developer.mozilla.org/en-US/docs/SVG">SVG</a> / <a href="/fr/docs/Web/SVG/Attribute">Référence des attributs SVG</a> »</p> - -<p><span class="seoSummary">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.</span></p> +<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> -<div class="index"> <h3 id="A">A</h3> <ul> @@ -170,7 +167,6 @@ translation_of: Web/SVG/Element <ul> <li>{{SVGElement("view")}}</li> </ul> -</div> <h2 id="Les_éléments_SVG_par_catégories">Les éléments SVG par catégories</h2> @@ -248,8 +244,8 @@ translation_of: Web/SVG/Element <h2 id="Élements_obsolètes_et_dépréciés">Élements obsolètes et dépréciés</h2> -<div class="blockIndicator warning"> -<p>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 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> <h3 id="A_2">A</h3> diff --git a/files/fr/web/svg/element/line/index.html b/files/fr/web/svg/element/line/index.html index c80dd0aeed..d5adf5895e 100644 --- a/files/fr/web/svg/element/line/index.html +++ b/files/fr/web/svg/element/line/index.html @@ -18,17 +18,18 @@ translation_of: Web/SVG/Element/line <p>{{svginfo}}</p> -<h2 id="Exemple">Exemple</h2> +<h2>Exemple</h2> -<p>» <a href="https://developer.mozilla.org/files/3254/line.svg" title="https://developer.mozilla.org/files/3254/line.svg">line.svg</a></p> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> -<p>Vous pouvez aussi appliquer une transformation pour avoir le même résultat. En commençant avec une ligne normale,</p> +<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" /> -<p>» <a href="https://developer.mozilla.org/files/3345/line1.svg" title="https://developer.mozilla.org/files/3345/line1.svg">line1.svg</a></p> + <!-- Si on n'indique pas stroke, la ligne de couleur + ne sera pas visible --> +</svg></pre> -<p>ajoutez des options de transformation pour changer la direction de la ligne :</p> - -<p>» <a href="https://developer.mozilla.org/files/3346/line2.svg" title="https://developer.mozilla.org/files/3346/line2.svg">line2.svg</a></p> +<p>{{EmbedLiveSample('exemple', 100, 100)}}</p> <h2 id="Attributs">Attributs</h2> diff --git a/files/fr/web/svg/element/lineargradient/index.html b/files/fr/web/svg/element/lineargradient/index.html index 11fc7a2c6f..8dfa75792d 100644 --- a/files/fr/web/svg/element/lineargradient/index.html +++ b/files/fr/web/svg/element/lineargradient/index.html @@ -60,7 +60,7 @@ translation_of: Web/SVG/Element/linearGradient x="10" y="10" width="100" height="100"/> </svg></pre> -<p>{{EmbedLiveSample("Exemple", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}</p> +<p>{{EmbedLiveSample("Exemple", 120, 120)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/svg/element/marker/index.html b/files/fr/web/svg/element/marker/index.html index 6c505e5147..6392f684b3 100644 --- a/files/fr/web/svg/element/marker/index.html +++ b/files/fr/web/svg/element/marker/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Element/marker <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> -<div id="Exemple"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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"> <defs> @@ -42,8 +41,7 @@ translation_of: Web/SVG/Element/marker marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg></pre> -<p>{{EmbedLiveSample('Exemple', 200, 200)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', 200, 200)}}</p> <h2 id="Attributs">Attributs</h2> diff --git a/files/fr/web/svg/element/mask/index.html b/files/fr/web/svg/element/mask/index.html index b771cc8724..20f0088b0d 100644 --- a/files/fr/web/svg/element/mask/index.html +++ b/files/fr/web/svg/element/mask/index.html @@ -15,10 +15,9 @@ translation_of: Web/SVG/Element/mask <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> -<div id="Example"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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"> @@ -35,13 +34,12 @@ translation_of: Web/SVG/Element/mask <circle cx="50" cy="50" r="50" mask="url(#myMask)" /> </svg></pre> -<p>{{EmbedLiveSample('Example', 100, 100)}}</p> -</div> +<p>{{EmbedLiveSample('exemple', 100, 100)}}</p> <h2 id="Attributs">Attributs</h2> <dl> - <dt id="attr-cx">{{SVGAttr("height")}}</dt> + <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> @@ -50,13 +48,13 @@ translation_of: Web/SVG/Element/mask <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 id="attr-cx">{{SVGAttr("x")}}</dt> + <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 id="attr-cx">{{SVGAttr("y")}}</dt> + <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 id="attr-cx">{{SVGAttr("width")}}</dt> + <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> diff --git a/files/fr/web/svg/element/path/index.html b/files/fr/web/svg/element/path/index.html index c2ecfd5096..9727d692be 100644 --- a/files/fr/web/svg/element/path/index.html +++ b/files/fr/web/svg/element/path/index.html @@ -15,7 +15,7 @@ translation_of: Web/SVG/Element/path <h2 id="Exemple">Exemple</h2> -<pre class="brush: xml notranslate"><?xml version="1.0" standalone="no"?> +<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" @@ -50,7 +50,7 @@ translation_of: Web/SVG/Element/path <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGPathElement" title="en/DOM/SVGPathElement">SVGPathElement</a></code>.</p> +<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGPathElement" title="en/DOM/SVGPathElement">SVGPathElement</a></code>.</p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> @@ -65,5 +65,5 @@ translation_of: Web/SVG/Element/path <li>{{ SVGElement("polygon") }}</li> <li>{{ SVGElement("polyline") }}</li> <li>{{ SVGElement("rect") }}</li> - <li><a href="/en/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li> + <li><a href="/fr/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li> </ul> diff --git a/files/fr/web/svg/element/pattern/index.html b/files/fr/web/svg/element/pattern/index.html index 85628e4936..e15af97156 100644 --- a/files/fr/web/svg/element/pattern/index.html +++ b/files/fr/web/svg/element/pattern/index.html @@ -14,10 +14,9 @@ translation_of: Web/SVG/Element/pattern <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> -<div id="example"> -<div class="hidden"> -<pre class="brush: css">html, body, svg { height: 100% }</pre> -</div> +<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> @@ -29,9 +28,8 @@ translation_of: Web/SVG/Element/pattern <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> -</div> -<p>{{EmbedLiveSample('example', 150, '100%')}}</p> +<p>{{EmbedLiveSample('exemple', 150, '100%')}}</p> <h2 id="attributes">Attributs</h2> @@ -43,41 +41,40 @@ translation_of: Web/SVG/Element/pattern <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>Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}.<br> - <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 class="note"><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> + <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>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.<br> - <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></dd> + <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>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>.<br> - <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></dd> + <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>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.<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>Animable</em>: <strong>yes</strong></small></dd> + <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>Cet attribut définit les limites de la fenêtre de rendu du SVG pour le fragment du motif.<br> - <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></dd> + <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>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></dd> + <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>Cet attribut détermine le déplacement en coordonnée x 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>Animatable</em>: <strong>yes</strong></small></dd> + <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 class="note"><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> + <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>Cet attribut détermine le déplacement en coordonnée y 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></dd> - <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> +<h3 id="global_attributes">Attributs globaux</h3> - <a href="/fr/docs/Web/SVG/Attribute/Core">Attributs principaux</a></dt> +<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> diff --git a/files/fr/web/svg/element/polygon/index.html b/files/fr/web/svg/element/polygon/index.html index e4981d0eb3..e410f82a01 100644 --- a/files/fr/web/svg/element/polygon/index.html +++ b/files/fr/web/svg/element/polygon/index.html @@ -13,10 +13,9 @@ translation_of: Web/SVG/Element/polygon <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> -<div id="example"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<h2>Exemple</h2> + +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> <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 --> @@ -25,9 +24,8 @@ translation_of: Web/SVG/Element/polygon <!-- 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> -</div> -<div>{{EmbedLiveSample('example', '100', '100')}}</div> +<p>{{EmbedLiveSample('exemple', '100', '100')}}</p> <h2 id="Attributs">Attributs</h2> diff --git a/files/fr/web/svg/element/radialgradient/index.html b/files/fr/web/svg/element/radialgradient/index.html index 41fd9ec42e..052f193b4a 100644 --- a/files/fr/web/svg/element/radialgradient/index.html +++ b/files/fr/web/svg/element/radialgradient/index.html @@ -20,9 +20,9 @@ translation_of: Web/SVG/Element/radialGradient <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Attributs_de_pr%C3%A9sentation">Références des attributs SVG</a> »</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs Xlink</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#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> diff --git a/files/fr/web/svg/element/rect/index.html b/files/fr/web/svg/element/rect/index.html index 1ccebc8c09..aa18e5a282 100644 --- a/files/fr/web/svg/element/rect/index.html +++ b/files/fr/web/svg/element/rect/index.html @@ -17,9 +17,7 @@ translation_of: Web/SVG/Element/rect <h2 id="Exemple">Exemple</h2> -<div class="hidden"> -<pre class="brush: css"><code>html,body,svg { height:100% }</code></pre> -</div> +<pre class="brush: css hidden"><code>html,body,svg { height:100% }</code></pre> <pre class="brush: html"><code><svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- Simple rect element --> @@ -59,7 +57,7 @@ translation_of: Web/SVG/Element/rect <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> .</p> +<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> .</p> <h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> diff --git a/files/fr/web/svg/element/stop/index.html b/files/fr/web/svg/element/stop/index.html index f77d1b7f06..d5e19bfcff 100644 --- a/files/fr/web/svg/element/stop/index.html +++ b/files/fr/web/svg/element/stop/index.html @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/stop --- <div>{{SVGRef}}</div> -<p>L'élément <a href="/en-US/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> +<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> <h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> @@ -16,8 +16,8 @@ translation_of: Web/SVG/Element/stop <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Attributs de base</a></li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Attributs de présentation</a></li> + <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> @@ -60,7 +60,7 @@ translation_of: Web/SVG/Element/stop <h3 id="Résultat">Résultat</h3> -<p>{{EmbedLiveSample("Example", 160, 95)}}</p> +<p>{{EmbedLiveSample("Exemple", 160, 95)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/svg/element/style/index.html b/files/fr/web/svg/element/style/index.html index d7daa868fd..11454c2331 100644 --- a/files/fr/web/svg/element/style/index.html +++ b/files/fr/web/svg/element/style/index.html @@ -11,7 +11,7 @@ translation_of: Web/SVG/Element/style <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> -<h2 id="Contexte_d'utilisation" lang="fr">Contexte d'utilisation</h2> +<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2> <p>{{svginfo}}</p> @@ -33,7 +33,7 @@ translation_of: Web/SVG/Element/style </svg> </pre> -<p><span class="short_text" id="result_box" lang="fr"><span class="hps">Résultat en direct</span><span>:</span></span></p> +<p>Résultat en direct:</p> <p>{{EmbedLiveSample("Exemple",150,165)}}</p> @@ -42,7 +42,7 @@ translation_of: Web/SVG/Element/style <h3 id="Attributs_Globaux">Attributs Globaux</h3> <ul> - <li><a href="/en-US/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/fr/SVG/Attribute#Core">Core attributes</a> »</li> </ul> <h3 id="Attributs_Specifiques">Attributs Specifiques</h3> @@ -55,7 +55,7 @@ translation_of: Web/SVG/Element/style <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implemente l'interface <code><a href="/en-US/DOM/SVGStyleElement">SVGStyleElement</a></code>.</p> +<p>Cet élément implemente l'interface <code><a href="/fr/DOM/SVGStyleElement">SVGStyleElement</a></code>.</p> <h2 id="Specifications">Specifications</h2> @@ -88,5 +88,5 @@ translation_of: Web/SVG/Element/style <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/HTML/Element/style"><style> element in HTML</a></li> + <li><a href="/fr/HTML/Element/style"><style> element in HTML</a></li> </ul> diff --git a/files/fr/web/svg/element/svg/index.html b/files/fr/web/svg/element/svg/index.html index 7146137754..f2f257c15a 100644 --- a/files/fr/web/svg/element/svg/index.html +++ b/files/fr/web/svg/element/svg/index.html @@ -5,7 +5,7 @@ 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="/en-US/docs/">viewport</a> et système de coordonnée.</p> +<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> @@ -48,11 +48,11 @@ translation_of: Web/SVG/Element/svg <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#DocumentEvent">Document event attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <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> @@ -75,7 +75,7 @@ translation_of: Web/SVG/Element/svg <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cette élément implémente l'interface <code><a href="/en-US/docs/Web/API/SVGSVGElement">SVGSVGElement</a></code>.</p> +<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> diff --git a/files/fr/web/svg/element/switch/index.html b/files/fr/web/svg/element/switch/index.html index 4f93ae7f8a..60504ccf7a 100644 --- a/files/fr/web/svg/element/switch/index.html +++ b/files/fr/web/svg/element/switch/index.html @@ -34,7 +34,7 @@ translation_of: Web/SVG/Element/switch <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a href="/en-US/docs/DOM/SVGSwitchElement" title="en/DOM/SVGSwitchElement">SVGSwitchElement</a></code>.</p> +<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> diff --git a/files/fr/web/svg/element/symbol/index.html b/files/fr/web/svg/element/symbol/index.html index 3c652df49b..66137a0100 100644 --- a/files/fr/web/svg/element/symbol/index.html +++ b/files/fr/web/svg/element/symbol/index.html @@ -12,10 +12,9 @@ translation_of: Web/SVG/Element/symbol <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> -<div id="Exemple"> -<div class="hidden"> -<pre class="brush: css">html,body,svg { height:100% }</pre> -</div> +<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"> @@ -36,7 +35,6 @@ translation_of: Web/SVG/Element/symbol </svg></pre> <p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> -</div> <h2 id="Attributs">Attributs</h2> @@ -86,7 +84,9 @@ translation_of: Web/SVG/Element/symbol <p>{{svginfo}}</p> -<p class="note"><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 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> diff --git a/files/fr/web/svg/element/text/index.html b/files/fr/web/svg/element/text/index.html index a7658a4f87..bc1e735223 100644 --- a/files/fr/web/svg/element/text/index.html +++ b/files/fr/web/svg/element/text/index.html @@ -71,10 +71,10 @@ translation_of: Web/SVG/Element/text <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <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> @@ -96,7 +96,7 @@ translation_of: Web/SVG/Element/text <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGTextElement" title="en/DOM/SVGTextElement">SVGTextElement</a></code>.</p> +<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGTextElement" title="en/DOM/SVGTextElement">SVGTextElement</a></code>.</p> <h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> diff --git a/files/fr/web/svg/element/title/index.html b/files/fr/web/svg/element/title/index.html index 90b1a44836..e2b24d2990 100644 --- a/files/fr/web/svg/element/title/index.html +++ b/files/fr/web/svg/element/title/index.html @@ -10,7 +10,7 @@ translation_of: Web/SVG/Element/title --- <div>{{SVGRef}}</div> -<p>Tout élément graphique ou conteneur dans un dessin SVG peut définir un titre en utilisant un élément <strong><code style="font-style: normal;"><title></code></strong>, ce titre ne peut contenir que du texte.</p> +<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> <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> diff --git a/files/fr/web/svg/element/tspan/index.html b/files/fr/web/svg/element/tspan/index.html index 8221e0cc27..0c80f3a94e 100644 --- a/files/fr/web/svg/element/tspan/index.html +++ b/files/fr/web/svg/element/tspan/index.html @@ -16,19 +16,34 @@ translation_of: Web/SVG/Element/tspan <p>{{svginfo}}</p> -<h2 id="Exemple">Exemple</h2> +<h2>Exemple</h2> -<p>» <a href="https://developer.mozilla.org/files/3338/tspan.svg">tspan.svg</a></p> +<pre class="brush: css hidden">html,body,svg { height:100% }</pre> + +<pre class="brush: html; highlight[9]"><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> + + <text x="10" y="30" class="small"> + Vous êtes + <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="https://developer.mozilla.org/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a> »</li> - <li><a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Attributs de base</a> »</li> - <li><a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Attributs d'évènements graphiques</a> »</li> - <li><a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Attributs de présentation</a> »</li> + <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> @@ -48,7 +63,7 @@ translation_of: Web/SVG/Element/tspan <h2 id="Interface_DOM">Interface DOM</h2> -<p>Cet élément implémente l'interface <code><a href="/en-US/docs/Web/API/SVGTSpanElement">SVGTSpanElement</a></code>.</p> +<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> diff --git a/files/fr/web/svg/element/use/index.html b/files/fr/web/svg/element/use/index.html index 7320a50611..fc4572cb94 100644 --- a/files/fr/web/svg/element/use/index.html +++ b/files/fr/web/svg/element/use/index.html @@ -5,14 +5,14 @@ translation_of: Web/SVG/Element/use --- <div>{{SVGRef}}</div> -<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="/en-US/docs/Web/HTML/Element/template">éléments de gabarit</a> grâce à HTML5.<br> +<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="/en-US/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="/en-US/docs/Web/CSS/inheritance" title="en/CSS/inheritance">héritages CSS</a>.</p> + 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> <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> <div class="warning"> -<p>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> + <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> <h2 id="Contexte_d'usage">Contexte d'usage</h2> @@ -24,11 +24,11 @@ translation_of: Web/SVG/Element/use <h3 id="Attributs_globaux">Attributs globaux</h3> <ul> - <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#XLink_attributes" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li> + <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> @@ -73,7 +73,7 @@ translation_of: Web/SVG/Element/use </svg> </pre> -<p>{{EmbedLiveSample("Example", 80, 80)}}</p> +<p>{{EmbedLiveSample("Exemple", 80, 80)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/svg/index.html b/files/fr/web/svg/index.html index e3664c1283..db201ffa0a 100644 --- a/files/fr/web/svg/index.html +++ b/files/fr/web/svg/index.html @@ -16,44 +16,37 @@ translation_of: Web/SVG --- <div>{{SVGRef}}</div> -<div class="callout-box"><strong><a href="/fr/SVG/Tutoriel" title="fr/SVG/Tutoriel">Premiers pas</a></strong><br> -Ce tutoriel vous aidera à débuter en SVG.</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><span class="seoSummary"><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 class="external" 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 class="external" 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 class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</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 class="Documentation" id="Documentation">Documentation</h2> +<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> -</dl> - -<dl> <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> -</dl> - -<dl> <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 class="external" href="http://svground.fr/">SVG documentation tierce</a></dt> + <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 class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> (en anglais)</dt> + <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="https://developer.mozilla.org/en-US/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="/en/Mozilla_SVG_Project" title="en/Mozilla_SVG_Project">en:Mozilla SVG Project</a>).</dd> - <dt><a class="external" href="http://www.mozilla.org/projects/svg/faq.html">Mozilla SVG Project FAQ</a></dt> + <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> + <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> @@ -61,21 +54,21 @@ Ce tutoriel vous aidera à débuter en SVG.</div> </dd> </dl> -<h2 class="Community" id="Communauté">Communauté</h2> +<h2 id="Communauté">Communauté</h2> <ul> <li>Voir les forums Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> </ul> -<h2 class="Tools" id="Outils">Outils</h2> +<h2 id="Outils">Outils</h2> <ul> - <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li> - <li><a class="external" 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="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>, <a href="https://developer.mozilla.org/en-US/docs/DOM">DOM</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas">Canvas</a></li> + <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 class="Related_Topics" id="Exemples">Exemples</h2> +<h2 id="Exemples">Exemples</h2> <ul> <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galerie d'art SVG</a></li> @@ -101,13 +94,9 @@ Ce tutoriel vous aidera à débuter en SVG.</div> <h3 id="Cartes_graphiques_jeux_et_expérimentations_3D">Cartes, graphiques, jeux et expérimentations 3D</h3> Bien qu'un peu de SVG puisse contribuer à améliorer le contenu du web, voici quelques exemples d'utilisation poussée du SVG. -<dl> - <dd> - <ul> +<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> - </dd> -</dl> +</ul>
\ No newline at end of file diff --git a/files/fr/web/svg/svg_1.1_support_in_firefox/index.html b/files/fr/web/svg/svg_1.1_support_in_firefox/index.html deleted file mode 100644 index b5286cc777..0000000000 --- a/files/fr/web/svg/svg_1.1_support_in_firefox/index.html +++ /dev/null @@ -1,775 +0,0 @@ ---- -title: SVG dans Firefox -slug: Web/SVG/SVG_1.1_Support_in_Firefox -tags: - - SVG -translation_of: Web/SVG/SVG_1.1_Support_in_Firefox -original_slug: SVG_dans_Firefox ---- -<p>Vous trouverez des exemples simples de syntaxe et d'utilisation de SVG sur la page <a class="external" href="http://www.w3.org/Graphics/SVG/Test/20061213/">W3C SVG test suite</a>.</p> - -<h2 id="Statut_d.27impl.C3.A9mentation_des_.C3.A9l.C3.A9ments" name="Statut_d.27impl.C3.A9mentation_des_.C3.A9l.C3.A9ments">Statut d'implémentation des éléments</h2> - -<ul> - <li>SVGPathSegList Interface - <ul> - <li>Liaisons non implémentées : replaceItem()</li> - </ul> - </li> -</ul> - -<table class="standard-table" style="border-collapse: separate;"> - <tbody> - <tr> - <th>Élément</th> - <th>Notes</th> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Structure Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> - <td> - <ul> - <li>Implémenté.</li> - <li>Les attributs DOM <code>currentScale</code> et <code>currentTranslate</code> sont implémentés, mais il n'y a pas d'interface utilisateur pour se déplacer et zoomer.</li> - <li>SVGSVGElement - <ul> - <li>Attributs non implémentés : contentScriptType, contentStyleType, viewport, useCurrentView, currentView</li> - <li>Liaisons non implémentées : pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll,</li> - <li><del>createSVGAngle</del> (implémenté dans Firefox 2), getElementById</li> - </ul> - </li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> - <td> - <ul> - <li>Implémenté.</li> - <li>Uniquement stocké dans le DOM, pas d'interface utilisateur.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> - <td> - <ul> - <li>Implémenté.</li> - <li>Uniquement stocké dans le DOM, pas d'interface utilisateur.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> - <td> - <ul> - <li>Implémenté.</li> - <li>Fonctionne uniquement pour les références internes au document ({{ Bug(269482) }}).</li> - <li>Ne suit pas entièrement les règles de cascade <svg:use> ({{ Bug(265894) }}).</li> - <li>Ne délivre pas les évènements à un arbre SVGElementInstance ({{ Bug(265895) }}).</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> - <td> - <ul> - <li>Implémenté.</li> - <li>SVGPathElement Interface - <ul> - <li>Attributs non implémentés : pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList</li> - <li>Liaisons non implémentées : getTotalLength,</li> - <li><del>getPointAtLength</del> (implémenté dans Firefox 2), getPathSegAtLength</li> - </ul> - </li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Text Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> - <td> - <ul> - <li>Implémenté.</li> - <li>SVGTextElement - <ul> - <li>Attributs non implémentés : rotate, textLength, lengthAdjust</li> - <li>Liaisons non implémentées : getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li> - <li>Liaisons non fonctionnelles au cours de <code>onload</code> : getExtentOfChar</li> - </ul> - </li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> - <td> - <ul> - <li>Implémenté.</li> - <li>SVGTSpanElement - <ul> - <li>Attributs non implémentés : rotate, textLength, lengthAdjust</li> - <li>Liaisons non implémentées : getNumberOfChars,</li> - <li><del>getComputedTextLength</del> (implémenté dans Firefox 2), getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li> - </ul> - </li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td style="background-color: rgb(204,204,204);"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> - <td style="background-color: rgb(204,204,204);"> - <ul> - <li>Cette fonctionnalité se trouvait dans les premiers projets de spec et a été retirée par la suite, elle n'est donc pas implémentée</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> - <td> - <ul> - <li>Implémenté dans Firefox 2.</li> - <li>Attributs non implémentés : method, spacing, textLength, lengthAdjust</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Marker Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Profile Module</a></th> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Gradient Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Pattern Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Clip Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Mask Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Filter Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Cursor Module</a></th> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> - <td> - <ul> - <li>Non implémenté ({{Bug(177193)}}).</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Hyperlinking Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> - <td> - <ul> - <li>Implémenté comme une liaison XBL - l'objet n'est pas du type SVGAElement.</li> - <li>Seuls les attributs <code>xlink:href</code> et <code>xlink:show</code> sont implémentés.</li> - <li>Pour l'attribut <code>target</code>, voir le {{ Bug(300868) }}</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">View Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> - <td> - <ul> - <li>Implémenté dans Gecko 15.0 ({{Bug(512525)}}). {{gecko_minversion_inline("15.0")}}.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Scripting Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Animation Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> - <td> - <ul> - <li>Non implémenté ({{Bug(436296)}}).</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Font Module</a></th> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td> - <td> - <ul> - <li>Non implémenté ({{Bug(119490)}}).</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr style="color: black; background-color: salmon;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> - <td> - <ul> - <li>Non implémenté.</li> - </ul> - </td> - </tr> - <tr> - <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Extensibility Module</a></th> - </tr> - <tr style="color: black; background-color: lightgreen;"> - <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> - <td> - <ul> - <li>Implémenté.</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/fr/web/svg/svg_animation_with_smil/index.html b/files/fr/web/svg/svg_animation_with_smil/index.html index 5f625f6391..d6be59efac 100644 --- a/files/fr/web/svg/svg_animation_with_smil/index.html +++ b/files/fr/web/svg/svg_animation_with_smil/index.html @@ -12,10 +12,10 @@ tags: translation_of: Web/SVG/SVG_animation_with_SMIL --- <div class="warning"> -<p>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> + <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="/en/SVG" title="en/SVG">SVG</a> en utilisant <a class="external" href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL). SMIL permet :</p> +<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> @@ -24,11 +24,11 @@ translation_of: Web/SVG/SVG_animation_with_SMIL <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 <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }}</span>. Vous trouverez ci-dessous des exemples illustrant les quatres différents manières de procéder.</p> +<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="Animer_l'attribut_d'un_élément">Animer l'attribut d'un élément</h2> +<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 <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} dans</span><span class="author-g-shbl2alwmr0wm7ko"> l'élément {{ SVGElement("circle") }}. Les attributs importants pour </span><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} sont :</span></p> +<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> @@ -53,13 +53,13 @@ translation_of: Web/SVG/SVG_animation_with_SMIL </circle> </svg></pre> -<p>{{ EmbedLiveSample("Animer_l'attribut_d'un_élément", '100%', 120) }}</p> +<p>{{ EmbedLiveSample("Animation_pour_un_attribut", '100%', 120) }}</p> -<h2 id="Animer_la_transformation_d'attributs">Animer la transformation d'attributs</h2> +<h2 id="Animer_une_transformation_des_attributs">Animer une transformation d'attributs</h2> -<p><span class="author-g-shbl2alwmr0wm7ko">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> +<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.</span></p> + Dans l'exemple ci dessous, on anime le centre de rotation et l'angle.</p> <pre class="brush: html"><svg width="300" height="100"> <title>SVG SMIL Animate with transform</title> @@ -78,11 +78,11 @@ translation_of: Web/SVG/SVG_animation_with_SMIL </svg> </pre> -<p>{{ EmbedLiveSample("Animer_la_transformation_d'attributs", '100%', 120) }}</p> +<p>{{ EmbedLiveSample("Animer_une_transformation_des_attributs", '100%', 120) }}</p> <h2 id="Animation_suivant_un_tracé_(chemin)">Animation suivant un tracé (chemin)</h2> -<p><span class="author-g-shbl2alwmr0wm7ko">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 </span> <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("path") }}</span><span lang="fr">.</span></p> +<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> <h3 id="Exemple_1_Mouvement_linéaire">Exemple 1: Mouvement linéaire</h3> @@ -123,7 +123,7 @@ translation_of: Web/SVG/SVG_animation_with_SMIL <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en/SVG" title="en/SVG">SVG</a></li> - <li><a class="external" href="http://www.w3.org/TR/SVG/animate.html">SVG Animation Specification</a></li> - <li><a class="external" href="http://www.w3.org/TR/REC-smil">SMIL Specification</a></li> + <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> diff --git a/files/fr/web/svg/svg_as_an_image/index.html b/files/fr/web/svg/svg_as_an_image/index.html index ae5a0d84af..1b07e3b69b 100644 --- a/files/fr/web/svg/svg_as_an_image/index.html +++ b/files/fr/web/svg/svg_as_an_image/index.html @@ -17,7 +17,7 @@ original_slug: Web/SVG/SVG_en_tant_qu_image <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="/en-US/docs/SVG">SVG</a> dans ces contextes:</p> +<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> diff --git a/files/fr/web/svg/tutorial/basic_shapes/index.html b/files/fr/web/svg/tutorial/basic_shapes/index.html index 9df236c6fd..b880c7228a 100644 --- a/files/fr/web/svg/tutorial/basic_shapes/index.html +++ b/files/fr/web/svg/tutorial/basic_shapes/index.html @@ -12,7 +12,7 @@ original_slug: Web/SVG/Tutoriel/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> -<p><img alt="" src="shapes.png" style="float: right;"></p> +<p><img alt="" src="shapes.png"></p> <pre class="brush:xml"> <?xml version="1.0" standalone="no"?> @@ -35,7 +35,9 @@ original_slug: Web/SVG/Tutoriel/Formes_de_base </svg> </pre> -<div class="note"><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.</div> +<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> <h3 id="rectangle">Rectangle</h3> @@ -143,7 +145,7 @@ original_slug: Web/SVG/Tutoriel/Formes_de_base <dl> <dt>points</dt> - <dd>Idem que l'attribut <a><code>points</code></a> de l'élément <code><polyline></code>.</dd> + <dd>Idem que l'attribut <code>points</code> de l'élément <code><polyline></code>.</dd> </dl> <h3 id="path">Chemin</h3> diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.html b/files/fr/web/svg/tutorial/basic_transformations/index.html index 003a88dc05..900c050801 100644 --- a/files/fr/web/svg/tutorial/basic_transformations/index.html +++ b/files/fr/web/svg/tutorial/basic_transformations/index.html @@ -12,20 +12,20 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base <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> -<div id="two_blocks"> +<h2>Exemple</h2> + <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> -</div> -<p>{{ EmbedLiveSample('two_blocks', '30', '10') }}</p> +<p>{{ EmbedLiveSample('exemple', '30', '10') }}</p> -<p><span id="result_box" lang="fr"><span class="hps">Toutes les transformations</span> <span class="hps">suivantes</span> <span class="hps">sont résumées</span> <span class="hps">dans l'attribut</span> <code><span class="hps">transform</span></code> <span class="hps">de l'élément</span><span>.</span> <span class="hps">Les transformations peuvent</span> <span class="hps">être mises les unes à la suite des autres,</span> <span class="hps">tout simplement</span> <span class="hps">en les écrivant toutes dans cet attribut</span><span>,</span> <span class="hps">séparées par des espaces</span><span>.</span></span></p> +<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> -<h2 id="Translation"><span lang="fr"><span>Translation</span></span></h2> +<h2 id="Translation">Translation</h2> <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> @@ -55,9 +55,9 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base <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> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span><span class="hexcode token">#bff</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">transform</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>translate(30,40) rotate(45)<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> +<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> <p>{{ EmbedLiveSample('Transformations_multiples', '40', '50') }}</p> @@ -77,9 +77,9 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base <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> -<p>Voici un <a href="/en-US/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 class="external" href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">la page de recommandation SVG</a>.</p> +<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> -<h2 class="editable" id="Effets_sur_les_systèmes_de_coordonnées"><span>Effets sur les systèmes de coordonnées</span></h2> +<h2 id="Effets_sur_les_systèmes_de_coordonnées">Effets sur les systèmes de coordonnées</h2> <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> @@ -90,13 +90,13 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base </svg> </pre> -<p>Cet exemple aura pour résultat un rectangle de 100 par 100 pixels.<span id="result_box" lang="fr"><span class="hps"> Les</span> <span class="hps">effets</span> <span class="hps">les plus étonnants</span> <span class="hps">apparaissent</span> <span class="hps">lorsque vous utilisez</span> <span class="hps">des attributs tels que</span> <code><span class="hps">userSpaceOnUse</span></code><span>.</span></span></p> +<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> <p>{{ EmbedLiveSample('Effets_sur_les_systèmes_de_coordonnées', '100', '100') }}</p> -<h2 id="Embarquer_du_SVG_dans_SVG"><span lang="fr"><span>Embarquer du SVG dans SVG</span></span></h2> +<h2 id="Embarquer_du_SVG_dans_SVG">Embarquer du SVG dans SVG</h2> -<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. <span id="result_box" lang="fr"><span class="hps">De cette façon,</span> <span class="hps">vous pouvez</span><span class="hps"> très simplement</span><span class="hps"> créer</span> <span class="hps">de nouveaux</span> <span class="hps">systèmes de coordonnées</span> <span class="hps">en utilisant</span> <code><span class="hps">viewBox</span></code><span>, <code>width</code></span> <span class="hps">et <code>height</code></span> <span class="hps">de l'élément</span> <code>svg</code><span>.</span></span></p> +<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> <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"> @@ -111,4 +111,4 @@ original_slug: Web/SVG/Tutoriel/Transformations_de_base <p>{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}</p> -<p><span class="comment">Interwiki Languages Links</span></p> +<p>Interwiki Languages Links</p> diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.html b/files/fr/web/svg/tutorial/clipping_and_masking/index.html index d838dc5feb..868fa20e19 100644 --- a/files/fr/web/svg/tutorial/clipping_and_masking/index.html +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.html @@ -36,7 +36,7 @@ original_slug: Web/SVG/Tutoriel/Découpages_et_masquages <p>{{ EmbedLiveSample('Découper','240','240','/files/3224/clipdemo.png') }}</p> -<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. <span id="result_box" lang="fr"><span>La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.</span></span></p> +<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> <h3 id="Masquage">Masquage</h3> @@ -85,7 +85,7 @@ original_slug: Web/SVG/Tutoriel/Découpages_et_masquages <h2 id="Utilisation_de_techniques_CSS_bien_connues">Utilisation de techniques CSS bien connues</h2> -<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>.<span class="message-body-wrapper"><span class="message-flex-body"> </span></span></p> +<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> <p>{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}</p> diff --git a/files/fr/web/svg/tutorial/fills_and_strokes/index.html b/files/fr/web/svg/tutorial/fills_and_strokes/index.html index 6a17f408d6..b0b44168f7 100644 --- a/files/fr/web/svg/tutorial/fills_and_strokes/index.html +++ b/files/fr/web/svg/tutorial/fills_and_strokes/index.html @@ -11,9 +11,9 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <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> -<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Attributs Fill et Stroke</h2> +<h2 id="Fill_and_Stroke_Attributes">Attributs Fill et Stroke</h2> -<h3 id="Painting" name="Painting">Colorer</h3> +<h3 id="Painting">Colorer</h3> <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> @@ -24,9 +24,11 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <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> -<div class="note style-wrap"><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.</div> +<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> -<h3 id="Stroke" name="Stroke">Options du contour</h3> +<h3 id="Stroke">Options du contour</h3> <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> @@ -38,7 +40,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <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> -<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png" style="float: right;"></p> +<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" @@ -63,7 +65,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <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> -<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png" style="float: right;"></p> +<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" @@ -90,7 +92,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <p>Finalement, vous pouvez également créer des lignes pointillées en spécifiant l'attribut <code>stroke-dasharray</code>.</p> -<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png" style="float: right;"></p> +<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" @@ -104,7 +106,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <p>L'attribut <code>stroke-dasharray</code> prend une série de nombres séparés par une virgule en argument. </p> <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> + <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> <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> @@ -119,11 +121,13 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <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> -<h2 id="Using_CSS" name="Using_CSS">Utiliser CSS</h2> +<h2 id="Using_CSS">Utiliser CSS</h2> <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> -<div class="note style-wrap"><strong>Note:</strong> La <a class="external" 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.</div> +<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> <h4 id="En_ligne">En ligne</h4> @@ -134,7 +138,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <h4 id="Dans_un_section_style">Dans un section style</h4> -<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="/en/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> +<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> <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"> @@ -159,7 +163,7 @@ original_slug: Web/SVG/Tutoriel/Fills_and_Strokes <h4 id="Dans_un_fichier_externe">Dans un fichier externe</h4> -<p>Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">syntaxe XML pour les stylesheets</a>:</p> +<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> <pre class="brush:xml;"><?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="style.css"?> diff --git a/files/fr/web/svg/tutorial/filter_effects/index.html b/files/fr/web/svg/tutorial/filter_effects/index.html index 332a9b39f5..4fb19b51a6 100644 --- a/files/fr/web/svg/tutorial/filter_effects/index.html +++ b/files/fr/web/svg/tutorial/filter_effects/index.html @@ -115,34 +115,24 @@ original_slug: Web/SVG/Tutoriel/filtres <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> -<div style="display: flex; text-align: center;"> -<div><img alt="Source graphic" src="https://mdn.mozillademos.org/files/16310/filters01-0.png" style="height: 70px; width: 115px;"> -<p>Élément d'origine</p> -</div> +<img alt="graphique source" src="filters01-0.png"> +<p>Graphique source</p> -<div><img alt="Primitive 1" src="https://mdn.mozillademos.org/files/16311/filters01-1.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 1" src="filters01-1.png"> <p>Primitive 1</p> -</div> -<div><img alt="Primitive 2" src="https://mdn.mozillademos.org/files/16312/filters01-2.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 2" src="filters01-2.png"> <p>Primitive 2</p> -</div> -<div><img alt="Primitive 3" src="https://mdn.mozillademos.org/files/16313/filters01-3.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 3" src="filters01-3.png"> <p>Primitive 3</p> -</div> -<div><img alt="Primitive 4" src="https://mdn.mozillademos.org/files/16314/filters01-4.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 4" src="filters01-4.png"> <p>Primitive 4</p> -</div> -<div><img alt="Primitive 5" src="https://mdn.mozillademos.org/files/16315/filters01-5.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 5" src="filters01-5.png"> <p>Primitive 5</p> -</div> -<div><img alt="Primitive 6" src="https://mdn.mozillademos.org/files/16316/filters01-6.png" style="height: 70px; width: 115px;"> +<img alt="Primitive 6" src="filters01-6.png"> <p>Primitive 6</p> -</div> -</div> - <p>{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}</p> diff --git a/files/fr/web/svg/tutorial/gradients/index.html b/files/fr/web/svg/tutorial/gradients/index.html index 1e5e8e7d45..4528d51fb7 100644 --- a/files/fr/web/svg/tutorial/gradients/index.html +++ b/files/fr/web/svg/tutorial/gradients/index.html @@ -13,7 +13,7 @@ original_slug: Web/SVG/Tutoriel/Gradients <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> -<h2 id="SVGLinearGradient" name="SVGLinearGradient">Dégradé Linéaire</h2> +<h2 id="SVGLinearGradient">Dégradé Linéaire</h2> <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> @@ -79,12 +79,12 @@ original_slug: Web/SVG/Tutoriel/Gradients <stop id="stop3" offset="100%"/> </linearGradient> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" - xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/> + xmlns:xlink="<a href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/> </pre> <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> -<h2 id="Radial_Gradient" name="Radial_Gradient">Dégradé Radial</h2> +<h2 id="Radial_Gradient">Dégradé Radial</h2> <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> diff --git a/files/fr/web/svg/tutorial/index.html b/files/fr/web/svg/tutorial/index.html index eacaeb73c4..8e47aea0cd 100644 --- a/files/fr/web/svg/tutorial/index.html +++ b/files/fr/web/svg/tutorial/index.html @@ -11,13 +11,12 @@ tags: translation_of: Web/SVG/Tutorial original_slug: Web/SVG/Tutoriel --- -<p class="summary"><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> +<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> <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> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>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 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> <h2 id="Introducing_SVG_from_Scratch">Introduction à « SVG from Scratch »</h2> @@ -42,11 +41,4 @@ original_slug: Web/SVG/Tutoriel <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_and_CSS">Graphiques SVG</a></li> </ul> -<p>Les sujets suivants sont plus avancés et devraient donc faire l'objet de leurs propres tutoriels.</p> - -<h2 id="Scripting_SVG_with_JavaScript">Scripter SVG avec JavaScript</h2> - -<div class="notecard draft"> - <p><b>Brouillon</b></p> - <p>Cette section est en cours de création.</p> -</div> +<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 diff --git a/files/fr/web/svg/tutorial/introduction/index.html b/files/fr/web/svg/tutorial/introduction/index.html index e6bd6d5c2e..0bac917759 100644 --- a/files/fr/web/svg/tutorial/introduction/index.html +++ b/files/fr/web/svg/tutorial/introduction/index.html @@ -9,11 +9,11 @@ original_slug: Web/SVG/Tutoriel/Introduction --- <p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p> -<p><a href="/@api/deki/files/6301/=lion_svg.png" title="lion_svg.png"><img alt="lion_svg.png" class="internal lwrap" src="/@api/deki/files/6301/=lion_svg.png?size=webview" style="float: left; height: 292px; width: 208px;"></a>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> +<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> <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> -<p>SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au <a class="external external-icon" 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> +<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> <h2 id="Les_ingrédients_de_base">Les ingrédients de base</h2> @@ -25,9 +25,11 @@ original_slug: Web/SVG/Tutoriel/Introduction <h2 id="Les_bons_outils">Les bons outils</h2> -<p>Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme <a class="external" 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> +<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> -<p class="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> +<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> <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> @@ -36,7 +38,7 @@ original_slug: Web/SVG/Tutoriel/Introduction <li>Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres.</li> </ul> -<p>La <a class="external" 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> +<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> <h2 id="Les_versions_SVG">Les versions SVG</h2> @@ -48,8 +50,4 @@ original_slug: Web/SVG/Tutoriel/Introduction <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> -<p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p> - -<p><span class="comment">Interwiki Languages Links</span></p> - -<p>{{ languages( { "en": "en/SVG/Tutorial/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}</p> +<p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p>
\ No newline at end of file diff --git a/files/fr/web/svg/tutorial/other_content_in_svg/index.html b/files/fr/web/svg/tutorial/other_content_in_svg/index.html index c8d11cff2f..0356f8789c 100644 --- a/files/fr/web/svg/tutorial/other_content_in_svg/index.html +++ b/files/fr/web/svg/tutorial/other_content_in_svg/index.html @@ -8,21 +8,21 @@ original_slug: Web/SVG/Tutoriel/Contenu_embarque_SVG <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> -<h3 id="Embarquer_des_images">Embarquer des images</h3> +<h3 id="embarquer_des_images">Embarquer des images</h3> <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> <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> -<pre><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="<strong>rotate(45)</strong>" - xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/> +<pre class="brush: 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> -<p><img alt="imagedemo.png" class="default internal" src="/@api/deki/files/4949/=imagedemo.png"></p> +<p>{{ EmbedLiveSample('embarquer_des_images','220','240') }}</p> <h3 id="Embarquer_du_contenu_XML_quelconque">Embarquer du contenu XML quelconque</h3> @@ -30,7 +30,9 @@ original_slug: Web/SVG/Tutoriel/Contenu_embarque_SVG <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> -<div class="note"><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.</div> +<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> <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> diff --git a/files/fr/web/svg/tutorial/paths/index.html b/files/fr/web/svg/tutorial/paths/index.html index c006452033..e0160782bb 100644 --- a/files/fr/web/svg/tutorial/paths/index.html +++ b/files/fr/web/svg/tutorial/paths/index.html @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutoriel/Paths --- <p>{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}</p> -<p>L’élément <a href="/en-US/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> +<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> <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> @@ -38,7 +38,7 @@ original_slug: Web/SVG/Tutoriel/Paths <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> -<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> +<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"/> @@ -60,9 +60,9 @@ original_slug: Web/SVG/Tutoriel/Paths V y (ou v dy) </pre> -<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 <span style="line-height: 1.5;">:</span></p> +<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> -<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> +<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"/> @@ -101,7 +101,7 @@ V y (ou v dy) <h2 id="Commandes_pour_les_courbes">Commandes pour les courbes</h2> -<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 class="external" href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">page Wikipedia Courbe de Bézier</a>.</p> +<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> <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> @@ -116,7 +116,7 @@ V y (ou v dy) <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> -<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> +<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"/> @@ -151,7 +151,7 @@ V y (ou v dy) <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> -<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> +<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"/> @@ -166,7 +166,8 @@ V y (ou v 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> -<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> +<p><img alt="courbe de Bézier quadratique avec une grille" src="quadratic_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 Q 95 10 180 80" stroke="black" fill="transparent"/> @@ -182,10 +183,11 @@ V y (ou v dy) <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> <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> + <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 alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p> +<p><img src="shortcut_quadratic_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 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> @@ -193,7 +195,7 @@ V y (ou v dy) <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> -<h3 id="Arcs" name="Arcs">Elliptical Arc</h3> +<h3 id="Arcs">Elliptical Arc</h3> <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> @@ -207,7 +209,7 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy <p><code>x-axis-rotation</code> décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:</p> -<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p> +<p><img alt="SVGArcs_XAxisRotation_with_grid" src="svgarcs_xaxisrotation_with_grid.png"></p> <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" /> @@ -238,10 +240,9 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy stroke="blue" stroke-width="6" fill="none" /> </pre> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h5>Exemple jouable</h5> -<pre class="brush: html"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html hidden"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> <g font-family="Verdana" font-size="13" > <ellipse cx="125" cy="125" rx="100" ry="50" @@ -262,7 +263,7 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy </svg></pre> </div> -<p>{{ EmbedLiveSample('Playable_code', '100%', 200) }}</p> +<p>{{ EmbedLiveSample('exemple_jouable', '100%', 200) }}</p> <h4 id="large-arc-flag">large-arc-flag</h4> @@ -279,10 +280,9 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy stroke="blue" stroke-width="6" fill="none" /> </pre> -<div class="hidden"> -<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> +<h4 id="code_jouable_2">Code jouable 2</h4> -<pre class="brush: html"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html hidden"><svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"> <g font-family="Verdana" font-size="13" > <ellipse cx="125" cy="125" rx="100" ry="50" @@ -301,13 +301,12 @@ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy <path d="M 125,75 a100,50 0 1,0 100,50" stroke="blue" stroke-width="6" fill="none" /> </svg></pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 200) }}</p> +<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="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></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 diff --git a/files/fr/web/svg/tutorial/patterns/index.html b/files/fr/web/svg/tutorial/patterns/index.html index 0b170b5b48..703d6f3935 100644 --- a/files/fr/web/svg/tutorial/patterns/index.html +++ b/files/fr/web/svg/tutorial/patterns/index.html @@ -56,10 +56,10 @@ original_slug: Web/SVG/Tutoriel/Motifs <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> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> -<pre class="brush: html"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> +<h3>Exemple</h6> + +<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"/> @@ -88,7 +88,7 @@ original_slug: Web/SVG/Tutoriel/Motifs rect.setAttribute('width', 300);</textarea> </pre> -<pre class="brush: js">var svg = document.getElementById('svg'), +<pre class="brush: js hidden">var svg = document.getElementById('svg'), rect = svg.lastElementChild; var textarea = document.getElementById('code'), @@ -110,9 +110,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawSvg); window.addEventListener('load', drawSvg); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code','220','350') }}</p> +<p>{{ EmbedLiveSample('exemple_jouable','220','350') }}</p> <h2 id="Unités_du_contenu_objectBoundingBox">Unités du contenu: objectBoundingBox</h2> @@ -127,10 +126,9 @@ window.addEventListener('load', drawSvg); <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> -<div class="hidden"> -<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> +<h3 id="code_jouable_2">Code jouable 2</h3> -<pre class="brush: html"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> +<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"/> @@ -159,7 +157,7 @@ window.addEventListener('load', drawSvg); rect.setAttribute('width', 300);</textarea> </pre> -<pre class="brush: js">var svg = document.getElementById('svg'), +<pre class="brush: js hidden">var svg = document.getElementById('svg'), rect = svg.lastElementChild; var textarea = document.getElementById('code'), @@ -181,11 +179,12 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawSvg); window.addEventListener('load', drawSvg); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2','220','350') }}</p> +<p>{{ EmbedLiveSample('code_jouable_2','220','350') }}</p> -<p class="note"><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="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> <h2 id="Unités_du_motif_userSpaceOnUse">Unités du motif: userSpaceOnUse</h2> @@ -200,10 +199,9 @@ window.addEventListener('load', drawSvg); <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> -<div class="hidden"> -<h6 id="Playable_code_3" name="Playable_code_3">Playable code</h6> +<h3>Exemple jouable</h3> -<pre class="brush: html"><svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> +<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"/> @@ -232,7 +230,7 @@ window.addEventListener('load', drawSvg); rect.setAttribute('width', 300);</textarea> </pre> -<pre class="brush: js">var svg = document.getElementById('svg'), +<pre class="brush: js hidden">var svg = document.getElementById('svg'), rect = svg.lastElementChild; var textarea = document.getElementById('code'), @@ -254,14 +252,13 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawSvg); window.addEventListener('load', drawSvg); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_3','220','350') }}</p> +<p>{{ EmbedLiveSample('exemple_jouable_3','220','350') }}</p> <h2 id="Récapitulatif">Récapitulatif</h2> <p>Les trois exemples sont illustrés ci-dessous sur un rectangle allongé à une hauteur de 300px:</p> -<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p> +<p><img src="svg_pattern_comparison_of_units.png"></p> <p>{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}</p> diff --git a/files/fr/web/svg/tutorial/positions/index.html b/files/fr/web/svg/tutorial/positions/index.html index a2542da4f7..4a42fe000f 100644 --- a/files/fr/web/svg/tutorial/positions/index.html +++ b/files/fr/web/svg/tutorial/positions/index.html @@ -12,7 +12,9 @@ original_slug: Web/SVG/Tutoriel/Positionnement <h3 id="La_grille">La grille</h3> -<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">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> +<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> + +<img alt="" src="canvas_default_grid.png"> <h4 id="Exemple">Exemple</h4> @@ -51,6 +53,6 @@ original_slug: Web/SVG/Tutoriel/Positionnement <p>{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}</p> -<p><span class="comment">Interwiki Languages Links</span></p> +<p>Interwiki Languages Links</p> <p>{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}</p> diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.html b/files/fr/web/svg/tutorial/svg_and_css/index.html index d941eff34f..d631eaa441 100644 --- a/files/fr/web/svg/tutorial/svg_and_css/index.html +++ b/files/fr/web/svg/tutorial/svg_and_css/index.html @@ -17,9 +17,8 @@ original_slug: CSS/Premiers_pas/Graphiques_SVG <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="notecard note"> - <p><b>Note :</b></p> - <p>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 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> @@ -381,9 +380,8 @@ svg { <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="notecard note"> - <p><b>Défi :</b></p> -<p>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 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> diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.html b/files/fr/web/svg/tutorial/svg_fonts/index.html index 327022ea96..4ccc526697 100644 --- a/files/fr/web/svg/tutorial/svg_fonts/index.html +++ b/files/fr/web/svg/tutorial/svg_fonts/index.html @@ -12,33 +12,34 @@ original_slug: Web/SVG/Tutoriel/polices_SVG <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> -<div class="note"><strong>Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android.</strong><br> -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 class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">reporté sa mise en œuvre indéfiniment</a> pour se concentrer sur <a href="/en/WOFF" title="en/About WOFF">WOFF</a>. Cependant, d'autres outils comme le plugin <a class="external" 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.</div> +<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> <p>La base pour définir une police SVG est l'élément {{ SVGElement("font") }}.</p> <h2 id="Définir_une_police">Définir une police</h2> -<p>Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle <a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement">de la spécification</a>), et expliquons-en les détails.</p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Font1<span class="punctuation token">"</span></span> <span class="attr-name token">horiz-adv-x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1000<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span> <span class="attr-name token">font-weight</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>bold<span class="punctuation token">"</span></span> <span class="attr-name token">font-</span><span class="language-css style-attr token"><span class="attr-name token"><span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token">normal</span><span class="punctuation token">"</span></span> - <span class="attr-name token">units-per-em</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1000<span class="punctuation token">"</span></span> <span class="attr-name token">cap-height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>600<span class="punctuation token">"</span></span> <span class="attr-name token">x-height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span> - <span class="attr-name token">ascent</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>700<span class="punctuation token">"</span></span> <span class="attr-name token">descent</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> - <span class="attr-name token">alphabetic</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">mathematical</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>350<span class="punctuation token">"</span></span> <span class="attr-name token">ideographic</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span> <span class="attr-name token">hanging</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face-src</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face-name</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans Bold<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font-face-src</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font-face</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>missing-glyph</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>path</span> <span class="attr-name token">d</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>M0,0h200v200h-200z<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>missing-glyph</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>glyph</span> <span class="attr-name token">unicode</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>!<span class="punctuation token">"</span></span> <span class="attr-name token">horiz-adv-x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="comment token"><!-- Outline of exclam. pt. glyph --></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>glyph</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>glyph</span> <span class="attr-name token">unicode</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>@<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="comment token"><!-- Outline of @ glyph --></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>glyph</span><span class="punctuation token">></span></span> - <span class="comment token"><!-- more glyphs --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span></code></pre> +<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> + +<pre class="brush: 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> <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> -<p>L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS <a href="https://developer.mozilla.org/en/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 class="external external-icon" href="http://en.wikipedia.org/wiki/Ascender_%28typography%29">ascenders</a>).</p> +<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> <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> @@ -48,60 +49,49 @@ Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-m <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> -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>hkern</span> <span class="attr-name token">u1</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>A<span class="punctuation token">"</span></span> <span class="attr-name token">u2</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>V<span class="punctuation token">"</span></span> <span class="attr-name token">k</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>20<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span></code></pre> +<pre class="brush: html"><hkern u1="A" u2="V" k="20" /></pre> <h2 id="Référencer_une_police">Référencer une police</h2> <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> -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="comment token"><!-- ... --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<pre class="brush: html"><font> + <font-face font-family="Super Sans" /> + <!-- ... --> +</font> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>My text uses Super Sans<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span></code></pre> +<text font-family="Super Sans">My text uses Super Sans</text></pre> <p>Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police.</p> <h3 id="Option_Utiliser_le_CSS_font-face">Option: Utiliser le CSS @font-face</h3> -<p> </p> - <p>Vous pouvez utiliser <code>@font-face</code> pour les polices externes de référence :</p> -<p> </p> - -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super_Sans<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="comment token"><!-- ... --></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<pre class="brush: html"><font id="Super_Sans"> + <!-- ... --> +</font> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/css<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-css style token"> -<span class="atrule token"><span class="rule token">@font-face</span></span> <span class="punctuation token">{</span> - <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">"Super Sans"</span><span class="punctuation token">;</span> - <span class="property token">src</span><span class="punctuation token">:</span> <span class="token url">url(#Super_Sans)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> -</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +<style type="text/css"> +@font-face { + font-family: "Super Sans"; + src: url(#Super_Sans); +} +</style> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>text</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>My text uses Super Sans<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>text</span><span class="punctuation token">></span></span></code></pre> +<text font-family="Super Sans">My text uses Super Sans</text></pre> <h3 id="Option_Référencer_une_police_externe">Option: Référencer une police externe</h3> -<p> </p> - <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> -<p> </p> -<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face-src</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font-face-uri</span> <span class="attr-name token"><span class="namespace token">xlink:</span>href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fonts.svg#Super_Sans<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font-face-src</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font-face</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span></code></pre> +<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> -<article class="approved"> -<div class="boxed translate-rendered text-content"> <p>{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}</p> -</div> -</article> diff --git a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html index 23766ed357..5eb5bade39 100644 --- a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html @@ -6,13 +6,13 @@ tags: translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction original_slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML --- -<h3 id="Aper.C3.A7u" name="Aper.C3.A7u">Aperçu</h3> +<h3 id="Aper.C3.A7u">Aperçu</h3> <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> -<h3 id="Source" name="Source">Source</h3> +<h3 id="Source">Source</h3> -<p>Voici le code source de <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">cet exemple</a> :</p> +<p>Voici le code source de cet exemple :</p> <pre><html xmlns="http://www.w3.org/1999/xhtml"> <head> @@ -54,7 +54,7 @@ original_slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML </body> </html></pre> -<h3 id="Discussion" name="Discussion">Discussion</h3> +<h3 id="Discussion">Discussion</h3> <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> @@ -70,7 +70,7 @@ original_slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML <li>Le document est entièrement basé sur les standards</li> </ul> -<h3 id="D.C3.A9tails" name="D.C3.A9tails">Détails</h3> +<h3 id="D.C3.A9tails">Détails</h3> <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> @@ -78,11 +78,9 @@ original_slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML <p>L'attribut <code>style</code> ancre l'élément SVG en arrière plan du formulaire.</p> -<h3 id="Liens_sur_le_sujet" name="Liens_sur_le_sujet">Liens sur le sujet</h3> +<h3 id="Liens_sur_le_sujet">Liens sur le sujet</h3> <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 class="external" href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> sur le wiki SVG</li> -</ul> - -<p>{{ languages( { "en": "en/SVG_In_HTML_Introduction", "ja": "ja/SVG_In_HTML_Introduction", "pl": "pl/SVG_w_XHTML_-_Wprowadzenie" } ) }}</p> + <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 diff --git a/files/fr/web/svg/tutorial/texts/index.html b/files/fr/web/svg/tutorial/texts/index.html index 50a56982f4..972538e2bd 100644 --- a/files/fr/web/svg/tutorial/texts/index.html +++ b/files/fr/web/svg/tutorial/texts/index.html @@ -41,10 +41,9 @@ original_slug: Web/SVG/Tutoriel/Texts </text> </pre> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="exemple_jouable">Exemple jouable</h6> -<pre class="brush:html"><svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> +<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> @@ -57,9 +56,8 @@ original_slug: Web/SVG/Tutoriel/Texts ]]></style> </svg> </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('exemple_jouable', '100%', 100) }}</p> <p>L'élément tspan peut prendre les attributs personnalisés suivants:</p> @@ -99,10 +97,9 @@ original_slug: Web/SVG/Tutoriel/Texts </textPath> </text></pre> -<div class="hidden"> -<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6> +<h4 id="code_jouable_2">Code jouable 2</h4> -<pre class="brush:html"><svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> +<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"> @@ -118,8 +115,7 @@ original_slug: Web/SVG/Tutoriel/Texts ]]></style> </svg> </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('code_jouable_2', '100%', 100) }}</p> <div>{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}</div> diff --git a/files/fr/web/svg/tutorial/tools_for_svg/index.html b/files/fr/web/svg/tutorial/tools_for_svg/index.html index 3ccff4deb5..52468aa4d9 100644 --- a/files/fr/web/svg/tutorial/tools_for_svg/index.html +++ b/files/fr/web/svg/tutorial/tools_for_svg/index.html @@ -14,7 +14,7 @@ original_slug: Web/SVG/Tutoriel/Tools_for_SVG <h2 id="Inkscape">Inkscape</h2> -<p>URL: <a class="external" href="http://www.inkscape.org">www.inkscape.org</a></p> +<p>URL: <a href="http://www.inkscape.org">www.inkscape.org</a></p> <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> @@ -22,27 +22,27 @@ original_slug: Web/SVG/Tutoriel/Tools_for_SVG <h2 id="Adobe_Illustrator">Adobe Illustrator</h2> -<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> +<p>URL: <a href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p> <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> <h2 id="Apache_Batik">Apache Batik</h2> -<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> +<p>URL: <a href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p> <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> <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> -<p>Utilisé avec <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a>, il permet également de transformer du SVG en PDF.</p> +<p>Utilisé avec <a href="http://xmlgraphics.apache.org/fop/">Apache FOP</a>, il permet également de transformer du SVG en PDF.</p> <h3 id="Autres_moteurs_de_rendu">Autres moteurs de rendu</h3> -<p>Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. <a class="external" 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 class="external" href="http://library.gnome.org/devel/rsvg/">rsvg</a> pour le rendu de ses images SVG.</p> +<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> <h2 id="Raphael_JS">Raphael JS</h2> -<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p> +<p>URL: <a href="http://raphaeljs.com/">raphaeljs.com</a></p> <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> @@ -54,18 +54,18 @@ original_slug: Web/SVG/Tutoriel/Tools_for_SVG <h2 id="Google_Docs">Google Docs</h2> -<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> +<p>URL: <a href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p> <p>Les dessins réalisés dans Google Docs peuvent être exportés en SVG.</p> <h2 id="Science">Science</h2> -<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 class="external" 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> +<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> -<p>SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf <a class="external" href="http://carto.net">carto.net</a> pour davantage de détails.</p> +<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> <h2 id="Autres_outils">Autres outils</h2> -<p>Le W3C propose une <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">liste des programmes</a> qui supportent le SVG.</p> +<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> <p>{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}</p> |