Obtenir la taille des graphiques SVG en javascript

Question

Pour ajouter un graphique svg dans une page html, il est courant d'utiliser une balise d'objet pour l'envelopper de la manière suivante:

<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 vous n'utilisez pas les attributs width et height dans la balise object, le svg sera affiché en taille réelle. Normalement, je reçois des fichiers svg de Open Graphics Library pour les tester. Est-il possible d'obtenir la taille de svg en utilisant JavaScript? Ou peut-être devrais-je simplement regarder le fichier XML svg pour connaître la taille de la balise svg supérieure?

Answer 1

Voir http: //dev.opera. com / articles / vue / svg-évolution-non-révolution /? page = 2

Il est possible d'accéder au DOM SVG référencé par un objet HTML: tant que le fichier SVG se trouve sur le même domaine (sinon, cela constituerait une faille de sécurité. Si votre balise d'objet a id = " myobj " vous feriez:

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

Ensuite, vous pouvez accéder à la largeur / hauteur de l'élément svg par:

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

Notez que ces attributs peuvent être des éléments tels que "100px", "300", "200em", "40mm", "100%" vous devez donc l’analyser avec soin.

Answer 2

> Existe-t-il un moyen d'obtenir la taille de svg en utilisant JavaScript?

Non et oui.

Non:

JavaScript ne pourra pas accéder au contenu du fichier SVG situé dans le navigateur.

Il ne serait donc pas possible d'avoir une page contenant une image SVG arbitraire et de laisser ensuite JavaScript déterminer quoi que ce soit à partir du fichier SVG lui-même.

Les seules données auxquelles JS peut accéder qui sont contenues dans le DOM de la page: le balisage d'origine plus les modifications apportées par le JS au DOM. Vous pouvez accéder aux attributs et aux nœuds descendants de l'élément object , mais cela ne vous donnera une visibilité supérieure à ce que vous pouvez voir si vous regardez vous-même le balisage de page.

Oui:

JS (dans les navigateurs modernes) peut analyser n'importe quelle chaîne XML dans un DOM puis accéder au contenu à l'aide de méthodes basées sur DOM.

Vous pouvez obtenir le contenu du fichier SVG en émettant une demande de style xmlHttpRequest (c’est-à-dire que JS exécute un HTTP GET sur l’URL du fichier SVG). JS aurait alors la chaîne XML complète du fichier SVG et vous pourrez alors accéder à tout ce que vous voulez.

> Ou peut-être devrais-je simplement regarder le fichier XML svg pour connaître la taille de la balise svg supérieure?

Cela serait de loin plus réalisable.

La seule solution basée sur JS nécessiterait que JS exécute une requête GET sur l'URL du fichier SVG (comme ci-dessus), ce qui est peu vraisemblable, car le chargement de chaque page peut entraîner le double téléchargement de chaque fichier SVG, ainsi que l'analyse des fichiers XML du SVG dans un DOM par JS pourrait être trop gourmand en ressources.

Exiger que JS récupère le contenu XML du SVG et l’analyse dans un DOM pour extraire uniquement les dimensions de l’image est un peu excessif. C'est parfaitement possible, mais généralement pas pratique.

Interroger le serveur XML Content du serveur SVG, déterminer une largeur et une hauteur appropriées, puis ajouter dynamiquement les attributs width et height avant de renvoyer des balises au navigateur votre meilleur pari.

Answer 3

ES6 : l'utilisation de async / wait vous permet d'effectuer cette opération de manière séquentielle

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

et utiliser la fonction ci-dessus:

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

Vous pouvez l'utiliser tant que le fichier SVG se trouve sur le même domaine (détails ici ).

Answer 4

  

Y a-t-il un moyen d'obtenir la taille de svg en   utiliser JavaScript?

OUI

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

Maintenant une fonction de traitement:

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

Cela devrait retourner la taille du fichier de votre svg ou de tout autre fichier sans accroc. La configuration du serveur est la seule chose qui pourrait interférer.