web-dev-qa-db-fra.com

Manipuler la boîte de visualisation SVG avec JavaScript (pas de bibliothèques)

J'essaie de modifier une fenêtre d'affichage d'éléments SVG en JavaScript. Fondamentalement, je dessine un arbre de recherche binaire, et quand il devient trop large, je veux modifier la zone de vue pour effectuer un zoom arrière afin que l'arbre tienne dans la fenêtre. J'utilise actuellement:

if(SVGWidth>=1000){
  var a = document.getElementById('svgArea');
  a.setAttribute("viewbox","0 0 " + SVGWidth + " 300");
}

Le HTML c'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 également essayé d'utiliser setAttributeNS ('null', ...) mais cela ne semble pas fonctionner non plus. Une chose étrange que j'ai remarquée est que lorsque j'alerte (a) cela donne [objet SVGSVGElement] qui semble étrange. Toute aide est appréciée.

javascriptsvgviewbox
32
Andrew Clear

Ce serait bien 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");

C'est peut-être parce que viewBox est sensible à la casse?

65
Anthony

Vous avez une erreur dans votre code: "viewbox" est différent de "viewBox" ... B est en majuscule. Changez le code en:

a.setAttribute("viewBox","0 0 " + SVGWidth + " 300");
8
LUISAO