Javascript 跨浏览器方式强制SVG在div中匹配

我正在尝试将SVG图像放入父容器中。然而，我可能误解了一些东西，因为没有什么东西适合我

我试过使用

vievBox

和

preserveAspectRatio

，但没有任何效果

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

不知何故，这两个示例都可以在InternetExplorer11中使用，但不能在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+")");
    });

$（“#视口”）。每个（函数（）{
var objThs=$（本）；
scaleH=$（'#svg_map'）.innerHeight（）/objThs[0].getBoundingClientRect（）.height；
scaleW=$（'#svg_map'）.innerWidth（）/objThs[0].getBoundingClientRect（）.width；
if（scaleH

如果没有JS我会很高兴，但是JS总比没有好；-）

---

任何帮助都将不胜感激。

视图框属性描述SVG内容的边界框。浏览器使用它来计算缩放SVG内容的大小，以便它填充SVG宽度和高度而不会溢出（当然取决于

preserveAspectRatio

设置）

在您的情况下，“080400”是错误的。它只覆盖了岛的一部分。更准确的值是“7458617902”。我是通过在“viewport”元素上调用

getBBox（）

得到的

---

请参见

是否已检查innerWidth（）和innerHeight（）是否适用于所有浏览器上的SVG元素。我想没有。如果正确设置了viewBox，则不需要使用JS。如何选择viewBox值？我不是使用innerWidth和innerHeight来获取svg维度，而是使用父div大小来获取svg大小。getBoundingClientRect（）。我肯定我把vieBox设置错了，但我不知道如何正确设置。你可以看到我的尝试：在我看来，你在调用#svg_映射上的innerWidth，这是svg，而不是div。

display:block

可能是你的答案，请参见