拉伸< svg>在< embed>内适应窗口大小 [英] Stretch <svg> inside an <embed> to fit window size

问题描述

我正在尝试在DOM中拉伸svg文档以适合窗口大小.

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

像这样:

<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?

推荐答案

所有浏览器都应该能够很好地处理此问题:

All browsers should be able to handle this just fine:

• 在不使用脚本的情况下，将viewBox添加到svg元素(在您的示例中为s17.svg)
• 如果已指定，则删除svg元素上的width和height属性
• 向svg元素添加属性preserveAspectRatio="none"，以使其延伸，即使css-viewport的宽高比与viewBox的宽高比不匹配.
• 将embed/iframe/object的宽度/高度设置为所需的值，svg会自动拉伸以适合

• add a viewBox to the svg element (s17.svg in your example) without using script if possible
• remove the width and height attributes on the svg element if they are specified
• add an attribute preserveAspectRatio="none" to the svg element to make it stretch even if the css-viewport aspect ratio doesn't match the viewBox aspect ratio.
• set the width/height of the embed/iframe/object to whatever you want and the svg will automatically stretch to fit

如果您不想拉伸，则也可以执行preserveAspectRatio="xMidYMid slice"(填充整个视口，必要时切掉部分)或preserveAspectRatio="xMidYMid meet"(这是默认设置，将svg置于视口居中并保持宽高比).

If you don't want stretching then you can also do preserveAspectRatio="xMidYMid slice" (fill whole viewport, slicing away parts if necessary) or preserveAspectRatio="xMidYMid meet" (this is the default, center the svg in the viewport and maintain the aspect ratio).

这篇关于拉伸< svg>在< embed>内适应窗口大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！