Margin-Auto: viewBox per JS verändern

Hi,

ich möchte nach dem Laden meiner SVG-Seite per Javascript die viewBox des gesamten Dokumentes so anpassen, dass sämtliche enthaltenen Elemente rein passen.
Mein Ansatz

svgdoc=load_evt.target.ownerDocument;
svgroot=svgdoc.documentElement;
}

function showit(){
 alert (svgroot.viewBox);
}

fördert nur zu Tage, dass die Viewbox ein Object vom Typ SVGAnimatedRect ist. Wie kann ich die Angaben per JS auslesen und neu setzen?

Ich habe über die Suche http://svgmob.datenverdrahten.de/w4n/?cc=LG&sc=2 gefunden, konnte aber nicht nachvollziehen, wie da die Skalierung erfolgt, da die Viewbox-Anagen immer gleich sind, egal wie man den Parameter in der URL setzt.

TIA

Margin-Auto

  1. Tach Margin-Auto,

    ich möchte nach dem Laden meiner SVG-Seite per Javascript die viewBox des gesamten Dokumentes so anpassen, dass sämtliche enthaltenen Elemente rein passen.

    Warum nicht bereits im Ausgangsdokument entsprechende Vorgaben festlegen? Setze die viewBox-Parameter in Bezug zu den internen Koordinaten und dazu height und width auf 100% [siehe Flagge von Norwegen].

    Wie kann ich die Angaben per JS auslesen und neu setzen?

    JS-Zugriff ist möglich (hier werden einfach alle Parameter mit 2 multipliziert):

      
    var vbox=svgroot.getAttribute("viewBox").split(" ");  
    for(var i=0; i<vbox.length; i++)vbox[i]*=2;  
    svgroot.setAttribute("viewBox",vbox.join(" "));
    

    Ich habe über die Suche http://svgmob.datenverdrahten.de/w4n/?cc=LG&sc=2 gefunden, konnte aber nicht nachvollziehen, wie da die Skalierung erfolgt, da die Viewbox-Anagen immer gleich sind, egal wie man den Parameter in der URL setzt.

    Serverseitig geändert werden jeweils die Angaben von height und width mittels Faktor, die internen Koordinaten bleiben konstant zum Bezugsmodell S65.

    Man liest sich,
    svg4you

    1. Hi,

      Warum nicht bereits im Ausgangsdokument entsprechende Vorgaben festlegen? Setze die viewBox-Parameter in Bezug zu den internen Koordinaten und dazu height und width auf 100% [siehe Flagge von Norwegen].

      Dazu muss ich aber die Koordinaten und Größe aller Elemente im Dokument kennen. Die Elemente kommen serverseitig inkl. Koordinaten aus einer DB und da wollte ich eben die Anpassung des Maßstabs zum client verlagern indem ich dort alle Elemente durchlaufe, die Abmessungen festhalte und die Viewbox anpasse.
      Weitere bessere Ideen sind gerne willkommen :-)

      JS-Zugriff ist möglich [...]

      Danke, das funktioniert.

      Margin-Auto