内联SVG不按高度缩放

Question

我嵌入了一个SVG内联代码:

<div id="svgInlineDiv" style='background-color:white'></div>
<script>
    document.addEventListener("onload",inlineSVG(),false);
    function inlineSVG()
    {
        var SVGFile="img/office_lights.svg";
        var loadXML = new XMLHttpRequest;
        function handler(){
            if(loadXML.readyState == 4 && loadXML.status == 200)
                svgInlineDiv.innerHTML=loadXML.responseText
        }
        if (loadXML != null){
            loadXML.open("GET", SVGFile, true);
            loadXML.onreadystatechange = handler;
            loadXML.send();
        }
    }
</script>

SVG头看起来像这样:

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg9948"
   version="1.1"
   inkscape:version="0.48.5 r10040"
   sodipodi:docname="office_lights_source.svg"
   viewBox="0 0 1229.4684 1144.845"
   width="100%"
   height="100%">

此图像仅缩放到浏览器窗口的宽度，而不是其高度。

这幅画大致是正方形的。当我将浏览器窗口的大小调整为高于其宽度时，它会以全宽度显示。但是当我将浏览器窗口的大小调整为比它的高度更宽时(就像在宽屏显示器上通常做的那样)，图片仍然以全宽显示，迫使我向下滚动以查看较低的部分。

我试着在CSS和SVG中玩width和height，但无济于事。

编辑:

将height: 100vh添加到div s样式中解决。
谢谢Paul LeBeau。

Answer 1

您的<div>有任何样式吗?如果不是，它的宽度为100%，高度与它的子元素的高度匹配。在本例中，它将是SVG的高度。

SVG的宽度被缩放到100%的<div>宽度，这是100%的页面宽度

正在计算SVG的高度，以便维持SVG的长宽比(如viewBox所描述的)。因此，例如，如果页面宽度是1024px，那么SVG的高度以及<div> 将为:

1024 * (1144.845 / 1229.4684) = 953.53

如果您希望将SVG和div限制为屏幕/页面的高度，那么您将需要使用各种方法中的一种来完成此操作。例如

设置div为浏览器窗口高度的100%

然后SVG将缩放到div的高度。它在div中如何精确缩放将取决于SVG的preserveAspectRatio属性的值。您可以在这里了解该属性的工作原理:

http://www.w3.org/TR/SVG/coords.html PreserveAspectRatioAttribute