Obtener el tamaño de los gráficos SVG por javascript

Question

Para agregar un gráfico svg en la página html, es común usar una etiqueta de objeto para envolverlo 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 no utiliza los atributos de ancho y alto en la etiqueta del objeto, el svg se mostrará a tamaño completo. Normalmente obtengo archivos svg de Open Graphics Library para pruebas. ¿Hay alguna manera de obtener el tamaño de svg usando JavaScript? ¿O tal vez debería mirar el archivo svg xml para averiguar el tamaño de la etiqueta de svg superior?

Answer 1

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

Es posible obtener acceso al SVG DOM al que hace referencia un objeto HTML: siempre que el archivo SVG esté en el mismo dominio (de lo contrario, esto sería una vulnerabilidad de seguridad. Si su etiqueta de objeto tiene id = " myobj " lo harías:

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

Luego, puede obtener acceso al ancho / alto del elemento svg mediante:

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

Tenga en cuenta que estos atributos pueden ser cosas como '' 100px '', '' 300 '', '' 200em '', '' 40mm '', '' 100% '' así que debes analizarlo cuidadosamente.

Answer 2

> ¿Hay alguna forma de obtener el tamaño de svg usando JavaScript?

No y sí.

No:

JavaScript no podrá acceder al contenido del archivo SVG que se encuentra en el navegador.

Por lo tanto, no sería posible tener una página que contenga una imagen SVG arbitraria y luego hacer que JavaScript determine algo a partir del archivo SVG.

Los únicos datos que JS puede acceder que contengan dentro del DOM de la página: el marcado original más cualquier modificación relacionada con JS al DOM. Puede acceder a los atributos del elemento objeto y los nodos descendientes, pero eso no le dará visibilidad de nada más de lo que puede ver si observa el marcado de la página.

Sí :

JS (en los navegadores modernos) puede analizar cualquier cadena XML en un DOM y luego acceder al contenido utilizando métodos basados ??en DOM.

Puede obtener el contenido del archivo SVG emitiendo una solicitud de estilo xmlHttpRequest (es decir, JS realiza un HTTP GET en la URL del archivo SVG). JS tendría la cadena XML completa del archivo SVG y luego podrá acceder a cualquier cosa que desee.

> ¿O tal vez debería mirar el archivo svg xml para averiguar el tamaño de la etiqueta svg superior?

Esto sería más factible con diferencia.

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

Hacer que JS recupere el contenido XML del 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 lado del servidor de contenido XML de SVG, determinar un ancho y alto adecuados y luego agregar dinámicamente los atributos width y height antes de devolver el marcado al navegador. tu mejor apuesta.

Answer 3

ES6 : utilizando async / await puede hacerlo de forma secuencial

async function getImage(url) {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    });
}

y usar la función anterior:

let img = await getImage("yourimage.svg");
let w = img.width;
let h = img.height; 

Puede usarlo siempre que el archivo SVG esté en el mismo dominio (detalles aquí ).

Answer 4

  

¿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 manejo:

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); 

Eso debería devolver el tamaño de archivo de su svg o cualquier otro archivo sin problemas. La configuración del servidor es lo único que podría interferir.