Question

我正在尝试显示缩放到对象大小的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;

将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

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

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

只是抢先一步我已经走了路线，更糟糕的是这两条线都返回null svgDoc = objectSVG.getSVGDocument（）; svgDoc = objectSVG.contentDocument;

FireFox非常好Safari和Chrome无法扩展

我可以使用和缩放工作来完成它，但是svgDoc仍然为null，但是无法访问SVG DOM，这就是我想要的。

我没有测试SVG内联变体，但我真的不想在可能的情况下沿着这条路走下去。

如果有人在我面前沿着这条路走下去，一路上淹没了灌木丛，那么你们的见解将会非常受欢迎。

Answer 1

在<object>元素的onload事件触发之前，您不应尝试访问contentDocument。尝试将TheClass.setViewBox调用移动到onload处理程序，例如

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

通过Javascript获取Chrome和Safari中的SVG DOM访问权限

1 个答案: