如何更改 SVG 的宽度和高度以使其响应？

Question

我有这个 SVG：<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2754" height="1398">    <path id="ocean" class="oceanxx" d="m 2178.51,22.652 c 23.09,8.443 46.07,17.268 68.69,26.918 23.28,9.936 46.25,20.423 68.65,32.235 21.09,11.126 41.93,23.021 61.97,35.957 21.08,13.605 41.89,27.571 62.36,42.079 19.52,13.829 38.78,28.187 57.4,43.192 19.26,15.516 38.42,31.313 56.44,48.281 17.81,16.784 34.69,34.399 50.88,52.763 16.31,18.496 32.21,37.27 46.51,57.382 13.9,19.544 27,40.009 38.14,61.259 11.54,21.996 21.52,44.679 29.03,68.373 3.63,11.456 6.72,23.097 9.94,34.672 3.22,11.531 6.37,23.097 8.9,34.802 5.17,23.881 9.21,47.954 11.66,72.272 2.45,24.396 4.06,48.767 3.86,73.294 -0.19,23.564 -2.29,47.347 -5.21,70.721 -3.03,24.259 -7.25,48.35 -13.13,72.089 -2.96,11.943 -6.24,23.795 -9.6,35.631 -3.29,11.603 -6.48,23.303 -10.64,34.63 -8.31,22.638 -18.23,44.718 -30.26,65.638 -12.14,21.11 -25.29,41.69 -39.9,61.17 -15.07,20.1 -31.57,38.97 -48.34,57.66 -16.07,17.9 -33.01,35.1 -51.03,51.03 -18.79,16.6 -37.97,32.65 -57.71,48.11 -18.86,14.76 -38.19,28.96 -57.84,42.65 -20.62,14.37 -41.56,28.19 -62.84,41.56 -10.07,6.32 -20.47,12.15 -30.84,17.97 -10.6,5.96 -21.25,12.07 -32.19,17.39 -22.71,11.06 -45.67,21.39 -69.06,30.93 -22.6,9.22 -45.32,18 -68.36,26.06 -18.62,6.52 -37.43,12.13 -56.48,17.19 h -1464.558 c -3.275,-0.87 -6.55,-1.7395 -9.824,-2.6095 -5.977,-1.59 -11.899,-3.39 -17.82,-5.17 -22.914,-6.91 -45.542,-15.04 -67.838,-23.73 -23.659,-9.22 -47.12,-18.92 -70.278,-29.33 -22.408,-10.07 -44.015,-21.63 -65.428,-33.64 -20.646,-11.59 -40.753,-24.21 -60.384,-37.44 -21.088,-14.21 -41.901,-28.75 -62.326,-43.9 -18.703,-13.87 -37.317,-28.07 -55,-43.23 -19.066,-16.35 -38.229,-32.7  z"/></svg>如您所见，它width是在 SVG 标签中设置的。现在我想在 HTML 网页中显示此 SVG，因此我需要使其具有响应性，还需要保留path所有部分（包括所有国家/地区）。只是我更改width为，100%但鼠标悬停不再起作用。你看我需要改变整个 SVG 的比例，但是我应该如何在网页中显示我的 SVG？[注意]：在 HTML 中我用来<?php file_get_contents('map.svg'); ?>加载 SVG。

Answer 1

你必须添加viewBox="0 0 2754 1398"到你的 SVG 中。在所有现代浏览器中，您可以删除width和height/或将它们设置为width="100%" height="100%"使您的 SVG 具有响应能力，但如果您想提供跨浏览器兼容性，则必须这样做width并且height不使用百分比，因为在其他情况下，非现代浏览器将无法理解它。因此，我想建议设置viewBox，width如下height所示。

在这种情况下，如果您需要提供跨浏览器兼容性，则必须在SVG 父级的所有更改之后通过 JavaScript 进行计算以实现响应性width。但在其他情况下，所有现代浏览器都可以在没有它的情况下完成此操作。heightwidthheight

