拉伸<embed>内的<svg>以适合窗口大小

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

所有浏览器都应该能够处理这个问题:

• 如果可能的话,在不使用脚本的情况下将viewBox添加到svg元素(示例中为s17.svg)
• 如果指定了svg元素,则删除svg元素的width和height属性
• preserveAspectRatio="none"即使css-viewport纵横比与viewBox纵横比不匹配,也要向svg元素添加一个属性以使其伸展.
• 将embed/iframe/object的宽度/高度设置为您想要的任何值,svg将自动拉伸以适合

如果您不想拉伸,那么您也可以preserveAspectRatio="xMidYMid slice"(填充整个视口,必要时切掉部分)或preserveAspectRatio="xMidYMid meet"(这是默认值,将svg置于视口中心并保持纵横比).

Answer 2

所有浏览器处理 SVG 支持的方式都完全不同。我认为最好的选择是使用object标签而不是embed，并且您仍然需要进行一些黑客操作才能使其在每个浏览器上看起来正确。 此链接和此链接提供了一些使其跨浏览器工作的有用信息。