我有这个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 -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>
您看到width是在SVG标签中设置的。现在，我想在HTML网页中显示此SVG，因此我需要使其具有响应性，还需要保留所有部分的path（包括所有国家/地区）。只需将width更改为100%，但鼠标悬停将不再起作用。您看到我需要更改整个SVG的比例，但是如何在网页上显示我的SVG？
[注意]：
在HTML中，我使用<?php file_get_contents('map.svg'); ?>加载SVG。
答案 0 :(得分：1)
您必须将viewBox="0 0 2754 1398"添加到SVG。在所有现代浏览器中，您可以删除width和height或将它们设置为width="100%" height="100%"以使SVG响应，但是如果要提供跨浏览器的兼容性，则可以必须width和height而没有百分比，因为在其他情况下not modern browsers will not understand it。因此，我建议像下面这样设置viewBox，width和height。
如果您需要提供跨浏览器的兼容性，则必须对您的width和height进行的所有更改之后，通过JavaScript计算width和height SVG父级负责任。但是在其他情况下，所有现代浏览器都可以不使用它。
<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倍。您可以在good tutorial on MDN中学习如何做。