SVG技巧：How to use SVG Include SVG

為方便做程式管理，「物件」是最理想的管理方式，但在Firefox的某些限制上，使用html + svg 的架構撰寫程式，在function取用上會產生function無法直接被取用的問題。但若是使用「SVG Include SVG」的方式，就不會產生資源取用上的難題。

google了數天，外文資源中實在找不到「SVG Include SVG」的教學，大部份都是「Html include SVG」，試著往xml的方向搜尋後，找到以下讀取外部xml檔案的程式碼法 ：

function getDoc(){
　var XmlsReq;
　if(window.XMLHttpRequest){
　　XmlsReq = new XMLHttpRequest();
　}else if(window.ActiveXObject){
　　try{
　　　XmlsReq = new ActiveXObject("Msxml2.XMLHTTP");
　　} catch(e){
　　　XmlsReq = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　}
　if(!XmlsReq) return;
　XmlsReq.open('GET','test.xml');
　XmlsReq.send(null);
　var xmldoc= XmlsReq.responseXML;
}

暫且不去理會我們所要讀取的xml檔案的內容，因為這裡的動作是要「讀取」外部的xml文件檔案，所以在執行前一定要確定路徑資料夾中已經建立必要的外資檔案。以上程式片段，最後宣告的xmldoc變數內容，即為同層資料夾之下所置放的「test.xml」。

接下來我們做一些小幅的修改：

var XmlsReq;

function getDoc(){
　if(window.XMLHttpRequest){
　　XmlsReq = new XMLHttpRequest();
　}else if(window.ActiveXObject){
　　try{
　　　XmlsReq = new ActiveXObject("Msxml2.XMLHTTP");
　　} catch(e){
　　　XmlsReq = new ActiveXObject("Microsoft.XMLHTTP");
　　}
　}
　if(!XmlsReq) return;
　XmlsReq.open('GET','test.svg');
　XmlsReq.send(null);
　setTimeout("getSVG()",10);
}

function getSVG(){
　var svgDoc= XmlsReq.responseXML;
}

以上程式片段，當然…如果取得的SVG內容將會被大量使用，svgDoc的宣告最好放到外部，但在這裡僅做簡單的教學。此時 svgDoc可以直接被當成一個SVG document使用，也就是說可以直接對這個變數做「getElementById」的動作。