Manipolare la viewbox SVG con JavaScript (senza librerie)

Sto tentando di modificare una viewbox di elementi SVG in JavaScript. Fondamentalmente, sto disegnando un albero di ricerca binaria, e quando diventa troppo largo, voglio modificare la viewbox per rimpicciolire in modo che l'albero si adatti alla finestra. Attualmente sto usando:Manipolare la viewbox SVG con JavaScript (senza librerie)

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

L'HTML è:

<svg id="svgArea" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="1000" height="300" viewBox="0 0 1000 300">

Ho anche provato con setAttributeNS ('null', ...), ma che non sembrano funzionare. Una cosa strana che ho notato è che quando allerta (a) dà [oggetto SVGSVGElement] che sembra strano. Qualsiasi aiuto è apprezzato.

fonte

2012-04-10 Andrew Clear

si può sapere perché non si desidera utilizzare le librerie? –

Avrei dovuto aggiungere, SVGWidth è probabilmente un nome di variabile errato, dovrebbe essere solo treeWidth. Inoltre, l'html per SVG è:

Non sto utilizzando le librerie perché mi sto concentrando sull'apprendimento di JavaScript. Il mio prossimo progetto aggiungerò delle librerie, ma ho pensato che sarebbe meglio iniziare con JavaScript nativo. –

Sarebbe bello vedere il contesto del SVG, ma le seguenti funzionato per me con un documento SVG puro:

shape = document.getElementsByTagName("svg")[0]; 
shape.setAttribute("viewBox", "-250 -250 500 750");

Forse è perché viewBox è maiuscole e minuscole?

fonte

2012-04-10 08:05:17 Anthony

+15

Maiuscole e minuscole. Sigh .... –

Guardalo in questo modo, se non fosse stato così facile, sarebbe stato più difficile. E non ho mai provato a fare confusione con gli attributi degli elementi svg attuali fino ad ora, quindi entrambi abbiamo capito qualcosa. – Anthony

Ho fatto lo stesso errore. –

c'è un errore nel codice: "viewBox" è diverso da "viewBox" ... B è in maiuscolo. Modificare il codice in:

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

fonte

2014-10-17 18:05:47 LUISAO

Bene, penso che il modo in cui la risposta è ora non risponda alla domanda. La "b" era la ragione per cui non funzionava. Tuttavia, user3434597 dovrebbe aver letto prima la risposta precedente di Anthony. Forse rimuoverà questo. – akauppi

Manipolare la viewbox SVG con JavaScript (senza librerie)

risposta

Problemi correlati