Question

我想让svg适合父<div> - 容器。但是svg似乎没有随屏幕尺寸调整大小。我的计划是通过父级<div> - 容器的百分比宽度和高度大小来控制svg的大小。有什么建议吗？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
    <div id="svgwrapper">
        <div class='content_box' id='content_box4'>
    Schield 4
    <div class='svg_schild' id='svg_schild4'>
        <svg xmlns='http://www.w3.org/2000/svg' version='1.1'
            preserveAspectRatio='xMinYMin' viewBox='-2000 -6000 10000 7000'>
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='5306,-541 5285,-871 5267,-870 5297,-395 4993,-376 4977,-641 4955,-660 4947,-660 4921,-1086 4919,-1098 4914,-1108 4902,-1116 4887,-1120 4595,-1101 4589,-1099 4588,-1096 4587,-1087 4588,-1073 4573,-1072 4574,-1058 4564,-1057 4565,-1031 4574,-1032 4600,-620 4377,-606 4376,-615 4337,-613 4338,-604 4332,-603 4334,-579 4339,-580 4339,-574 4345,-573 4346,-565 4349,-558 4371,-560 4373,-567 4373,-574 4379,-576 4379,-582 4384,-582 4389,-581 4393,-577 4394,-573 4415,-236 4406,-236 4409,-197 4418,-197 4418,-192 4442,-193 4442,-198 4448,-199 4447,-205 4456,-205 4458,-208 4463,-208 4462,-231 4456,-231 4455,-233 4446,-233 4445,-239 4445,-239 4439,-238 4439,-243 4441,-249 4442,-252 4448,-254 4596,-263 4601,-264 4608,-268 4615,-277 4619,-287 4620,-301 4619,-318 4618,-333 4600,-620 4618,-333 4629,-333 4630,-318 4632,-312 4636,-307 4645,-304 4650,-303 4930,-321 4941,-323 4954,-330 4962,-339 4964,-343 4967,-348 4947,-660 4967,-348 4969,-317 5296,-338 5297,-321 5317,-322 5316,-339 5336,-340 5324,-542 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='5349,-544 5360,-356 5401,-318 5596,-329 5596,-319 5597,-304 5753,-312 5757,-308 5758,-297 5754,-291 5697,-268 5683,-224 5699,-201 5698,-194 5690,-187 5689,-186 6661,-239 6659,-240 6651,-246 6650,-253 6662,-277 6644,-320 6585,-337 6580,-342 6580,-353 6584,-357 6729,-365 6734,-361 6734,-371 6829,-376 6847,-92 7005,-86 7003,-26 6748,-35 6749,-70 6746,-67 6607,-59 6613,-30 6504,-6 5881,28 5759,16 5762,-13 5623,-5 5619,-9 5621,29 5568,33 5569,54 5550,65 5428,71 5427,41 5324,19 5280,-6 5261,-54 5251,-244 5235,-269 5217,-278 5199,-296 5196,-313 5199,-333 5216,-352 5232,-357 5335,-364 5324,-542 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='2068,-465 2059,-473 865,-355 865,-355 825,-351 825,-351 754,-344 754,-344 753,-344 753,-347 751,-348 735,-347 733,-345 751,-166 753,-165 769,-166 771,-169 770,-172 771,-172 771,-171 842,-178 842,-179 882,-183 882,-182 2076,-299 2083,-308 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='641,-293 585,-288 584,-287 578,-286 579,-275 578,-271 575,-269 424,-254 431,-190 581,-204 585,-203 587,-200 588,-188 594,-189 595,-188 651,-194 641,-293 1785,-406 1795,-307 651,-194 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='1766,-129 601,-104 581,-108 571,-117 566,-130 563,-172 557,-185 545,-191 507,-195 493,-194 445,-182 430,-183 420,-190 414,-204 411,-241 414,-253 424,-264 438,-267 488,-265 502,-266 548,-277 557,-282 562,-291 563,-298 562,-307 560,-310 557,-311 535,-310 533,-335 447,-328 449,-303 432,-302 415,-305 401,-314 391,-330 383,-356 348,-357 336,-337 332,-83 334,-80 393,-21 432,2 3605,52 3632,60 3633,62 3735,64 3745,54 3745,30 4727,46 4743,71 5198,78 5330,56 5365,43 5392,21 5409,-8 5415,-41 5417,-151 5410,-183 5389,-212 5357,-229 5321,-230 5292,-218 5207,-161 4994,-85 4988,-82 4985,-76 4985,-49 3747,-69 3745,54 3747,-69 3748,-98 3738,-108 3695,-109 3695,-127 3640,-128 3640,-110 3636,-110 3635,-107 3608,-100 3605,52 3608,-100 3461,-103 3461,-132 3460,-133 3416,-133 3415,-132 3415,-103 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='1990,-650 2496,-1904 2496,-1907 2493,-1912 2489,-1922 2488,-1932 2490,-1942 2507,-1986 2513,-2018 2505,-2060 2487,-2089 2451,-2114 2409,-2121 2375,-2113 2340,-2088 2321,-2057 2304,-2017 2300,-2008 2291,-2002 2280,-1998 2275,-1996 2273,-1994 1767,-740 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='1921,-346 2456,-1672 2457,-1677 2456,-1678 2453,-1679 2457,-1691 2456,-1694 2156,-1815 2153,-1814 2148,-1802 2145,-1804 2143,-1803 2141,-1800 1606,-474 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='2400,-1378 2399,-1382 2398,-1384 2394,-1386 2400,-1402 1994,-1566 1987,-1550 1983,-1552 1980,-1551 1978,-1549 1486,-330 1482,-328 1479,-328 1447,-341 1443,-341 1441,-339 1425,-287 1424,-276 1427,-268 1434,-259 1473,-230 1478,-225 1482,-218 1483,-212 1499,-167 1525,-127 1558,-92 1598,-65 1620,-54 1643,-47 1690,-39 1738,-40 1785,-52 1828,-73 1866,-103 1897,-140 1917,-183 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='-765,-1382 -756,-1404 -739,-1431 -717,-1453 -691,-1470 -662,-1482 -631,-1487 -599,-1485 -576,-1480 -522,-1460 -488,-1442 -382,-1366 1033,-917 1191,-917 1234,-905 1275,-891 1302,-879 1327,-861 1343,-845 1356,-821 1367,-793 1373,-762 1374,-730 1369,-705 1359,-682 1339,-657 1317,-635 1291,-618 1261,-607 1230,-602 1214,-602 1185,-607 1143,-619 1101,-635 972,-726 -442,-1175 -573,-1174 -612,-1179 -667,-1194 -702,-1211 -727,-1230 -747,-1254 -761,-1282 -770,-1312 -772,-1344 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='-1222,-1277 -1209,-1293 -1189,-1310 -1166,-1322 -1141,-1330 -1115,-1332 -1089,-1328 -1064,-1320 -1044,-1308 -1019,-1292 -1003,-1277 -980,-1254 -927,-1188 203,-430 238,-413 332,-381 361,-366 403,-338 422,-322 439,-302 450,-278 457,-253 458,-227 454,-201 444,-177 439,-164 430,-155 411,-137 389,-123 365,-114 339,-110 313,-111 288,-118 264,-131 222,-158 198,-180 133,-255 103,-280 -1035,-1044 -1109,-1061 -1139,-1074 -1158,-1084 -1183,-1101 -1213,-1125 -1228,-1147 -1238,-1171 -1243,-1197 -1242,-1223 -1236,-1248 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='775,-1979 780,-1979 784,-1977 789,-1974 792,-1968 795,-1957 800,-1958 811,-1920 817,-1914 822,-1912 827,-1911 834,-1911 940,-1942 1011,-1942 1056,-1925 1091,-1892 1114,-1848 1119,-1801 1108,-1753 1082,-1712 1019,-1674 880,-1633 1039,-1294 1045,-1274 1047,-1255 1047,-1211 1032,-1163 990,-1134 -985,-553 -1036,-547 -1098,-565 -1148,-606 -1171,-654 -1372,-1336 -1373,-1345 -1371,-1353 -1366,-1360 -1348,-1379 -1341,-1385 -1333,-1389 506,-1929 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='2967,-253 2987,-249 2994,-241 2992,-114 2991,-85 2980,-59 2962,-37 2908,15 2885,32 2859,44 0,0 -9,-8 -9,-28 -7,-138 -3,-163 7,-185 25,-205 215,-365 226,-374 240,-382 1016,-815 1148,-888 1185,-903 1227,-909 1269,-902 1316,-880 1409,-818 1503,-761 1598,-717 1697,-683 1767,-663 1866,-641 1970,-628 2037,-626 2358,-621 2379,-617 2398,-604 2412,-585 2418,-565 2430,-396 2438,-358 2455,-323 2481,-294 2514,-272 2559,-259 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='-509,-142 -533,-151 -555,-166 -571,-186 -582,-210 -587,-238 -582,-520 -578,-541 -566,-561 -547,-574 -528,-579 453,-623 532,-630 635,-648 736,-677 833,-716 895,-748 1015,-815 239,-383 225,-374 215,-365 24,-205 6,-185 -3,-163 -7,-138 -9,-28 ' />
            <polygon style='fill:#d8d8d8;stroke:#000000;stroke-width:8'
                points='819,-2002 5349,-2675 6532,-2882 6545,-2882 6558,-2879 6569,-2872 6579,-2863 6585,-2852 6589,-2839 6589,-2826 6586,-2814 6580,-2802 6570,-2793 6559,-2786 6547,-2783 3733,-1990 3023,-1885 2970,-1869 2938,-1851 2910,-1828 2892,-1806 2819,-1731 2801,-1710 2778,-1691 2746,-1672 2719,-1660 2688,-1653 1961,-1545 1942,-1542 1918,-1534 1901,-1526 1625,-1388 1593,-1373 1552,-1358 1510,-1347 1476,-1341 1053,-1278 1009,-1281 975,-1299 956,-1320 944,-1343 797,-1756 792,-1780 790,-1805 ' /></svg>
    </div>
    </div>
    </div>
</body>
</html>

Answer 1

在页面顶部的样式标记中添加此内容

body,
div, svg {
    margin: 0;
    border: 0 none;
    padding: 0;
}

html,
body,
div, svg {
   height: 99%;
   max-width: 99%;
   min-height: 90%;
}

Answer 2

您可以使用CSS3 @media Rule来控制HTML元素的行为（在本例中为大小）。您可以调整div元素以及.svg_schild类的大小。

这应该可以为您的SVG扩展问题提供可靠的解决方案。

Answer 3

div是一个块元素，其默认宽度设置为auto，意味着它将是外行人术语中的广泛父级。脚本中的div元素不考虑正文中的填充。将其添加到您的样式块：

html,body{padding:0px;margin:0px;}
svg{width:100%}

这应解决您的问题，除非我错过了任何重要的内容

SVG不适合屏幕尺寸 - 为什么？

3 个答案: