html - 内联 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，但无济于事。

编辑:

通过在 div 的样式中添加 height: 100vh 解决。
谢谢，Paul LeBeau。

Answer 1

你的<div>有造型吗？如果不是，它将具有 100% 的宽度和与其子项的高度相匹配的高度。在这种情况下，这将是 SVG 的高度。

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

正在计算 SVG 的高度，以便保持 SVG 的纵横比(如 viewBox 所述)。因此，例如，如果您的页面宽度为 1024 像素，则 SVG 的高度为 ，因此为 <div>。 ，将是:

1024 * (1144.845 / 1229.4684) = 953.53

如果要将 SVG 和 div 限制为屏幕/页面的高度，则需要使用多种方法之一来实现。例如

Make div 100% height of browser window

然后 SVG 将缩放到 div 的高度。它在 div 中的缩放比例取决于 SVG 的 preserveAspectRatio 的值。属性。您可以在此处了解此属性的工作原理:

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