files/fr/web/svg/element/tspan/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
78
79
80
81

---
title: <tspan>
slug: Web/SVG/Element/tspan
tags:
  - Contenu texte SVG
  - Elément(3)
  - Référence(2)
  - SVG
translation_of: Web/SVG/Element/tspan
---
{{SVGRef}}

A l'intérieur d'un élément {{SVGElement("text")}}, les propriétés du texte et des polices, ainsi que la position actuelle du texte, peuvent être ajustées de façon absolue ou relative à partir des coodonnées précisées dans un élément `tspan`.

## Contexte d'utilisation

{{svginfo}}

## Exemple

```css hidden
html,body,svg { height:100% }
```

```html
<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>
```

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

## Attributs

### Attributs globaux

- [Attributs de traitement conditionnel](/fr/docs/SVG/Attribute#ConditionalProccessing "SVG/Attribute#ConditionalProccessing") »
- [Attributs de base](/fr/docs/SVG/Attribute#Core "SVG/Attribute#Core") »
- [Attributs d'évènements graphiques](/fr/docs/SVG/Attribute#GraphicalEvent "SVG/Attribute#GraphicalEvent") »
- [Attributs de présentation](/fr/docs/SVG/Attribute#Presentation "SVG/Attribute#Presentation") »
- {{SVGAttr("class")}}
- {{SVGAttr("style")}}
- {{SVGAttr("externalResourcesRequired")}}

### Specific attributes

- {{SVGAttr("x")}}
- {{SVGAttr("y")}}
- {{SVGAttr("dx")}}
- {{SVGAttr("dy")}}
- {{SVGAttr("rotate")}}
- {{SVGAttr("textLength")}}
- {{SVGAttr("lengthAdjust")}}

## Interface DOM

Cet élément implémente l'interface [`SVGTSpanElement`](/fr/docs/Web/API/SVGTSpanElement).

## Spécifications

| Spécification                                                                            | Statut                   | Commentaire          |
| ---------------------------------------------------------------------------------------- | ------------------------ | -------------------- |
| {{SpecName('SVG2', 'text.html#TextElement', '&lt;tspan&gt;')}}     | {{Spec2('SVG2')}} |                      |
| {{SpecName('SVG1.1', 'text.html#TSpanElement', '&lt;tspan&gt;')}} | {{Spec2('SVG1.1')}} | Définition originale |

## Compatibilité des navigateurs

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

## Voir aussi

- {{SVGElement("text")}}