files/fr/web/svg/element/lineargradient/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
74
75
76
77

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

L'élément **`<linearGradient>`** permet de définir des dégradés linéaires, qui pourront être utilisés comme remplissage ou contour des éléments SVG.

## Contexte d'utilisation

{{svginfo}}

## Attributs

### Attributs globaux

- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base)
- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_présentation)
- [Attributs Xlink](/fr/docs/Web/SVG/Attribute#Attributs_XLink)
- {{SVGAttr("class")}}
- {{SVGAttr("style")}}
- {{SVGAttr("externalResourcesRequired")}}

### Attributs spécifiques

- {{SVGAttr("gradientUnits")}}
- {{SVGAttr("gradientTransform")}}
- {{SVGAttr("x1")}}
- {{SVGAttr("y1")}}
- {{SVGAttr("x2")}}
- {{SVGAttr("y2")}}
- {{SVGAttr("spreadMethod")}}
- {{SVGAttr("xlink:href")}}

## Interface DOM

Cet élément implémente l'interface {{domxref("SVGLinearGradientElement")}}.

## Exemple

```html
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%"  stop-color="green"/>
            <stop offset="95%" stop-color="gold"/>
        </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)"
          x="10" y="10" width="100" height="100"/>
</svg>
```

{{EmbedLiveSample("Exemple", 120, 120)}}

## Spécifications

| Spécification                                                                                                    | Statut                   | Commentaire         |
| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- |
| {{SpecName('SVG2', 'pservers.html#LinearGradientElement', '&lt;linearGradient&gt;')}} | {{Spec2('SVG2')}} |                     |
| {{SpecName('SVG1.1', 'pservers.html#LinearGradients', '&lt;linearGradient&gt;')}}     | {{Spec2('SVG1.1')}} | Définition initiale |

## Compatibilité des navigateurs

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

## Voir aussi

- {{SVGElement("radialGradient")}}
- {{SVGElement("stop")}}