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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
title: animateTransform
slug: Web/SVG/Element/animateTransform
tags:
- Element
- SVG
- SVG Animation
translation_of: Web/SVG/Element/animateTransform
---
<div>{{SVGRef}}</div>
<p>L'élément <strong><code><animateTransform></code></strong> permet d'animer un élement en appliquant une transformation: translation, mise à l'échelle, rotation et/ou inclinaison.</p>
<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
<p>{{svginfo}}</p>
<h2 id="Exemple">Exemple</h2>
<pre class="brush: html"><?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<polygon points="60,30 90,90 30,90">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="indefinite"/>
</polygon>
</svg></pre>
<p>{{ EmbedLiveSample('Exemple','120','120') }}</p>
<h2 id="Attributs">Attributs</h2>
<h3 id="Attributs_globaux">Attributs globaux</h3>
<ul>
<li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing"><span class="short_text" id="result_box" lang="fr"><span class="hps">Attributs de traitement conditionnel</span></span></a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Attributs de base</a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">Attributs de l'évènement d'animation</a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Attributs Xlink</a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="en/SVG/Attribute#AnimationAttributeTarget">Attributs de ciblage d'animation</a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">Attributs de chronométrage d'animation</a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">Attributs de valeur d'animation</a> »</li>
<li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">Attributs d'ajout d'animations</a> »</li>
<li>{{ SVGAttr("externalResourcesRequired") }}</li>
</ul>
<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
<ul>
<li>{{ SVGAttr("by") }}</li>
<li>{{ SVGAttr("from") }}</li>
<li>{{ SVGAttr("to") }}</li>
<li>{{ SVGAttr("type") }}</li>
</ul>
<h2 id="Interface_DOM">Interface DOM</h2>
<p>Cet élément implémente l'interface <code><a href="/en-US/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code>.</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("SVG Animations 2", "#AnimateTransformElement", "<animateTransform>")}}</td>
<td>{{Spec2("SVG Animations 2")}}</td>
<td>Aucun changement</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '<animateTransform>')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
<p>{{Compat("svg.elements.animateTransform")}}</p>
|
