JavaScriptでSVGグラフィックスのサイズを取得する

StackOverflow https://stackoverflow.com/questions/231679

  •  04-07-2019
  •  | 
  •  

質問

htmlページにsvgグラフィックを追加するには、通常、オブジェクトタグを使用して次のようにラップします。

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

objectタグで幅と高さの属性を使用しない場合、svgはフルサイズで表示されます。通常、テスト用にOpen Graphics Libraryからsvgファイルを取得します。 JavaScriptを使用してsvgのサイズを取得する方法はありますか？または、svg xmlファイルを見て、一番上のsvgタグからサイズを調べる必要があるかもしれません。

正しい解決策はありません

他のヒント

http：//dev.operaを参照してください。 com / articles / view / svg-evolution-not-revolution /？page = 2

SVGファイルが同じドメインにある限り、HTML：objectが参照するSVG DOMにアクセスすることが可能です（そうでない場合、これはセキュリティの脆弱性です。オブジェクトタグにid =＆quot; myobj＆quot;がある場合あなたがするだろう：

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

その後、次の方法でsvg要素の幅/高さにアクセスできます：

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

これらの属性は、「100px」、「300」、「200em」、「40mm」、「100％」などの可能性があることに注意してください。慎重に解析する必要があります。

＆gt; JavaScriptを使用してsvgのサイズを取得する方法はありますか？

いいえ、はい。

いいえ：

JavaScriptは、ブラウザーにあるSVGファイルのコンテンツにアクセスできません。

したがって、任意のSVG画像を含むページを作成し、SVGファイル自体からJavaScriptが何かを判断することはできません。

JSがページのDOM内に含まれるデータにアクセスできるのは、元のマークアップに加えてDOMに対するJS関連の変更だけです。 object 要素の属性と子孫ノードにアクセスすることはできますが、ページマークアップを自分で見た場合に見ることができるもの以上の可視性は得られません。

はい：

JS（最新のブラウザ）は、XML文字列を解析してDOMにし、DOMベースのメソッドを使用してコンテンツにアクセスできます。

xmlHttpRequestスタイルのリクエストを発行することでSVGファイルのコンテンツを取得できます（つまり、JSはSVGファイルのURLでHTTP GETを実行します）。これで、JSはSVGファイルの完全なXML文字列を取得し、好きなものにアクセスできます。

＆gt;または、svg xmlファイルを見て、一番上のsvgタグからサイズを確認する必要がありますか？

これははるかに実行可能です。

唯一のJSベースのソリューションでは、JSがSVGファイルのURLに対してGETリクエストを実行する必要があり（上記のとおり）、これは現実的ではありません。 JSによるSVGのXMLのDOMへの変換は、リソースを大量に消費する可能性があります。

JSがSVGのXMLコンテンツを取得し、それをDOMに解析して画像の寸法のみを取得するのは少しやり過ぎです。完全に可能ですが、一般的には実用的ではありません。

SVGのXMLコンテンツサーバー側を照会し、適切な幅と高さを決定し、ブラウザーにマークアップを返す前に width および height 属性を動的に追加しますあなたの最善策。

ES6 ： async / await を使用すると、シーケンスのような方法でこれを実行できます

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

そして上記の関数を使用：

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

SVGファイルが同じドメインにある限り使用できます（詳細はこちら）。

>
  

svgのサイズを取得する方法はありますか   JavaScriptを使用していますか？

はい 

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

処理関数の追加：

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

これは、svgまたはその他のファイルのファイルサイズを問題なく返すはずです。サーバー構成のみが干渉する可能性があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top