SVG Viewbox mit JavaScript manipulieren (keine Bibliotheken)

Ich versuche eine SVG Elemente Viewbox in JavaScript zu ändern. Grundsätzlich zeichne ich einen binären Suchbaum, und wenn er zu weit wird, möchte ich die Viewbox so verkleinern, dass der Baum in das Fenster passt. Ich bin derzeit mit:SVG Viewbox mit JavaScript manipulieren (keine Bibliotheken)

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

Die HTML ist:

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

Ich habe auch versucht setAttributeNS mit ('null', ...), aber das scheint nicht zu funktionieren. Eine seltsame Sache, die ich bemerkt habe, ist, dass wenn ich alarmiere (a) es [object SVGSVGElement] gibt, was merkwürdig erscheint. Jede Hilfe wird geschätzt.

Quelle

2012-04-10 Andrew Clear

kann ich wissen, warum Sie Bibliotheken nicht verwenden möchten? –

Ich hätte hinzufügen sollen, SVGWidth ist wahrscheinlich ein falscher Variablenname, sollte nur treeWidth sein. Das HTML für die SVG ist auch:

Ich benutze keine Bibliotheken, weil ich mich auf das Lernen von JavaScript konzentriere. Mein nächstes Projekt werde ich in Bibliotheken hinzufügen, aber ich dachte, es wäre am besten, mit nativem JavaScript zu beginnen. –

Es wäre gut, den Kontext des svg zu sehen, aber die folgenden für mich mit einem reinen SVG-Dokument gearbeitet:

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

Vielleicht ist es, weil viewBox case-sensitive ist?

Quelle

2012-04-10 08:05:17 Anthony

+15

Groß- und Kleinschreibung war es. Seufz .... –

Schau es dir so an, wenn es nicht so einfach gewesen wäre, wäre es härter gewesen. Und ich habe nie versucht, mit den tatsächlichen SVG-Elementattributen zu verfahren, also haben wir beide etwas herausgefunden. – Anthony

Ich machte den gleichen Fehler. –

Sie haben einen Fehler in Ihrem Code: "viewbox" ist anders als "viewBox" ... B ist in Großbuchstaben. Ändern Sie den Code in:

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

Quelle

2014-10-17 18:05:47 LUISAO

Nun, ich denke, die Antwort auf die Frage beantwortet die Frage. Das "b" war der Grund, warum es nicht funktioniert hat. Benutzer3434597 sollte jedoch zuerst die Antwort von Anthony gelesen haben. Vielleicht wird er diesen entfernen. – akauppi

SVG Viewbox mit JavaScript manipulieren (keine Bibliotheken)

Antwort

Verwandte Themen