diff options
Diffstat (limited to 'files/fr/web/svg/attribute/style/index.md')
| -rw-r--r-- | files/fr/web/svg/attribute/style/index.md | 136 |
1 files changed, 67 insertions, 69 deletions
diff --git a/files/fr/web/svg/attribute/style/index.md b/files/fr/web/svg/attribute/style/index.md index 658ac2d4a0..13203fec87 100644 --- a/files/fr/web/svg/attribute/style/index.md +++ b/files/fr/web/svg/attribute/style/index.md @@ -7,78 +7,76 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/style --- -<p>{{SVGRef}}</p> +{{SVGRef}} -<p>L'attribut <strong><code>style</code></strong> définit les <a href="/fr/docs/Web/CSS">informations de style</a> pour son élément. Il fonctionne de manière identique à <a href="/fr/docs/Web/HTML/Attributs_universels/style">l'attribut <code>style</code> en HTML</a>.</p> +L'attribut **`style`** définit les [informations de style](/fr/docs/Web/CSS) pour son élément. Il fonctionne de manière identique à [l'attribut `style` en HTML](/fr/docs/Web/HTML/Attributs_universels/style). -<h2 id="Context_d'utilisation">Context d'utilisation</h2> +## Context d'utilisation <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Catégories</th> - <td>Attribut de présentation</td> - </tr> - <tr> - <th scope="row">Valeur</th> - <td><style></td> - </tr> - <tr> - <th scope="row">Animation</th> - <td>Non</td> - </tr> - <tr> - <th scope="row">Document normatif</th> - <td><a href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2ème Edition)</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Catégories</th> + <td>Attribut de présentation</td> + </tr> + <tr> + <th scope="row">Valeur</th> + <td><style></td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>Non</td> + </tr> + <tr> + <th scope="row">Document normatif</th> + <td> + <a href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute" + >SVG 1.1 (2ème Edition)</a + > + </td> + </tr> + </tbody> </table> -<dl> - <dt><style></dt> - <dd><p>La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est <a href="/fr/docs/Web/CSS">CSS</a>.</p> - <div class="note"> - <p><strong>Note :</strong> En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme <a href="/fr/docs/Web/XSLT">XSL(T)</a>. Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas.</p> - </div> - </dd> -</dl> - -<h2 id="Exemple">Exemple</h2> - -<p>L'exemple suivant stylise le rectangle en utilisant l'attribut <code>style</code>, avec CSS comme langage de feuille de style.</p> - -<pre class="brush: html"><svg viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"> - <rect height="300" width="600" x="200" y="100" - style="fill: red; stroke: blue; stroke-width: 3"/> -</svg> -</pre> - -<h2 id="Éléments">Éléments</h2> - -<p>Les éléments suivants peuvent utiliser l'attribut <code>style</code>:</p> - -<ul> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_conteneurs">Éléments conteneur</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_primitives_de_filtre">Éléments primitives de filtre</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_dégradés">Éléments de dégradés</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_graphiques">Éléments graphiques</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_structurels">Éléments structurels</a> »</li> - <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel">Éléments de contenu textuel</a> »</li> - <li>{{ SVGElement("clipPath") }}</li> - <li>{{ SVGElement("filter") }}</li> - <li>{{ SVGElement("font") }}</li> - <li>{{ SVGElement("foreignObject") }}</li> - <li>{{ SVGElement("glyphRef") }}</li> - <li>{{ SVGElement("stop") }}</li> - <li>{{ SVGElement("glyph") }}</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{ SVGElement("style") }}</li> -</ul> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("svg.attributes.style.style")}}</p> +- \<style> + + - : La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est [CSS](/fr/docs/Web/CSS). + + > **Note :** En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme [XSL(T)](/fr/docs/Web/XSLT). Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas. + +## Exemple + +L'exemple suivant stylise le rectangle en utilisant l'attribut `style`, avec CSS comme langage de feuille de style. + +```html +<svg viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"> + <rect height="300" width="600" x="200" y="100" + style="fill: red; stroke: blue; stroke-width: 3"/> +</svg> +``` + +## Éléments + +Les éléments suivants peuvent utiliser l'attribut `style`: + +- [Éléments conteneur](/fr/docs/Web/SVG/Element#Éléments_conteneurs) » +- [Éléments primitives de filtre](/fr/docs/Web/SVG/Element#Éléments_primitives_de_filtre) » +- [Éléments de dégradés](/fr/docs/Web/SVG/Element#Éléments_de_dégradés) » +- [Éléments graphiques](/fr/docs/Web/SVG/Element#Éléments_graphiques) » +- [Éléments structurels](/fr/docs/Web/SVG/Element#Éléments_structurels) » +- [Éléments de contenu textuel](/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel) » +- {{ SVGElement("clipPath") }} +- {{ SVGElement("filter") }} +- {{ SVGElement("font") }} +- {{ SVGElement("foreignObject") }} +- {{ SVGElement("glyphRef") }} +- {{ SVGElement("stop") }} +- {{ SVGElement("glyph") }} + +## Voir aussi + +- {{ SVGElement("style") }} + +## Compatibilité des navigateurs + +{{Compat("svg.attributes.style.style")}} |