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.
