Manipuler SVG viewbox avec JavaScript (pas de bibliothèques)
J'essaie de modifier une fenêtre SVG elements en JavaScript. Fondamentalement, je dessine un arbre de recherche binaire, et quand il devient trop large, je veux modifier la viewbox pour effectuer un zoom arrière afin que l'arbre s'intègre dans la fenêtre. J'utilise actuellement:
if(SVGWidth>=1000){
var a = document.getElementById('svgArea');
a.setAttribute("viewbox","0 0 " + SVGWidth + " 300");
}
Le code HTML est:
<svg id="svgArea" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="1000" height="300" viewBox="0 0 1000 300">
J'ai aussi essayé d'utiliser setAttributeNS ('null',...) mais cela ne semblait pas fonctionner non plus. Une chose étrange que j'ai remarquée est que lorsque j'alerte (a) il donne [object SVGSVGElement] qui semble étrange. Toute aide est la apprécier.
2 réponses
Il serait bon de voir le contexte du svg, mais ce qui suit a fonctionné pour moi avec un document SVG pur:
shape = document.getElementsByTagName("svg")[0];
shape.setAttribute("viewBox", "-250 -250 500 750");
Peut-être que c'est parce que {[1] } est sensible à la casse?
Vous avez une erreur dans votre code: "viewbox" est différent de "viewBox"...B est en majuscules. Changer le code en:
a.setAttribute("viewBox","0 0 " + SVGWidth + " 300");