跨浏览器强制 SVG 适合 div 的方式答案

【问题标题】：Cross-browser way to force SVG fit inside div跨浏览器强制 SVG 适合 div 的方式
【发布时间】：2015-01-19 12:42:36
【问题描述】：

我正在尝试将我的 SVG 图像放入父容器中。但是，我可能误解了一些东西，因为没有什么对我有用。

我尝试使用vievBox 和preserveAspectRatio，但没有任何效果。 JS FIDDLE

然后我尝试编写一个脚本来转换 SVG，但它仍然不能完美匹配 viewbox JS FIDDLE 2

不知何故，这两个示例都适用于 Internet Explorer 11，但不适用于 Firefox 和 Chrome。

HTML

<div class="svg_box">
   <svg id="svg_map" viewBox="0 0 800 400" preserveAspectRatio="xMidYMid meet">
     <g id="viewport">
       <g id="County_fills">
         <g id="wicklow">
            <path  d="m 660.19812,671.17693 c 4.3002,-24.4434 25.98479,-42.3466 13.668,-66.4151 3.521,-20.6076 -8.00616,-48.1039 -28.42028,-38.027 -11.84916,-7.4307 -15.52234,9.0615 -25.5361,-10.1857 -13.21206,-5.8314 -15.00724,18.141 -19.90659,23.682 -3.4252,15.0746 -22.32726,16.7667 -25.17803,34.5218 -0.30454,15.0967 8.81716,24.9106 24.882,22.849 7.57843,8.1943 17.12841,-1.2087 9.03025,18.9026 -10.09526,5.7923 -29.7139,-17.2323 -30.74574,1.6656 7.44289,0.675 23.28352,39.2398 37.71449,22.0728 5.70401,-21.6558 29.89655,-24.6066 41.068,-9.182 -0.82169,2.7052 6.39378,3.4876 3.424,0.116 z" id="path3626" />
         </g>
         <!-- ... other counties ... --->
       </g>
    </g>
 </svg>

    $('#viewport').each(function () {
        var objThs = $(this);

        scaleH = $('#svg_map').innerHeight() / objThs[0].getBoundingClientRect().height;
        scaleW = $('#svg_map').innerWidth() / objThs[0].getBoundingClientRect().width;

        if (scaleH < scaleW) {
            scale = scaleH;
        }
        else {
            scale = scaleW;
        }
    centerX = parseInt($('#svg_map').innerWidth() - objThs[0].getBoundingClientRect().width * scale) / 2;
    centerY = parseInt($('#svg_map').innerHeight() - objThs[0].getBoundingClientRect().height * scale) / 2;
        objThs.attr('transform', "matrix(" + scale + ",0,0," + scale + "," + centerX + ","+centerY+")");
    });

如果没有 JS 可以做到这一点，我会很高兴，但 JS 总比没有好 ;-)

任何帮助将不胜感激。

【问题讨论】：

您是否检查了 innerWidth() 和 innerHeight() 是否适用于所有浏览器上的 SVG 元素。我怀疑它没有。如果正确设置 viewBox，则不需要使用 JS。您是如何选择 viewBox 值的？
我没有使用 innerWidth 和 innerHeight 来获取 svg 尺寸，而是使用父 div 大小来获取 svg 大小，我使用的是 .getBoundingClientRect()。我确定我设置了 vieBox 错误，但我不明白如何正确设置它在这里你可以看到我尝试了什么：jsfiddle.net/2xw7vu0c/2
在我看来，您正在调用 #svg_map 上的 innerWidth，这是 svg，而不是 div。
display: block可能是您的答案，请参阅stackoverflow.com/questions/39716346/…

标签： javascript css svg responsive-design cross-browser

【解决方案1】：

viewBox 属性描述了 SVG 内容的边界框。浏览器使用它来计算缩放 SVG 内容的程度，以便填充 SVG 的宽度和高度而不会溢出（当然取决于您的 preserveAspectRatio 设置）。

在您的情况下，“0 0 800 400”是错误的。它只覆盖了岛上的一部分。更准确的值是“74 58 617 902”。我通过在“viewport”元素上调用getBBox() 来得到它。

见http://jsfiddle.net/2xw7vu0c/6/

【讨论】：