通過Javascript獲取對Chrome和Safari中SVG DOM的訪問

我試圖顯示一個縮放到對象大小的SVG，因此600x600 svg會縮放以適合500x500對象或300x300任何內容。這所有的作品只是在Firefox，但Safari和Chrome（WebKit的）罰款只是裁剪SVG通過Javascript獲取對Chrome和Safari中SVG DOM的訪問

<div class="svg"> 
<object id="diagram" type="image/svg+xml" class="emb-diag" data="my.svg"> 
</object> 
</div> 


// Class method 
setViewBox : function(objectSVG, containerSize, viewboxSize) 
{ 
    objectSVG.setAttribute("width", containerSize); 
    objectSVG.setAttribute("height", containerSize); 

    var svgDoc; 
    if (typeof objectSVG.getSVGDocument != 'undefined') 
    { 
     svgDoc = objectSVG.getSVGDocument(); 
     if (svgDoc == null) 
     { 
      svgDoc = objectSVG.contentDocument; 
      if (svgDoc == null) 
      { 
       return; 
      } 
     } 
    } 
    else 
    { 
     svgDoc = objectSVG.contentDocument; 
     if (svgDoc == null) 
     { 
      return; 
     } 
    } 

    var svgElem = svgDoc.documentElement; 
    if (svgElem) 
    { 
     svgElem.setAttribute("viewBox", "0 0 " + viewboxSize + " " + viewboxSize); 
     svgElem.setAttribute("preserveAspectRatio", "xMinYMin meet"); 
    } 
}, 

TheClass.setViewBox(document.getElementById("diagram"), 500, 600);

當調試在Safari此行

var svgElem = svgDoc.documentElement;

interrepts的svgElem變量一樣的Chrome

的HTMLHtmlElement

svgDoc: HTMLDocument 
svgElem: **HTMLHtmlElement** 
accessKey: "" 
attributes: NamedNodeMap 
baseURI: "about:blank" 
childElementCount: 2 
childNodes: NodeList[2] 
children: HTMLCollection[2] 
classList: DOMTokenList 
className: "" 
clientHeight: 500 
clientLeft: 0 
clientTop: 0 
clientWidth: 500 
contentEditable: "inherit" 
dataset: DOMStringMap 
dir: ""

...

Chrome並重新端口如下

Resource interpreted as Document but transferred with MIME type image/svg+xml: 
"file:///my.svg". jquery.min.js:2 
(anonymous function) jquery.min.js:2 
f.Callbacks.o jquery.min.js:2 
f.Callbacks.p.fireWith jquery.min.js:2 
e.extend.ready jquery.min.js:2 
c.addEventListener.B

但我明白了 - 但爲什麼？我的谷歌搜索活動沒有提到這件事。

火狐interrepts它：作爲適當的SVG DOM整個SVG文件可以如你所期望

只是搶佔我一直在下降的航線已經是更糟這兩線都返回null擴大 svgDoc = objectSVG.getSVGDocument（）; svgDoc = objectSVG.contentDocument;

Firefox是罰款Safari和Chrome不會擴展

我可以用和縮放工作做，但在svgDoc保持爲空，但有對SVG DOM進不去，這就是我想要的。

我還沒有測試過SVG內聯變體，但我真的不希望如果可能的話必須沿着這條路線走。

如果有人在我面前走過這條路，沿着這條路穿過叢林，那麼你的見解將非常感激。

來源

2012-10-14 Paul Todd

的問題仍然有效，但周圍的工作是在這裏這只是讓我思考什麼是對的方式不同，其中（或以何種順序）的WebKit VS Mozilla瀏覽器加載SVG文件。 Curiouser and cursiouser！想了解發生了什麼事。 –

注意到上述工作對於Safari來說很好，但在Chrome中失敗。它也是OS X上Safari的上帝（可能是windows），但不是iOS。似乎是跨瀏覽器生態系統操縱SVG DOM的各種支持。 –

在<object>元素的onload事件被觸發之前，您不應該嘗試訪問contentDocument。嘗試將TheClass.setViewBox調用移入onload處理程序，例如

<object onload="TheClass.setViewBox..."

來源

2013-03-28 11:41:32

或者對於非內聯解決方案，添加一個addEventListener（請參閱示例：http://stackoverflow.com/questions/11434916/javascript-accessing-inner-dom-of-svg）。我也一直在Chrome中遇到null問題（沒有檢查Safari）。 –

通過Javascript獲取對Chrome和Safari中SVG DOM的訪問

回答

相關問題