獲取SVG圖形由JavaScript

在HTML頁面中添加一個SVG圖形的大小，它通常使用對象標記來包裝它像這樣：獲取SVG圖形由JavaScript

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

如果不使用寬度和高度屬性對象標籤，svg將以全尺寸顯示。通常我從Open Graphics Library獲取svg文件進行測試。有什麼辦法通過使用JavaScript來獲得svg的大小？或者，也許我應該看看svg xml文件以找出最上面的svg標籤的大小？

來源

2008-10-23 David.Chu.ca

>有什麼辦法通過使用JavaScript獲得svg的大小？

不，是的。

號：

的JavaScript將無法訪問都坐在瀏覽器中的SVG文件內容。

因此，不可能有一個包含任意SVG圖像的頁面，然後讓JavaScript從SVG文件本身中確定任何內容。

唯一的數據JS可以訪問它包含在頁面的DOM內：原始標記加上任何JS相關的DOM修改。您可以訪問object元素的屬性和後代節點，但如果您自己查看頁面標記，則不會讓您知道任何其他內容。

是：

JS（現代瀏覽器）可以解析任何XML字符串轉換成一個DOM，然後訪問使用基於DOM的方法的內容。

您可以通過發出xmlHttpRequest風格的請求（即JS對SVG文件的URL執行HTTP GET）來獲取SVG文件內容。然後，JS會擁有SVG文件的完整XML字符串，然後可以訪問任何你喜歡的東西。

>也許我應該只看svg xml文件以找出最上面的svg標籤的大小？

這會更可行。

唯一的基於JS的解決方案將需要JS執行對SVG文件的URL的GET請求（如上），這不太可能是可行的 - 每個頁面加載可能會導致雙重下載每個SVG文件，以及通過JS將SVG的XML解析爲DOM可能會佔用大量資源。

讓JS檢索SVG的XML內容並將其解析爲DOM以僅檢索圖像維度有點矯枉過正。這是完全可能的，但通常不實際。

查詢SVG的XML內容的服務器端，確定合適的寬度和高度，然後動態地添加之前返回標記到瀏覽器將是最好的選擇的width和height屬性。

來源

2008-10-24 14:42:21

「否」部分僅適用於它是跨源參考，請參閱http://stackoverflow.com/questions/231679/get-size-of-svg-graphics-by-javascript/1577890#1577890 – 2009-10-16 13:41:58

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

它有可能獲得訪問由HTML引用的SVG DOM：對象只要SVG文件在同一個域（否則這將是一個安全漏洞。如果你的對象標記具有ID =「MyObj中」你會做：

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％」，所以你需要仔細解析它。

來源

2009-10-16 12:54:00 codedread

只是警告：這在Internet Explorer（10）上不起作用：`obj.contentDocument`未定義。 – 2013-09-28 21:25:15

-5

有沒有什麼辦法讓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的文件大小或任何其他文件順利。服務器配置是唯一可能會干擾的事情。

來源

2010-10-17 04:10:33 Xaxis

這裏的大小是指尺寸，而不是磁盤空間。 – 2013-09-28 21:24:00

獲取SVG圖形由JavaScript

回答

相關問題