如何将宽度和高度从 SVG 更改为使其响应？
How to change width and height from SVG to to make it responsive?
我有这个 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。
您必须将 viewBox="0 0 2754 1398" 添加到您的 SVG。在所有现代浏览器中，您可以删除 width 和 height 或将它们设置为 width="100%" height="100%" 以使您的 SVG 具有响应性，但如果您想提供 cross-browser兼容性你必须 width 和 height 没有百分比，因为在其他情况下 。因此，我建议像下面这样设置 viewBox、width 和 height。
在这种情况下，如果您需要提供 cross-browser 兼容性，则必须在 width 的所有更改之后通过 JavaScript 计算 width 和 height和 height 的 SVG parent 用于响应。但在其他情况下，所有现代浏览器都可以在没有它的情况下完成。
<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.
中学习
我有这个 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。
您必须将 viewBox="0 0 2754 1398" 添加到您的 SVG。在所有现代浏览器中，您可以删除 width 和 height 或将它们设置为 width="100%" height="100%" 以使您的 SVG 具有响应性，但如果您想提供 cross-browser兼容性你必须 width 和 height 没有百分比，因为在其他情况下 viewBox、width 和 height。
在这种情况下，如果您需要提供 cross-browser 兼容性，则必须在 width 的所有更改之后通过 JavaScript 计算 width 和 height和 height 的 SVG parent 用于响应。但在其他情况下，所有现代浏览器都可以在没有它的情况下完成。
<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.
中学习