g�n�ration SGV par javascript

**yassou** · 03/06/2012, 02h25

Bonjour,
Je travaille sur la g�n�ration de SVG par du script.
je veut cr�er un rectangle avec une largeur dynamique selon la longueur d'un texte qui doit �tre positionn� dans ce rectangle, pour se faire j'ai �crit ce scripte de test :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
	  <table border="0">
	  	<tr>
	  		<td><input id="txt1" type="text"/></td><td><input type="button" value="Ok" onclick="createRecText(evt)"/></td>
	  	</tr>
	  </table>
  <svg xmlns="http://www.w3.org/2000/svg"  id="svgNode" width="730" height="550" onload="createRecText(evt)" >
	  <script type="text/javaScript">
	  	<![CDATA[
	  		function createRecText(evt){
		  	var doc=evt.target.ownerDocument;
		  	var textInput=doc.getElementById("txt1").value;
		  	//création du rectangle
		  	var rect = doc.createElementNS("http://www.w3.org/2000/svg","rect");
			rect.setAttributeNS(null,"x","30");
			rect.setAttributeNS(null,"y","100");
			rect.setAttributeNS(null,"width",(textInput.getComputedTextLength()+50).toString());
			rect.setAttributeNS(null,"height","120");
 
		  	//création du texte
		  	var txtSvgNode = doc.createElementNS("http://www.w3.org/2000/svg","text");
			txtSvgNode.setAttributeNS(null,"x","50");
			txtSvgNode.setAttributeNS(null,"y","120");
			txtSvgNode.nodeValue=textInput;
			svgNode=doc.getElementById("svgNode");
			svgNode.appendChild(rect);
			svgNode.appendChild(txtSvgNode);			
	  	} 
	  	]]>
	  </script>
  </svg>
  </body>
</html>

Le probl�me c'est qu'il ne g�n�re ni texte, ni rectangle
de l'aide SVP.

**sekaijin** · 04/06/2012, 07h00

http://raphaeljs.com/

A+JYT

**yassou** · 04/06/2012, 16h03

Merci sekaijin
apr�s quelques recherches sur la fonction getComputedTextLength() l'erreur etait la suivante:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

textInput.getComputedTextLength()+50

En fait, la fonction getComputedTextLength() est une m�thode SVG-DOM applicable seulement avec des �l�ments de type text (text est une balise � part enti�re dans SVG). Elle permet de donner la largeur en pixel prise par un text SVG dans un contexte donn� (taille font, type font, longueur de la cha�ne...).
Donc son utilisation est impossible avec une cha�ne de caract�re.
Lien sur SVG qui m'a trop plais: http://www.learnsvg.com

g�n�ration SGV par javascript

JavaScript

Discussions similaires

Partager

Partager