<div style="width:500px">

    <svg xmlns="http://www.w3.org/2000/svg"

    width="500" height="250"

    viewBox="0 0 2754 1398">

        <path id="ocean" class="oceanxx" d="m 2178.51,22.652 c 23.09,8.443 46.07,17.268 68.69,26.918 23.28,9.936 46.25,20.423 68.65,32.235 21.09,11.126 41.93,23.021 61.97,35.957 21.08,13.605 41.89,27.571 62.36,42.079 19.52,13.829 38.78,28.187 57.4,43.192 19.26,15.516 38.42,31.313 56.44,48.281 17.81,16.784 34.69,34.399 50.88,52.763 16.31,18.496 32.21,37.27 46.51,57.382 13.9,19.544 27,40.009 38.14,61.259 11.54,21.996 21.52,44.679 29.03,68.373 3.63,11.456 6.72,23.097 9.94,34.672 3.22,11.531 6.37,23.097 8.9,34.802 5.17,23.881 9.21,47.954 11.66,72.272 2.45,24.396 4.06,48.767 3.86,73.294 -0.19,23.564 -2.29,47.347 -5.21,70.721 -3.03,24.259 -7.25,48.35 -13.13,72.089 -2.96,11.943 -6.24,23.795 -9.6,35.631 -3.29,11.603 -6.48,23.303 -10.64,34.63 -8.31,22.638 -18.23,44.718 -30.26,65.638 -12.14,21.11 -25.29,41.69 -39.9,61.17 -15.07,20.1 -31.57,38.97 -48.34,57.66 -16.07,17.9 -33.01,35.1 -51.03,51.03 -18.79,16.6 -37.97,32.65 -57.71,48.11 -18.86,14.76 -38.19,28.96 -57.84,42.65 -20.62,14.37 -41.56,28.19 -62.84,41.56 -10.07,6.32 -20.47,12.15 -30.84,17.97 -10.6,5.96 -21.25,12.07 -32.19,17.39 -22.71,11.06 -45.67,21.39 -69.06,30.93 -22.6,9.22 -45.32,18 -68.36,26.06 -18.62,6.52 -37.43,12.13 -56.48,17.19 h -1464.558 c -3.275,-0.87 -6.55,-1.7395 -9.824,-2.6095 -5.977,-1.59 -11.899,-3.39 -17.82,-5.17 -22.914,-6.91 -45.542,-15.04 -67.838,-23.73 -23.659,-9.22 -47.12,-18.92 -70.278,-29.33 -22.408,-10.07 -44.015,-21.63 -65.428,-33.64 -20.646,-11.59 -40.753,-24.21 -60.384,-37.44 -21.088,-14.21 -41.901,-28.75 -62.326,-43.9 -18.703,-13.87 -37.317,-28.07 -55,-43.23 -19.066,-16.35 -38.229,-32.7 -55.7,-50.78 -17.375,-17.98 -34.02,-36.63 -50.196,-55.69 -15.8042,-18.63 -30.0702,-38.53 -43.2552,-59.08 -12.855,-20.03 -24.808,-40.78 -34.432,-62.58 -4.953,-11.212 -10.061,-22.574 -13.76803,-34.279 -3.636,-11.479 -7.10201,-23.018 -10.295,-34.63 -6.417,-23.337 -12.46197,-46.647 -16.64097,-70.51 -4.257,-24.312 -6.66,-48.722 -8.709,-73.299 -2.004,-24.036 -1.886,-48.22 -0.282,-72.273 1.577,-23.65 3.862,-47.424 7.951,-70.784 4.256,-24.313 9.89,-48.113 16.43297,-71.903 6.41,-23.309 13.32503,-46.313 23.10703,-68.463 10.055,-22.769 22.053,-44.289 35.237,-65.382 13.01,-20.813 27.606,-40.549 43.184,-59.499 15.0482,-18.306 31.0032,-36.065 47.4652,-53.109 17.623,-18.246 36.494,-35.063 55.744,-51.561 18.438,-15.803 37.658,-30.663 57.064,-45.251 19.468,-14.636 39.434,-28.563 59.596,-42.221 20.714,-14.031 41.923,-27.255 63.595,-39.75 21.315,-12.289 43.164,-23.437 65.454,-33.832 21.981,-10.25 44.545,-19.417 67.141,-28.2184 22.703,-8.843 45.633,-17.18 68.889,-24.461 6.059,-1.897 12.166,-3.638 18.274,-5.365 2.722,-0.77 5.452,-1.504 8.186,-2.231 l 5.039,-1.332 h 1464.836 c 23.32,6.205 45.87,13.337 68.54,21.625 z"/>

    </svg>

</div>

我建议在 SVG 中缩短代码，path如下所示：

<div style="width:500px">

    <svg xmlns="http://www.w3.org/2000/svg"

    width="500" height="250" viewBox="0 0 50 25">

        <path id="ocean" class="oceanxx"

        d="M12,24C-4,21,-4,3,12,0H37C54,3,54,21,37,24z"/>

    </svg>

</div>

我的代码比你的代码短60倍。