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