Librairie Raphael - path ne s'affiche pas

**yozart** · 20/04/2013, 19h21

Bonjour,

J'essaye actuellement de "convertir" un svg en javascript grace a la librairie Raphael.

Cependant, certain path de mon svg n'affichent rien a l'écran.

Savez-vous pourquoi et si oui que dois-je corriger pour que cela fonctionne?

page html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Le tour des fermes</title>
<style type="text/css">
  #canvas_carte {
    width: 842px;
        height : 1191px;
    border: 1px solid #aaa;
  }
</style>
</head>
<body>
  <div id="canvas_carte"></div>
  <script src="js/raphael-min.js" charset="utf-8" ></script>
  <script src="js/carte-init.js" charset="utf-8" ></script>
</body>
</html>

le code javascript. Vous remarquerez que le c1_8 fonctionne alors que le c1_9 n'affiche rien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload = function() {
	var paper = new Raphael(document.getElementById('canvas_carte'), 1191, 842);
 
var c1_8 = paper.path("M439,697.167c0,0,8.042-18.208,9.042-20.208s8.667-16,11.667-19.667s6.916-12.167,6.916-12.167    c5.25-14.25,6.134-24.922,4.625-38.5c-1.5-13.5-0.5-21.25-0.5-21.25s7.584-27.542,9.25-33.875s-0.25-21.75-3-28    c0,0-0.499-2.167,3.834-13.167l22-53.667l2-4c0,0-3-19.667-3-22.333s-1.334-16.667-1.334-16.667s-5.666,1.667-8.333,1");
	c1_8.attr("fill","none");
	c1_8.attr("stroke","#74B959");
	c1_8.attr("stroke-width",4);
	c1_8.attr("stroke-miterlimit",10);
 
	var c1_9 = paper.path("M142.75,925c0,0,5.5,7.625,6.5,10c1.5,3.25,2.5,2.125,5.276-0.26c3.563-2.841,10.492-8.508,15.349-13.365 c6.667-6.667,29.167-27.875,30.5-29.375s6-2.125,7.875,1c1.191,1.985,6.75,10.875,12.25,16.375s6.625,6.5,6.625,6.5");
	c1_9.attr("fill","none");
	c1_9.attr("stroke","#74B959");
	c1_9.attr("stroke-width",4);
	c1_9.attr("stroke-linecap","round");
	c1_9.attr("stroke-miterlimit",10);
	c1_9.attr("stroke-linejoin","round");
	c1_9.attr("stroke-dasharray","-");
 
}

**aku84** · 20/04/2013, 22h42

Bonjour,

c9 s'affiche mais il est en dehors des dimensions du canevas.

La taille du caneva est largeur:1191, et hauteur:842

et le path commence au point:

X=142.75
Y=925

var c1_9 = paper.path("M142.75,925c0,0,5.5,7.625

En changeant par exemple le 925 par 725, le path apparaitra. Ou alors il faut agrandir la hauteur de la div et du canevas

Librairie Raphael - path ne s'affiche pas

JavaScript

Discussions similaires

Partager

Partager