6

I am trying to stretch an svg document inside an DOM in order to fit the window size.

like so:

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

This isn't working... What am I doing wrong?

4

2 回答 2

10

所有浏览器都应该能够很好地处理这个问题：

  • 如果可能，在不使用脚本的情况下将 viewBox 添加到 svg 元素（在您的示例中为 s17.svg）
  • 如果指定了 svg 元素的宽度和高度属性，则删除它们
  • preserveAspectRatio="none"即使 css-viewport 纵横比与 viewBox 纵横比不匹配，也向 svg 元素添加一个属性以使其拉伸。
  • 将嵌入/iframe/对象的宽度/高度设置为您想要的任何内容，svg 将自动拉伸以适应

如果您不想拉伸，那么您也可以这样做preserveAspectRatio="xMidYMid slice"（填充整个视口，必要时切掉部分）或preserveAspectRatio="xMidYMid meet"（这是默认设置，将 svg 在视口中居中并保持纵横比）。

于 2011-05-27T06:57:21.903 回答
0

所有浏览器处理 SVG 支持的方式完全不同。我认为你最好的选择是使用object标签而不是embed，你仍然需要做一些黑客攻击才能让它在每个浏览器上看起来都正确。 这个链接和这个链接有一些有用的信息可以让它跨浏览器工作。

于 2011-05-26T23:07:02.093 回答