2011-10-21 6 views
3

J'essaie de créer dynamiquement des vecteurs SVG avec Javascript et je rencontre des problèmes.Javascript et SVG

Je crée le balisage svg en javascript avec document.createElement et l'ajoute à un conteneur div. Ensuite, je fais la même chose et créer un rect et l'ajouter comme un enfant à l'ID de svg.

Quand je regarde les DOM, je peux voir les éléments ajoutés, et leurs propriétés sont telles:

<svg id="gdc_container" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="300"> 
    <rect id="gdc_background" width="500" height="300" style="rgb(0,0,255)"></rect> 
</svg> 

Tout semble bien, mais les graphiques ne se présentent pas. Lorsque j'utilise l'inspecteur Chromes, je peux voir les éléments svg et rect, mais l'infobulle chrome indique leur taille comme [0 x 0].

Vous avez des idées?

+1

Avez-vous essayé d'utiliser 'createElementNS'? (https://developer.mozilla.org/en/DOM/document.createElementNS), pour quelques exemples, consultez http://www.kevlindev.com/tutorials/basics/shapes/js_dom/index.htm. – Prusse

+0

Ecrivez cela comme une réponse et vous avez la coche! merci – grep

Répondre

4

Avez-vous essayé d'utiliser createElementNS? (developer.mozilla.org/en/DOM/document.createElementNS)

Pour certains exemples, voir http://www.kevlindev.com/tutorials/basics/shapes/js_dom/index.htm.

+0

Essayé en utilisant l'un des exemples pour les formes. J'ai inséré le bloc de code dans un window.onload et il n'y a pas de forme apparaissant. – MiddleKay

+0

Quel navigateur utilisez-vous? Pouvez-vous créer un violon montrant le problème? http://jsfiddle.net/ – Prusse

+0

J'ai essayé cela dans Google Chrome http://jsfiddle.net/w9gEx/ – MiddleKay