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 は null のままですが、SVG DOM へのアクセスはありません。それが私が望んでいることです。

私は SVG インライン バリアントをテストしていませんが、可能であればそのルートをたどる必要はありません。

私の前にこの道をたどり、道に沿って下草を突き破った人がいるなら、あなたの洞察は非常に高く評価されます.

4

1 に答える 1

2

<object>要素の onload イベントが発生するまで、 contentDocument にアクセスしようとしないでください。TheClass.setViewBox 呼び出しを onload ハンドラに移動してみてください。

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