g�n�ration SGV par javascript
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:
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.
