Ottieni dimensioni della grafica SVG tramite javascript

Question

Per aggiungere una grafica svg nella pagina html, è comune usare il tag object per avvolgerla in questo modo:

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

Se non si utilizzano gli attributi di larghezza e altezza nel tag oggetto, lo svg verrà visualizzato a schermo intero. Normalmente ottengo file svg da Open Graphics Library per i test. C'è un modo per ottenere le dimensioni di svg utilizzando JavaScript? O forse dovrei solo guardare il file svg xml per scoprire la dimensione dal tag svg in alto?

Answer 1

Vedi http: //dev.opera. com / articles / view / svg-evoluzione-non-rivoluzione /? page = 2

È possibile ottenere l'accesso al DOM SVG a cui fa riferimento un oggetto HTML: purché il file SVG si trovi sullo stesso dominio (altrimenti si tratterebbe di una vulnerabilità di sicurezza. Se il tag oggetto ha id = " myobj " faresti:

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

Quindi puoi accedere alla larghezza / altezza dell'elemento svg tramite:

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

Nota che questi attributi possono essere cose come "100px", "300", "200em", "40mm", "100%" quindi è necessario analizzarlo attentamente.

Answer 2

> C'è un modo per ottenere le dimensioni di svg usando JavaScript?

No e sì.

No

JavaScript non sarà in grado di accedere al contenuto del file SVG che si trova nel browser.

Quindi non sarebbe possibile avere una pagina contenente un'immagine SVG arbitraria e quindi fare in modo che JavaScript determini qualcosa dal file SVG stesso.

Gli unici dati a cui JS può accedere sono quelli contenuti nel DOM della pagina: il markup originale più eventuali modifiche al DOM di JS. Puoi accedere agli attributi e ai nodi discendenti dell'elemento object , ma questo non ti darà visibilità di qualcosa di più di quello che puoi vedere se guardi il markup della pagina da te.

Sì

JS (nei browser moderni) può analizzare qualsiasi stringa XML in un DOM e quindi accedere al contenuto utilizzando metodi basati su DOM.

È possibile ottenere il contenuto del file SVG emettendo una richiesta in stile xmlHttpRequest (ovvero JS esegue un HTTP GET sull'URL del file SVG). JS avrebbe quindi la stringa XML completa del file SVG e potrai quindi accedere a tutto ciò che ti piace.

> O forse dovrei solo guardare il file svg xml per scoprire la dimensione dal tag svg in alto?

Questo sarebbe di gran lunga più fattibile.

L'unica soluzione basata su JS richiederebbe a JS di eseguire una richiesta GET sull'URL del file SVG (come sopra), che è improbabile che sia fattibile - ogni caricamento della pagina potrebbe comportare il doppio download di ogni file SVG e l'analisi dell'XML dell'SVG in un DOM di JS potrebbe richiedere troppo risorse.

Avere JS recuperare il contenuto XML di SVG e analizzarlo in un DOM per recuperare solo le dimensioni dell'immagine è un po 'eccessivo. È perfettamente possibile, ma generalmente non pratico.

Eseguire una query sul lato del contenuto XML di SVG, determinare una larghezza e un'altezza adeguate e quindi aggiungere dinamicamente gli attributi width e height prima di restituire il markup al browser sarebbe la tua scommessa migliore.

Answer 3

ES6 : utilizzando asincronizza / attende puoi farlo in modo sequenziale

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

e usa la funzione sopra:

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

Puoi usarlo fintanto che il file SVG si trova sullo stesso dominio (dettagli qui ).

Answer 4

  

Esiste un modo per ottenere le dimensioni di svg   stai usando JavaScript?

YES

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

Ora una funzione di gestione:

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

Questo dovrebbe restituire la dimensione del tuo svg o qualsiasi altro file senza intoppi. La configurazione del server è l'unica cosa che potrebbe interferire.