Obtener tamaño de los gráficos SVG mediante javascript

Question

Para añadir un SVG de gráficos en la página HTML, es común el uso de etiqueta de objeto para envolver así:

<object id="svgid" data="mysvg.svg" type="image/svg+xml" 
    wmode="transparent" width="100" height="100"> 

this browser is not able to show SVG: <a linkindex="3" 
href="http://getfirefox.com">http://getfirefox.com</a> 
is free and does it! 
If you use Internet Explorer, you can also get a plugin: 
<a linkindex="4" href="http://www.adobe.com/svg/viewer/install/main.html"> 
http://www.adobe.com/svg/viewer/install/main.html</a> 

</object> 

Si usted no utiliza atributos de anchura y altura en el etiqueta de objeto, la svg se mostrará en tamaño completo. Normalmente obtengo archivos svg de Open Graphics Library para probarlos. ¿Hay alguna forma de obtener el tamaño de svg usando JavaScript? O tal vez debería mirar el archivo XML SVG para averiguar el tamaño de la etiqueta de la parte superior SVG?

Answer 1

> ¿Hay alguna manera de obtener el tamaño de SVG mediante el uso de JavaScript?

No y sí.

No:

JavaScript no será capaz de acceder a los contenidos de los archivos SVG que están sentados en el navegador.

Así que no sería posible tener una página que contenga una imagen SVG arbitraria y luego tener JavaScript para determinar algo desde el archivo SVG.

Los únicos datos JS puede acceder a él que contenían dentro de DOM de la página: el marcado original y las modificaciones relacionadas con el JS para el DOM. Se podía acceder a los atributos del elemento object y nodos descendientes, pero eso no va a dar visibilidad a nada más de lo que se puede ver si nos fijamos en la página de marcado a sí mismo.

Sí:

JS (en los navegadores modernos) puede analizar cualquier cadena XML en un DOM y luego acceder a los contenidos empleando métodos basados ​​en DOM.

Puede obtener el contenido del archivo SVG emitiendo una solicitud xmlHttpRequest-style (es decir, JS realiza un HTTP GET en la URL del archivo SVG). JS tendría entonces la cadena XML completa del archivo SVG y luego puede acceder a todo lo que quiera.

> ¿O quizás debería simplemente mirar el archivo svg xml para averiguar el tamaño de la etiqueta superior svg?

Esto sería más factible por el momento.

La única solución basada en JS requeriría que JS realizara una solicitud GET en la URL del archivo SVG (como anteriormente), lo que es poco probable que sea factible: cada carga de página puede dar como resultado la descarga doble de cada archivo SVG y el El análisis del XML de SVG en un DOM por JS podría requerir demasiados recursos.

Tener JS recuperar el contenido XML de SVG y analizarlo en un DOM para recuperar solo las dimensiones de la imagen es un poco exagerado. Es perfectamente posible, pero generalmente no es práctico.

Consultar el contenido XML del SVG del lado del servidor, determinar un ancho y alto adecuados y luego agregar dinámicamente los atributos width y height antes de devolver el marcado al navegador sería su mejor opción.

Answer 2

Ver http://dev.opera.com/articles/view/svg-evolution-not-revolution/?page=2

Es posible acceder al DOM SVG referenciado por un archivo HTML: objeto, siempre y cuando el archivo SVG es en el mismo dominio (de lo contrario esto sería una vulnerabilidad de seguridad.Si la etiqueta de objeto tiene id = "myObj" puede hacer:

var obj = document.getElementById("myobj"); // reference to the object tag 
var svgdoc = obj.contentDocument; // reference to the SVG document 
var svgelem = svgdoc.documentElement; // reference to the SVG element 

entonces se puede obtener acceso al ancho del elemento SVG/altura por:

svgelem.getAttribute("width") 
svgelem.getAttribute("height") 

Tenga en cuenta que estos atributos pueden ser cosas como "100px", "300", "200em", "40mm", "100%", por lo que debe analizarlo detenidamente.

Answer 3

¿Hay alguna manera de obtener el tamaño de svg por usando JavaScript?

SÍ

var filesize = function(url, requestHandler) { 
    var requestObj = new XMLHttpRequest(); 
    requestObj.open('head', address, true); 
    requestObj.onreadystatechange = callback; 
    requestObj.send(null); 
}; 

Ahora, una función de tratamiento:

var requestHandler = function(result) { 
    if (this.readyState === 1) { 
     this.abort(); 
    } 
    return this.getResponseHeader("Content-length"); 
}; 

var size = fileSize("http://whatever.org/someSVGFile.svg", requestHandler); 
alert(size); 

que debe devolver el tamaño del archivo de su SVG o cualquier otro archivo sin ningún problema. La configuración del servidor es lo único que podría interferir.