将<embed>中的<svg>拉伸以适应窗口大小

Question

我正在尝试将一个SVG文档在一个DOM中拉伸以适应窗口大小。就像这样：

<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;
}

这不起作用...我做错了什么？

- fogy

---

你使用的是哪个浏览器？不幸的是，IE9、Firefox、Chrome和Opera都以非常不同的方式处理这种情况。 - Dan

我本来希望它可以在所有浏览器上工作......我应该手动逐个调整SVG中的每个元素的比例吗？ - fogy

Answer 1

所有浏览器都应该能够良好地处理这个内容：

• 尽可能在不使用脚本的情况下，给SVG元素（例如您示例中的s17.svg）添加viewBox属性
• 如果指定了宽度和高度属性，请将其从SVG元素中删除
• 向SVG元素添加属性preserveAspectRatio="none"，使其能够拉伸，即使CSS视区的长宽比与viewBox的长宽比不匹配
• 将嵌入/iframe/object的宽度/高度设置为所需值，SVG会自动拉伸以适应

如果您不想进行拉伸，则也可以使用preserveAspectRatio="xMidYMid slice"（填充整个视口，必要时切掉部分）或preserveAspectRatio="xMidYMid meet"（这是默认值，将SVG置于视口中心并保持纵横比）。

- Erik Dahlström

Answer 2

所有浏览器对SVG支持的处理方式都完全不同。我认为你最好使用object标签而不是embed，并且你仍然需要进行一些调整才能使其在每个浏览器上看起来正确。这个链接和这个链接提供了一些有用的信息，可以帮助你实现跨浏览器的工作。

- Dan