javascript - container - svg viewbox español

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

Question

Nuestro sistema carga archivos SVG programáticamente en HTML a través de AJAX. Un archivo SVG típico 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, curiosamente, en JavaScript parece que no hay forma de recuperar este ''viewBox'' del SVG DOM, 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 brilla por su ausencia en 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á echarle un vistazo a la interfaz SVGFitToViewBox , que especifica la propiedad viewBox . La interfaz para los elementos svg , SVGSVGElement , amplía esa interfaz, por lo que puede ser la propiedad que está buscando.

Answer 2

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

3. Escribe el código:

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

4. Observe la respuesta gloriosa:

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

5. Alternativamente, escribe el código:

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

6. Observe la respuesta gloriosa:

   [ -350, -250, 700, 500 ]

En otras palabras: sí, puede obtener viewBox del DOM, tanto como un atributo DOM 2 estándar como un enlace ECMASCript explícito .