SVG Dessiner un arc de cercle de manière progressive

Version imprimable

Bonsoir à tous,
pour finir la semaine, je bute sur un problème de dessin dynamique d'un arc de cercle.
Je voudrais dessiner un de cercle de 270° sens trigonométrique de manière progressive !
Malgré de nombreuses recherches sur Internet, je n'ai rien trouvé de très utile. j'ai fini avec ce code qui affiche correctement l'arc de cercle là ou je souhaite mais sans progressivité.
Mon code : ($ pour jQuery)

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
	$(function(){
 
        var svgns="http://www.w3.org/2000/svg";
 
        var svg=document.createElementNS(svgns,"svg");
        svg.setAttribute('width', '300px');
        svg.setAttribute('height', '300px');
        document.body.appendChild(svg);
 
        var cx=150;
        var cy=150;
 
        addPath(svg,"arc3","#FFF","#006699", 5,regularArcData(cx,cy,60+4,-60,280,false));
 
        function addPath(theSvg,id,fill,stroke,strokeWidth,data){
            var path=document.createElementNS(svgns,"path");
            path.setAttribute("id",id);
            path.setAttribute("fill",fill);
            path.setAttribute("stroke",stroke);
            path.setAttribute("stroke-width",strokeWidth);
            path.setAttribute("d",data);
            theSvg.appendChild(path);
 
            var pathSvg=""
            pathSvg+="\n"
                      +"<path id='"+id
                      +"' fill='"+fill
                      +"' stroke='"+stroke
                      +"' stroke-width='"+strokeWidth
                      +"' d='"+data+"'/>";
             $("#paths").text($("#paths").text()+pathSvg);
        }
 
        function regularArcData(cx,cy,radius,startDegrees,endDegrees,isCounterClockwise){
//			Source http://jsfiddle.net/m1erickson/VbqnW/
			for (var i = 0; i < 270; i++) {
				var offsetRadians=0;  // -Math.PI/2 for 12 o'clock
				var sweepFlag=(isCounterClockwise)?0:1;
				var startRadians=offsetRadians+startDegrees*Math.PI/180;
				var endRadians=offsetRadians+(endDegrees+i)*Math.PI/180;
				var largeArc=( (endRadians-startRadians) % (2*Math.PI) ) > Math.PI ? 1 : 0;
				var startX=parseInt(cx+radius*Math.cos(startRadians));
				var startY=parseInt(cy+radius*Math.sin(startRadians));
				var endX=  parseInt(cx+radius*Math.cos(endRadians));
				var endY=  parseInt(cy+radius*Math.sin(endRadians));
				var space=" ";
				var arcData="";
 
				arcData+="M"+space+startX+space+startY+space;
				arcData+="A"+space+radius         +space
								  +radius         +space
								  +offsetRadians  +space
								  +largeArc       +space
								  +sweepFlag      +space
								  +endX           +space
								  +endY;
				return(arcData);
			}
        }

Si qqu'un à une piste à me proposer d'avance merci.
Cordialement

16/01/2015, 19h24
kevin254kl

Bonsoir, il y- a la librairie Raphael qui est fait pour vous http://raphaeljs.com/vous pouvez personnaliser comme vous le souhaitez cordialement
16/01/2015, 19h41
bronon

Merci pour ta réponse, je n'utilise pas Raphaël.js ni d'autre frameWorks et je voudrais éviter, j'ai de très nombreux boutons que j'ai dessiné en SVG pur et qui fonctionne très bien, donc si je peux continuer comme ça ça serait mieux je pense !
j'ai essayé Raph mais leurs exemples sont d'une complexité folle.
Cordialement
16/01/2015, 22h57
kevin254kl

Avec un timer alors , lors de l'affichage vous ralentissez pour que cela soit visible,c'est juste une idée mais j'aurais tenté ça.
17/01/2015, 10h10
NoSmoking

Bonjour,

Citation:

Avec un timer...

oui à mettre dans la boucle par exemple.

J'ai bien avancé sur le pb, j'arrive à faire ce je veux avec ce code : (bricoler à partir d'un ex Web)

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
44
45
46
47
48
49
50
51
52
53
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="225"
   height="225"
   onload="init(evt)">
	<defs>
    </defs>	
 
   <style>
   	 .gear{
   	 	stroke: #006699;
   	 	fill:	red;
   	 }
   </style>
 
  <script type="text/ecmascript"><![CDATA[
  	var svgNS = "http://www.w3.org/2000/svg";
 
	function init(evt)
	{
		if ( window.svgDocument == null )
		{
			svgDocument = evt.target.ownerDocument;
		}
		addRotateTransform('loaderSimple', 2, 1);
	}
 
	function addRotateTransform(target_id, speed, direction) {
		var element_to_rotate = svgDocument.getElementById(target_id);
		var my_transform = svgDocument.createElementNS(svgNS, "animateTransform");
 
		var bb = element_to_rotate.getBBox();
		var cx = bb.x + bb.width/2;
		var cy = bb.y + bb.height/2;
 
		my_transform.setAttributeNS(null, "attributeName", "transform");
		my_transform.setAttributeNS(null, "attributeType", "XML");
		my_transform.setAttributeNS(null, "type", "rotate");
		my_transform.setAttributeNS(null, "dur", speed + "s");
		my_transform.setAttributeNS(null, "repeatCount", "indefinite");
		my_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);
		my_transform.setAttributeNS(null, "to", 360*direction+" "+cx+" "+cy);
 
		element_to_rotate.appendChild(my_transform);
		my_transform.beginElement();
	}
  ]]></script>
 
  <path id="loaderSimple" fill="none" stroke="red" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M74.592,6.486c16.437,8.369,27.695,25.448,27.695,45.157c0,27.971-22.675,50.644-50.644,50.644C23.674,102.287,1,79.614,1,51.644C1,23.674,23.674,1,51.644,1c3.004,0,5.946,0.262,8.807,0.763"/>
</svg>

maintenant je voudrais mettre le path en <defs> avec stroke & stroke-width comme variable JS et là je coince !
Si qqu'un peut me donner une piste d'avance merci !
Bon AM à tous

24/01/2015, 10h14
NoSmoking
Pourquoi donc ne pas placer directement ton path dans la defs
Code:

1 2 3 4 <defs> <path id="loaderSimple"> </path> </defs>