我有這個(gè) 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 標(biāo)簽中設(shè)置的?，F(xiàn)在我想在 HTML 網(wǎng)頁中顯示此 SVG，因此我需要使其具有響應(yīng)性，還需要保留path所有部分（包括所有國家/地區(qū)）。只是我更改width為，100%但鼠標(biāo)懸停不再起作用。你看我需要改變整個(gè) SVG 的比例，但是我應(yīng)該如何在網(wǎng)頁中顯示我的 SVG？[注意]：在 HTML 中我用來<?php file_get_contents('map.svg'); ?>加載 SVG。
1 回答
眼眸繁星
TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊
你必須添加viewBox="0 0 2754 1398"到你的 SVG 中。在所有現(xiàn)代瀏覽器中，您可以刪除width和height/或?qū)⑺鼈冊O(shè)置為width="100%"?height="100%"使您的 SVG 具有響應(yīng)能力，但如果您想提供跨瀏覽器兼容性，則必須這樣做width并且height不使用百分比，因?yàn)樵谄渌闆r下，非現(xiàn)代瀏覽器將無法理解它。因此，我想建議設(shè)置viewBox，width如下height所示。
在這種情況下，如果您需要提供跨瀏覽器兼容性，則必須在SVG 父級的所有更改之后通過 JavaScript 進(jìn)行計(jì)算以實(shí)現(xiàn)響應(yīng)性width。但在其他情況下，所有現(xiàn)代瀏覽器都可以在沒有它的情況下完成此操作。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倍。
- 1 回答
- 0 關(guān)注
- 179 瀏覽
添加回答
舉報(bào)
0/150
提交
取消