svg - ストレッチ inside an ウィンドウサイズに合わせて

Question

ウィンドウサイズに合わせるために、DOM内でsvgドキュメントを拡大しようとしています。

そのようです：

<div id="y">
    <div id="button"> click to zoom</div>
    <embed id="x" src="s17.svg" >
    <script>
        var btn= document.getElementById("button");
        btn.addEventListener('click',function(){
        var z= document.getElementsByTagName("embed")[0];
        var y = z.getSVGDocument();
        y.lastChild.setAttribute("viewBox","0 0 "+window.innerWidth+" "+window.innerHeight);
                                               },false);

    </script>
</div>

css：

#x{
    height:100%;
    width:100%;
    overflow:hidden;
}
#y{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
}

これは機能していません...私は何が間違っているのですか？

Answer 1

すべてのブラウザーは、SVG サポートをまったく異なる方法で処理します。objectの代わりにタグを使用するのが最善の策だと思いますがembed、各ブラウザで正しく表示するには、ハッキングを行う必要があります。 このリンクとこのリンクには、クロスブラウザーで動作させるための役立つ情報がいくつかあります。