Question

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

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

然后我尝试编写一个脚本来转换SVG，但它仍然不能完全匹配视图框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>

JS

    $('#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总比没有好; - ）

任何帮助将不胜感激。

Answer 1

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

在你的情况下＆＃34; 0 0 800 400＆＃34;是错的。它只覆盖了岛屿的一部分。更准确的值是＆＃34; 74 58 617 902＆＃34;。我通过在＆＃34; viewport＆＃34;上调用getBBox()来实现这一点。元件。

请参阅http://jsfiddle.net/2xw7vu0c/6/

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

1 个答案: