[SVG]Animation d'ellipse sous chrome

Bonjour,

j'ai créé un camembert en fausse 3D généré à partir de données stockées dans un tableau à taille variable et à données variables !
et désormais je souhaite faire l'animation de chargement du camembert.
donc apparition des parts une par une.

Voici tout d'abord un bout de code généré qui donne la partie haute du camembert en 2 fois. la 1ere est un test d'animation et la 2nd est ce que j'ai sans animation.

Code:

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
 
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">
 
<g id="startAnim">
	<path d="M333.33333333333337,250 A133.33333333333334 50 0 0,1 333.33333333333337,250 L200,250 z" fill="#cc0022">
		<animate attributeName="d" attributeType="XML" id="anim_0" begin="0s" fill="freeze" from="M333.33333333333337,250 A133.33333333333334 50 0 0,1 333.33333333333337,250 L200,250 z" to="M330.9716334304918,240.63093427071377 A133.33333333333334 50 0 0,1 333.33333333333337,250 L200,250 z" dur="300ms"></animate>
	</path>
	<path d="M330.9716334304918,240.63093427071377 A133.33333333333334 50 0 0,1 330.9716334304918,240.63093427071377 L200,250 z" fill="#c38ec7">
		<animate attributeName="d" attributeType="XML" id="anim_1" begin="anim_0.end" fill="freeze" from="M330.9716334304918,240.63093427071377 A133.33333333333334 50 0 0,1 330.9716334304918,240.63093427071377 L200,250 z" to="M316.8408906725152,225.91231629491423 A133.33333333333334 50 0 0,1 330.9716334304918,240.63093427071377 L200,250 z" dur="500ms"></animate>
	</path>
	<path d="M316.8408906725152,225.91231629491423 A133.33333333333334 50 0 0,1 316.8408906725152,225.91231629491423 L200,250 z" fill="#ffff00">
		<animate attributeName="d" attributeType="XML" id="anim_2" begin="anim_1.end" fill="freeze" from="M316.8408906725152,225.91231629491423 A133.33333333333334 50 0 0,1 316.8408906725152,225.91231629491423 L200,250 z" to="M278.3713669723297,209.54915028125262 A133.33333333333334 50 0 0,1 316.8408906725152,225.91231629491423 L200,250 z" dur="700ms"></animate>
	</path>
	<path d="M278.3713669723297,209.54915028125262 A133.33333333333334 50 0 0,1 278.3713669723297,209.54915028125262 L200,250 z" fill="#00FF22">
		<animate attributeName="d" attributeType="XML" id="anim_3" begin="anim_2.end" fill="freeze" from="M278.3713669723297,209.54915028125262 A133.33333333333334 50 0 0,1 278.3713669723297,209.54915028125262 L200,250 z" to="M224.98417527809661,200.88563746356556 A133.33333333333334 50 0 0,1 278.3713669723297,209.54915028125262 L200,250 z" dur="700ms"></animate>
	</path>
	<path d="M224.98417527809661,200.88563746356556 A133.33333333333334 50 0 0,1 224.98417527809661,200.88563746356556 L200,250 z" fill="#0099cc">
		<animate attributeName="d" attributeType="XML" id="anim_4" begin="anim_3.end" fill="freeze" from="M224.98417527809661,200.88563746356556 A133.33333333333334 50 0 0,1 224.98417527809661,200.88563746356556 L200,250 z" to="M121.62863302767026,209.54915028125262 A133.33333333333334 50 0 0,1 224.98417527809661,200.88563746356556 L200,250 z" dur="1300ms"></animate>
	</path>
	<path d="M121.62863302767026,209.54915028125262 A133.33333333333334 50 0 0,1 121.62863302767026,209.54915028125262 L200,250 z" fill="#9966cc">
		<animate attributeName="d" attributeType="XML" id="anim_5" begin="anim_4.end" fill="freeze" from="M121.62863302767026,209.54915028125262 A133.33333333333334 50 0 0,1 121.62863302767026,209.54915028125262 L200,250 z" to="M92.13106741667364,279.38926261462365 A133.33333333333334 50 0 0,1 121.62863302767026,209.54915028125262 L200,250 z" dur="2500ms"></animate>
	</path>
	<path d="M92.13106741667364,279.38926261462365 A133.33333333333334 50 0 0,1 92.13106741667364,279.38926261462365 L200,250 z" fill="#660055">
		<animate attributeName="d" attributeType="XML" id="anim_6" begin="anim_5.end" fill="freeze" from="M92.13106741667364,279.38926261462365 A133.33333333333334 50 0 0,1 92.13106741667364,279.38926261462365 L200,250 z" to="M333.33333333333337,250 A133.33333333333334 50 0 0,1 92.13106741667364,279.38926261462365 L200,250 z" dur="4000ms"></animate>
	</path>
</g>
 
<g>
	<path d="M 330.972 440.631 A 133.333 50 0 0 1 333.333 450 L 200 450 Z" fill="#cc0022"></path>
	<path d="M 316.841 425.912 A 133.333 50 0 0 1 330.972 440.631 L 200 450 Z" fill="#c38ec7"></path>
	<path d="M 278.371 409.549 A 133.333 50 0 0 1 316.841 425.912 L 200 450 Z" fill="#ffff00"></path>
	<path d="M 224.984 400.886 A 133.333 50 0 0 1 278.371 409.549 L 200 450 Z" fill="#00FF22"></path>
	<path d="M 121.629 409.549 A 133.333 50 0 0 1 224.984 400.886 L 200 450 Z" fill="#0099cc"></path>
	<path d="M 92.1311 479.389 A 133.333 50 0 0 1 121.629 409.549 L 200 450 Z" fill="#9966cc"></path>
	<path d="M 333.333 450 A 133.333 50 0 0 1 92.1311 479.389 L 200 450 Z" fill="#660055"></path>
</g>
 
</svg>
</body>
</html>

je rencontre 2 problèmes qui sont les suivants :

1. comme vous pouvez le constater pour le camembert du haut, la part ne suit pas la courbe de l'ellipse ! Je comprends assez bien pourquoi, par contre je ne vois pas comment résoudre ca ! avez vous une idée ?

2. comme vous pouvez le constater aussi pour le camembert du haut, certaines parts n'apparaissent pas, uniquement sous chrome, firefox nickel !
et la c'est assez etrange, donc si c'est comme chez moi, vous ne verrez pas la 2nd et la 4eme part.
Je vous propose donc de mettre dans l'animation de la 2nd part, 2000ms au lieu de 500.
la elle reste mais la 3eme et la 4eme n'apparaissent pas. modifiez le temps des parts pour qu'elles apparaissent.
Avez vous une solution pour que je puisse mettre les temps que je veux sous chrome et que ca apparaisse ?

merci a tous pour votre précieuse aide