拉伸内以适应窗户尺寸

发布于 2024-11-10 03:32:53 字数 810 浏览 3 评论 0原文

我正在尝试在 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;
}

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

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黎夕旧梦 2024-11-17 03:32:53

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

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

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