通过Javascript访问Chrome和Safari中的SVG DOM [英] Gaining access to the SVG DOM in Chrome and Safari through Javascript

查看:83
本文介绍了通过Javascript访问Chrome和Safari中的SVG DOM的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图显示按对象大小缩放的SVG,以便将600x600 svg缩放为适合500x500对象或300x300的大小. 所有这些在FireFox中都可以正常运行,但是Safari和Chrome(Webkit)只能裁剪SVG

I'm trying to display an SVG scaled to the size of the object so a 600x600 svg get scaled to fit a 500x500 object or a 300x300 whatever. This all works just fine in FireFox but Safari and Chrome (Webkit) just crop the 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中调试时,此行

When debug in Safari this line

var svgElem = svgDoc.documentElement;

与Chrome一样,将svgElem变量解释为HTMLHtmlElement

interrepts the svgElem variable as an HTMLHtmlElement as does Chrome

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浏览器会报告以下内容

Chrome does report the following

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

但是我明白了-但是为什么呢?我的Google搜寻活动对此事一无所知.

But I get that - but why? My Googling activities shed no light on the matter.

FireFox将其解释为: 作为适当的SVG DOM,整个SVG文件都可以按您期望的方式扩展

FireFox interrepts it as : As proper SVG DOM the whole SVG file can be expanded as you'd expect

只是抢占了我已经走的路,更糟糕的是,这两行都返回null svgDoc = objectSVG.getSVGDocument(); svgDoc = objectSVG.contentDocument;

Just preempt I've been down the route already that even worse both these lines both return null svgDoc = objectSVG.getSVGDocument(); svgDoc = objectSVG.contentDocument;

FireFox是很好的Safari,Chrome无法扩展

FireFox is fine Safari and Chrome don't scale

我可以使用和进行缩放,但是svgDoc仍然为null,但是无法访问SVG DOM,这就是我想要的.

I can do it with an and scaling works but the svgDoc remains null but there's no access to the SVG DOM and that's what I want.

我还没有测试过SVG内联变体,但我真的不希望尽可能走那条路.

I've not tested the SVG inline variant but I really don't want to have to go down that route if at all possible.

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

If anybody out there has been down this path before me, thrashing through the undergrowth along the way, then your insights would be very much appreciated.

推荐答案

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

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

这篇关于通过Javascript访问Chrome和Safari中的SVG DOM的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