Ottenimento di un viewbox SVG originale tramite javascript

Question

Il nostro sistema carica i file SVG in modo programmatico in HTML tramite AJAX. Un tipico file SVG inizia con:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0,0 65415,41616' xml:space='preserve' height='50.000cm' width='50.000cm' xmlns:xlink='http://www.w3.org/1999/xlink 

Ma stranamente in JavaScript sembra che ci sia alcun modo di ottenere questo 'viewBox' indietro dal SVG DOM - sia come una stringa, o come un insieme di valori. In Mozilla, ad esempio, firebug segnala che il nodo svg ha 5 dei 6 attributi che specifichiamo - vale a dire: xmlns, xml: spazio, altezza, larghezza e xmlns: xlink. Ma ViewBox manca in modo evidente da questo elenco.

È comunque necessario recuperare questo valore a livello di codice? - dove si trova nel DOM SVG? (Non possiamo introdurre librerie di terze parti).

Answer 1

Vorrete dare un'occhiata all'interfaccia SVGFitToViewBox, che specifica la proprietà viewBox. L'interfaccia per gli elementi svg, SVGSVGElement, estende tale interfaccia, in modo che possa essere la proprietà che stai cercando.

Answer 2

1. Vai http://phrogz.net/SVG/svg_in_xhtml5.xhtml
2. aprire il Web console del browser

3. Digitare il codice:

   var svg = document.querySelector('svg'); 
   var box = svg.getAttribute('viewBox'); 
   box.split(/\s+|,/); 
   

4. osservare la risposta gloriosa:

   ["-350", "-250", "700", "500"] 
   

5. In alternativa, digitare il codice:

   var box = svg.viewBox.baseVal; 
   [ box.x, box.y, box.width, box.height ] 
   

6. osservare la risposta gloriosa:

   [ -350, -250, 700, 500 ] 
   

In altre parole: sì, è possibile ottenere il viewBox dal DOM, sia come standard DOM 2 attribute così come un explicit ECMASCript binding.