Holen Größe von SVG-Grafiken von Javascript

Question

Um eine SVG-Grafiken in HTML-Seite hinzufügen, ist es üblich, Objekt-Tag zu verwenden, um es so zu wickeln:

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

Wenn Sie keine Breite verwenden und Höhenattribute in dem Objekt-Tag, wird der SVG in voller Größe angezeigt werden. Ich erhalte svg-Dateien von Open Graphics Library normalerweise zum Testen. Gibt es eine Möglichkeit svg Größe zu erhalten, indem mit Hilfe von JavaScript? Oder vielleicht sollte ich an der svg XML-Datei sehen nur die Größe von oben svg-Tag, um herauszufinden?

Answer 1

Siehe http: //dev.opera. com / articles / view / svg-evolution-nicht-Revolution /? page = 2

Es ist möglich, den Zugriff auf das SVG DOM durch einen HTML-Code verwiesen zu bekommen: das Objekt, solange die SVG-Datei auf der gleichen Domäne ist (sonst wäre dies ein Sicherheitsrisiko sein, wenn Ihr Objekt-Tag id = „myobj“ Sie hat. tun würde:

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

Dann können Sie Zugriff auf die Breite / Höhe des svg Element erhalten:

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

Beachten Sie, dass diese Attribute Dinge wie "100px" sein können, "300", "200em", "40 mm", "100%", so dass Sie es sorgfältig analysieren müssen.

Answer 2

> Gibt es eine Möglichkeit unter Verwendung von JavaScript svg Größe zu erhalten?

Nein und ja.

Nein:

JavaScript wird die SVG-Datei für den Zugriff auf Inhalte nicht in der Lage sein, die im Browser sitzen.

So wäre es nicht möglich sein, eine Seite zu haben, eine beliebige SVG-Datei enthält, und dann haben Sie JavaScript bestimmt etwas von der SVG-Datei selbst.

Die einzigen Daten, JS darauf zugreifen kann, die in der Seite des DOM enthalten: der Original-Markup sowie alle JS bezogenen Änderungen an den DOM. Sie könnten das object Element Attribute und absteigenden Knoten zugreifen, aber das wird Ihnen nicht Sichtbarkeit alles geben, mehr als das, was Sie sehen, wenn Sie auf der Seite Markup sehen sich selbst.

Ja

JS (in modernen Browsern) kann eine beliebige XML-String in ein DOM parsen und dann auf den Inhalt zugreifen mit DOM-basierten Methoden.

Sie könnten den SVG-Datei Inhalt erhalten, indem eine XMLHttpRequest-Stil Anforderung ausgeben (das heißt JS führt ein HTTP GET auf die URL der SVG-Datei). JS würde dann die volle XML-String des SVG-Datei und Sie können dann alles zugreifen Sie möchten.

> Oder vielleicht sollte ich an der svg XML-Datei sehen nur die Größe von oben svg-Tag, um herauszufinden?

Dies wäre möglich bei weitem.

Die einzige JS-basierte Lösung würde JS erfordert eine GET-Anfrage auf die SVG-Datei der URL (wie oben) durchzuführen, was machbar sein unwahrscheinlich ist - jede Seite Last in Doppel Herunterladen jede SVG-Datei zur Folge haben könnte, und das Parsing der XML des SVG in einen DOM von JS könnte werden ressourcenintensiv.

Mit der XML-Inhalte des SVG JS abrufen und in ein DOM parsen nur die Bildabmessungen abzurufen ist ein bisschen übertrieben. Es ist durchaus möglich, aber in der Regel nicht sinnvoll.

Die Abfrage des XML-Content-Server-Seite des SVG, eine geeignete Breite und Höhe zu bestimmen und dann das Hinzufügen dynamisch die width und height Attribute vor Markup an den Browser zurückkehr wäre die beste Wahl sein.

Answer 3

ES6 : Mit async/await Sie können dies tun, in sequenzartig

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

und verwenden Sie oben Funktion:

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

Sie können es verwenden, solange die SVG-Datei auf der gleichen Domain (Details hier ).

Answer 4

  

Gibt es eine Möglichkeit svg Größe zu erhalten, indem   Verwendung von JavaScript?

YES

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

Nun wird eine Bearbeitungsfunktion:

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

Das sollte die Dateigröße Ihrer svg oder jede andere Datei ohne Probleme zurück. Server-Konfiguration ist die einzige Sache, die stören könnte.