files/fr/web/svg/attribute/color/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
71
72
73

---
title: color
slug: Web/SVG/Attribute/color
tags:
  - SVG
  - SVG Attribute
translation_of: Web/SVG/Attribute/color
---
{{SVGRef}}

L'attribut `color` est utilisé pour définir indirectement une valeur potentielle (`currentColor`) pour les attributs {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }}, {{ SvgAttr("stop-color") }}, {{ SVGAttr("flood-color") }} et {{ SVGAttr("lighting-color") }}.

> **Note :** `color` étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir {{ cssxref("color","CSS color") }} pour plus d'informations.

## Contexte d'utilisation

<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Catégories</th>
      <td>Attribut de présentation</td>
    </tr>
    <tr>
      <th scope="row">Valeur</th>
      <td>
        <a href="/fr/SVG/Content_type#Color" title="en/SVG/Content_type#Color"
          >&#x3C;color></a
        >
        | inherit
      </td>
    </tr>
    <tr>
      <th scope="row">Animation</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Document normatif</th>
      <td>
        <a href="http://www.w3.org/TR/SVG11/color.html#ColorProperty"
          >SVG 1.1 (2nd Edition)</a
        >
      </td>
    </tr>
  </tbody>
</table>

## Exemple

```html
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g color="green">
    <rect width="50" height="50" fill="currentColor" />
    <circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" />
  </g>
</svg>
```

{{ EmbedLiveSample('Exemple', '100%', '110') }}

## Éléments

Les éléments suivants peuvent utiliser l'attribut `color`:

- [Éléments de contenu textuel](/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel "en/SVG/Element#Text_content_elements") »
- [Éléments de formes](/fr/docs/Web/SVG/Element#Éléments_de_formes "en/SVG/Element#Shape_elements")  »
- {{ SVGElement("stop") }}
- {{ SVGElement("feFlood") }}
- {{ SVGElement("feDiffuseLighting") }}
- {{ SVGElement("feSpecularLighting") }}

## Compatibilité des navigateurs

{{Compat("svg.attributes.presentation.color")}}