Obtención de un viewBox SVG original a través de javascript

Question

Nuestro sistema carga archivos SVG mediante programación en HTML a través de AJAX. Un típico archivo SVG comienza 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 

Pero extrañamente en JavaScript no parece haber ninguna manera de conseguir este "viewBox atrás desde el DOM SVG - ya sea como una cadena, o como un conjunto de valores. Debajo de Mozilla, por ejemplo, firebug informa que el nodo svg tiene 5 de los 6 atributos que especificamos, a saber: xmlns, xml: espacio, alto, ancho y xmlns: xlink. Pero ViewBox es notoriamente ausente de esta lista.

¿Hay alguna forma de recuperar programáticamente este valor? - ¿Dónde está en SVG DOM? (No podemos introducir bibliotecas de terceros).

Answer 1

Deberá echar un vistazo a la interfaz SVGFitToViewBox, que especifica la propiedad viewBox. La interfaz para elementos svg, SVGSVGElement, amplía esa interfaz, por lo que puede ser la propiedad que está buscando.

Answer 2

1. Ir a http://phrogz.net/SVG/svg_in_xhtml5.xhtml
2. Abra su navegador web consola

3. Tipo del código:

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

4. Observar la gloriosa respuesta:

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

5. alternativa, escriba la código:

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

6. observar la respuesta gloriosa:

   [ -350, -250, 700, 500 ] 
   

En otras palabras: sí, se puede obtener el viewBox del DOM, tanto como standard DOM 2 attribute así como un explicit ECMASCript binding.