files/fr/web/svg/element/style/index.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

---
title: <style>
slug: Web/SVG/Element/style
tags:
  - Element
  - Reference
  - SVG
translation_of: Web/SVG/Element/style
---
{{SVGRef}}

L'élément `style` permet d'intégrer directement des feuilles de style dans un contenu SVG. L'élément style de SVG possède les mêmes attributs que l'élément correspondant au format HTML (voir l'élément HTML {{HTMLElement("style")}}).

## Contexte d'utilisation

{{svginfo}}

## Exemple

```html
<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <style>
    /* <![CDATA[ */
    circle {
      fill: orange;
      stroke: black;
      stroke-width: 10px; // Note that the value of a pixel depend on the viewBox
    }
    /* ]]> */
  </style>

  <circle cx="50" cy="50" r="40" />
</svg>
```

Résultat en direct:

{{EmbedLiveSample("Exemple",150,165)}}

## Attributs

### Attributs Globaux

- [Core attributes](/fr/SVG/Attribute#Core)&nbsp;»

### Attributs Specifiques

- {{SVGAttr("type")}}
- {{SVGAttr("media")}}
- {{SVGAttr("title")}}

## Interface DOM

Cet élément implemente l'interface [`SVGStyleElement`](/fr/DOM/SVGStyleElement).

## Specifications

| Specification                                                                                | Status                   | Commentaire        |
| -------------------------------------------------------------------------------------------- | ------------------------ | ------------------ |
| {{SpecName('SVG2', 'styling.html#StyleElement', '&lt;style&gt;')}}     | {{Spec2('SVG2')}} |                    |
| {{SpecName('SVG1.1', 'styling.html#StyleElement', '&lt;style&gt;')}} | {{Spec2('SVG1.1')}} | Initial definition |

## Compatibilité des navigateurs

{{Compat("svg.elements.style")}}

## Voir aussi

- [\<style> element in HTML](/fr/HTML/Element/style)