内联 SVG 不缩放到高度答案

【问题标题】：Inline SVG does not scale to height内联 SVG 不缩放到高度
【发布时间】：2015-08-13 16:01:56
【问题描述】：

我在这段代码中嵌入了一个 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 添加到divs 样式来解决。
谢谢，保罗·勒博。

【问题讨论】：

在您的示例中，div 没有尺寸，那么100% 应该是什么意思？

标签： html css svg

【解决方案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

【讨论】：