2

我正在尝试显示缩放到对象大小的 SVG，以便缩放 600x600 svg 以适应 500x500 对象或 300x300 任何东西。这一切在 FireFox 中都可以正常工作，但 Safari 和 Chrome (Webkit) 只是裁剪 SVG

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

像 Chrome 一样将 svgElem 变量解释为 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

但我明白了——但为什么呢？我的谷歌搜索活动没有说明这个问题。

FireFox 将其解释为：作为正确的 SVG DOM，整个 SVG 文件可以按照您的期望进行扩展

只是先发制人，我已经走上了这条路线，更糟糕的是，这两行都返回 null svgDoc = objectSVG.getSVGDocument(); svgDoc = objectSVG.contentDocument;

FireFox 很好 Safari 和 Chrome 无法缩放

我可以通过缩放工作来做到这一点，但 svgDoc 仍然为空，但无法访问 SVG DOM，这就是我想要的。

我没有测试过 SVG 内联变体，但如果可能的话，我真的不想走那条路。

如果有人在我之前走过这条路，一路穿过灌木丛，那么您的见解将不胜感激。

4

1 回答 1

2

You shouldn't try to access the contentDocument until the onload event of the <object> element has fired. Try moving the TheClass.setViewBox call into the onload handler e.g.

<object onload="TheClass.setViewBox..."
于 2013-03-28T11:41:32.383 回答