无法缩放 SVG 徽标，因此它可以放入 div 容器中
[英]Can't scale a SVG logo so it can fit in a div container
问题描述
Basically I want my SVG Logo to fit a div container that I made.
基本上我希望我的SVG 徽标适合我制作的 div 容器。 But when I try to resize with width:100%;但是当我尝试调整width:100%; and height:100% so it can fully display to the div container size, just disappear.和height:100%所以它可以完全显示到 div 容器大小，只是消失。
the SVG Logo should be in the blue container. SVG 徽标应位于蓝色容器中。
*{ box-sizing: border-box; margin:0; padding:0; }.navbar-container{ background-color: red; width:100%; height:40px; }.navbar-title{ margin:auto; width:40%; height:100%; background-color: blue; display:flex; justify-content:center; }.navbar-title svg{ width:100%; height:100%; }
<.DOCTYPE html> <html> <head> <title>Devil Indumentaria</title> <link rel="stylesheet" type="text/css" href="./style:css"> <link href="https.//fonts.googleapis?com/css2:family=Montserrat,wght@500&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> </head> <body> <div class="navbar-container"> <div class="navbar-title"> <svg viewBox="0 0 144 40" src="./img/devil2.svg"> </svg> </div> <div class="navbar-links"> <ul> <li><img src="./img/hom.svg">Home</li> <li><img src="./img/mae.svg">Contact</li> </ul> </div> </div> </body> </html>
3 个解决方案
解决方案1
0 2020-08-04 23:29:23
解决方案2
0 2020-08-04 23:30:47
the problem is that you use a svg tag, simple use an img tag like you have done some line after.问题是你使用了 svg 标签，简单地使用 img 标签，就像你在之后做了一些事情一样。 For best practice never give an image both the width and the height, because if the aspect ratio is not correct you will have a stretched image.作为最佳实践，永远不要同时给图像提供宽度和高度，因为如果纵横比不正确，您将得到一个拉伸的图像。
解决方案3
0 已采纳 2020-08-04 23:32:41
I've opened your svg and I see you have one background, like canvas below logo,, and that just messed your logo positioning I'm pretty sure:我已经打开了您的 svg 并且我看到您有一个背景，例如徽标下方的 canvas，这只是弄乱了您的徽标定位我很确定：
I removed it for you, and you can use this svg in code snippet that I created for you below.我为您删除了它，您可以在下面为您创建的代码片段中使用此 svg。
<svg width="2280" height="915" viewBox="0 0 2280 915" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M569.409 735.514C541.628 721.182 534.806 699.692 534.806 669.07L535.584 402.502V350.299L536.336 125.325C536.544 84.7949 506.285 67.2858 466.728 67.2858C419.297 67.2858 371.037 77.3892 326.771 97.0125C307.809 105.417 286.785 117.388 286.785 139.709C286.785 157.529 294.723 162.73 310.273 169.137C335.59 179.384 338.119 204.701 337.886 229.11L336.524 350.299C306.979 333.996 280.988 319.042 246.332 321.26C204.22 323.932 161.925 332.141 124.494 353.282C56.455 391.789 11.9816 464.77 2.74715 541.772C0.633082 558.84 -0.547159 575.675 1.02218 593.093C6.17118 649.927 30.1912 706.591 72.4467 746.305C108.879 780.61 152.029 805.992 203.467 805.992C259.25 805.992 315.552 801.154 350.441 754.061C346.277 764.359 353.683 774.203 361.724 781.245C369.312 787.912 378.52 792.62 388.157 795.538C399.855 799.04 408.882 797.561 420.374 797.561H513.847C533.69 797.561 571.692 800.298 582.34 778.729C589.123 764.566 583.17 742.725 569.409 735.514ZM1961.65 148.113C1961.65 261.586 1838.89 333.244 1740.02 276.488C1641.39 219.836 1641.39 77.4282 1740.02 20.6465C1838.1 -36.9133 1961.65 34.6279 1961.65 148.113ZM200.355 914.121H2091.51V831.672H200.355V914.121V914.121ZM2059.04 798.495H2240.69C2259.89 798.495 2276.63 792.179 2279.33 771.479C2281.59 755.487 2273.8 747.329 2261.73 738.692C2247.85 728.666 2244.08 720.508 2244 703.206L2244.03 128.581C2244.03 82.3955 2214.21 63.382 2169.02 63.382C2121.93 63.382 2076.43 74.4063 2033.37 92.5639C2014.42 100.488 1991.25 112.732 1991.25 136.233C1991.25 153.794 1998.72 157.153 2013.71 163.651C2040.92 176.374 2047.15 191.86 2047.15 221.587V698.096C2047.15 713.452 2043.27 724.749 2031.65 734.814C2020.19 744.774 2013.71 751.065 2013.71 767.264C2013.7 791.504 2039.21 798.495 2059.04 798.495V798.495ZM1745.44 797.561H1920.48C1940.95 797.561 1966.41 794.228 1966.41 768.12C1966.41 754.061 1958.48 746.24 1947.08 739.833C1935 732.959 1927.47 724.58 1927.47 710.197V415.641C1927.47 387.444 1916.28 336.46 1884.61 326.953C1871.74 322.998 1862.01 325.293 1849.15 326.033L1722.93 333.257L1582.18 335.734C1562.88 334.45 1542.58 333.14 1523.76 338.51C1507.6 343.205 1495.75 351.453 1495.83 372.023C1495.83 390.881 1513.93 402.1 1527.42 411.996C1543.5 423.617 1543.08 438.831 1538.24 456.301L1530.13 485.613L1518.51 523.77L1503.04 571.187L1485.05 617.787L1471.02 654.297L1457.03 685.516L1436.89 644.946L1405.76 578.113L1373.87 507.428L1355.99 467.053L1349.27 448.311C1347.27 442.67 1345.47 437.456 1346.18 431.399C1347.14 423.397 1351.07 419.337 1356.47 415.732C1373.21 404.513 1379.29 397.25 1379.29 376.381C1379.29 343.412 1346.16 338.172 1319.76 338.043L1161.89 337.161C1138.43 337.031 1112.48 346.719 1112.48 374.047C1112.48 394.643 1124.7 406.51 1136.82 421.685C1146.37 433.539 1153.93 443.668 1160.16 457.611L1286.61 739.625C1306.86 784.618 1331.53 796.511 1379.81 797.691C1406.84 798.365 1434.13 799.714 1461.15 798.729C1513.48 797.043 1528.1 762.66 1542.36 717.058L1551.03 689.51L1582.18 597.516L1608.22 524.405C1619.97 491.566 1636.11 406.354 1688.04 411.231C1728.72 414.824 1733.89 445.38 1733.89 481.579V695.282C1733.89 717.045 1735.3 725.099 1717.27 738.251C1706.48 746.084 1700.45 753.075 1700.45 768.807C1700.45 791.738 1727.86 797.561 1745.44 797.561V797.561ZM818.597 640.497C830.581 675.555 845.393 700.56 878.336 713.751C898.53 721.857 917.531 723.919 935.636 721.247C960.487 717.59 983.651 705.022 1005.89 687.085L1031.2 663.247C1045.24 650.004 1058.6 638.098 1077.79 641.302C1094.97 644.025 1108.24 657.488 1110.56 673.402C1113.59 694.205 1094.65 715.917 1081.25 729.146C1059.26 750.792 1031.69 767.731 1003.55 779.845C958.749 799.351 907.622 813.501 859.037 811.867C782.035 809.312 710.131 782.919 656.657 726.85C621.548 689.614 602.469 634.7 602.469 584.792C602.469 496.52 640.302 421.114 715.254 372.737C770 337.342 836.586 319.885 901.02 322.609C952.925 324.723 1001.09 337.148 1044.17 366.693C1074.28 391.88 1097.75 421.36 1097.75 462.565C1097.75 522.745 1058.5 562.51 1009.2 587.788C951.096 617.671 882.071 628.358 818.597 640.497V640.497ZM912.68 455.419C912.68 477.532 907.466 496.52 893.64 514.146C872.876 540.838 837.844 548.464 806.25 551.836C807.132 528.024 809.155 503.926 815.303 480.814C822.761 452.89 841.956 409.428 877.376 409.428C901.526 409.441 912.68 433.863 912.68 455.419V455.419ZM256.319 705.774C218.434 685.062 209.356 630.809 207.916 589.773C207.293 572.756 207.008 555.675 207.968 538.672C210.691 492.629 221.002 407.612 275.54 402.917C279.979 402.461 284.451 402.414 288.899 402.775C335.435 406.562 342.996 470.684 342.75 507.337L341.855 610.083C339.857 646.23 332.711 710.041 284.425 712.687C274.775 713.232 265.359 710.716 256.319 705.774Z" fill="black"/> </svg>
Here it is build with your layout markup:这是使用您的布局标记构建的：
*{ box-sizing: border-box; margin:0; padding:0; }.navbar-container{ background-color: red; width:100%; height:40px; }.navbar-title{ margin:auto; width:40%; height:100%; background-color: blue; display:flex; justify-content:center; }.navbar-title svg{ width:100%; height:100%; }
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet"> <div class="navbar-container"> <div class="navbar-title"> <svg viewBox="0 0 2280 915" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M569.409 735.514C541.628 721.182 534.806 699.692 534.806 669.07L535.584 402.502V350.299L536.336 125.325C536.544 84.7949 506.285 67.2858 466.728 67.2858C419.297 67.2858 371.037 77.3892 326.771 97.0125C307.809 105.417 286.785 117.388 286.785 139.709C286.785 157.529 294.723 162.73 310.273 169.137C335.59 179.384 338.119 204.701 337.886 229.11L336.524 350.299C306.979 333.996 280.988 319.042 246.332 321.26C204.22 323.932 161.925 332.141 124.494 353.282C56.455 391.789 11.9816 464.77 2.74715 541.772C0.633082 558.84 -0.547159 575.675 1.02218 593.093C6.17118 649.927 30.1912 706.591 72.4467 746.305C108.879 780.61 152.029 805.992 203.467 805.992C259.25 805.992 315.552 801.154 350.441 754.061C346.277 764.359 353.683 774.203 361.724 781.245C369.312 787.912 378.52 792.62 388.157 795.538C399.855 799.04 408.882 797.561 420.374 797.561H513.847C533.69 797.561 571.692 800.298 582.34 778.729C589.123 764.566 583.17 742.725 569.409 735.514ZM1961.65 148.113C1961.65 261.586 1838.89 333.244 1740.02 276.488C1641.39 219.836 1641.39 77.4282 1740.02 20.6465C1838.1 -36.9133 1961.65 34.6279 1961.65 148.113ZM200.355 914.121H2091.51V831.672H200.355V914.121V914.121ZM2059.04 798.495H2240.69C2259.89 798.495 2276.63 792.179 2279.33 771.479C2281.59 755.487 2273.8 747.329 2261.73 738.692C2247.85 728.666 2244.08 720.508 2244 703.206L2244.03 128.581C2244.03 82.3955 2214.21 63.382 2169.02 63.382C2121.93 63.382 2076.43 74.4063 2033.37 92.5639C2014.42 100.488 1991.25 112.732 1991.25 136.233C1991.25 153.794 1998.72 157.153 2013.71 163.651C2040.92 176.374 2047.15 191.86 2047.15 221.587V698.096C2047.15 713.452 2043.27 724.749 2031.65 734.814C2020.19 744.774 2013.71 751.065 2013.71 767.264C2013.7 791.504 2039.21 798.495 2059.04 798.495V798.495ZM1745.44 797.561H1920.48C1940.95 797.561 1966.41 794.228 1966.41 768.12C1966.41 754.061 1958.48 746.24 1947.08 739.833C1935 732.959 1927.47 724.58 1927.47 710.197V415.641C1927.47 387.444 1916.28 336.46 1884.61 326.953C1871.74 322.998 1862.01 325.293 1849.15 326.033L1722.93 333.257L1582.18 335.734C1562.88 334.45 1542.58 333.14 1523.76 338.51C1507.6 343.205 1495.75 351.453 1495.83 372.023C1495.83 390.881 1513.93 402.1 1527.42 411.996C1543.5 423.617 1543.08 438.831 1538.24 456.301L1530.13 485.613L1518.51 523.77L1503.04 571.187L1485.05 617.787L1471.02 654.297L1457.03 685.516L1436.89 644.946L1405.76 578.113L1373.87 507.428L1355.99 467.053L1349.27 448.311C1347.27 442.67 1345.47 437.456 1346.18 431.399C1347.14 423.397 1351.07 419.337 1356.47 415.732C1373.21 404.513 1379.29 397.25 1379.29 376.381C1379.29 343.412 1346.16 338.172 1319.76 338.043L1161.89 337.161C1138.43 337.031 1112.48 346.719 1112.48 374.047C1112.48 394.643 1124.7 406.51 1136.82 421.685C1146.37 433.539 1153.93 443.668 1160.16 457.611L1286.61 739.625C1306.86 784.618 1331.53 796.511 1379.81 797.691C1406.84 798.365 1434.13 799.714 1461.15 798.729C1513.48 797.043 1528.1 762.66 1542.36 717.058L1551.03 689.51L1582.18 597.516L1608.22 524.405C1619.97 491.566 1636.11 406.354 1688.04 411.231C1728.72 414.824 1733.89 445.38 1733.89 481.579V695.282C1733.89 717.045 1735.3 725.099 1717.27 738.251C1706.48 746.084 1700.45 753.075 1700.45 768.807C1700.45 791.738 1727.86 797.561 1745.44 797.561V797.561ZM818.597 640.497C830.581 675.555 845.393 700.56 878.336 713.751C898.53 721.857 917.531 723.919 935.636 721.247C960.487 717.59 983.651 705.022 1005.89 687.085L1031.2 663.247C1045.24 650.004 1058.6 638.098 1077.79 641.302C1094.97 644.025 1108.24 657.488 1110.56 673.402C1113.59 694.205 1094.65 715.917 1081.25 729.146C1059.26 750.792 1031.69 767.731 1003.55 779.845C958.749 799.351 907.622 813.501 859.037 811.867C782.035 809.312 710.131 782.919 656.657 726.85C621.548 689.614 602.469 634.7 602.469 584.792C602.469 496.52 640.302 421.114 715.254 372.737C770 337.342 836.586 319.885 901.02 322.609C952.925 324.723 1001.09 337.148 1044.17 366.693C1074.28 391.88 1097.75 421.36 1097.75 462.565C1097.75 522.745 1058.5 562.51 1009.2 587.788C951.096 617.671 882.071 628.358 818.597 640.497V640.497ZM912.68 455.419C912.68 477.532 907.466 496.52 893.64 514.146C872.876 540.838 837.844 548.464 806.25 551.836C807.132 528.024 809.155 503.926 815.303 480.814C822.761 452.89 841.956 409.428 877.376 409.428C901.526 409.441 912.68 433.863 912.68 455.419V455.419ZM256.319 705.774C218.434 685.062 209.356 630.809 207.916 589.773C207.293 572.756 207.008 555.675 207.968 538.672C210.691 492.629 221.002 407.612 275.54 402.917C279.979 402.461 284.451 402.414 288.899 402.775C335.435 406.562 342.996 470.684 342.75 507.337L341.855 610.083C339.857 646.23 332.711 710.041 284.425 712.687C274.775 713.232 265.359 710.716 256.319 705.774Z" fill="black"/> </svg> </div> <div class="navbar-links"> <ul> <li><img src="./img/hom.svg">Home</li> <li><img src="./img/mae.svg">Contact</li> </ul> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何缩放 SVG 以适应父 div 容器？ - How can I scale an SVG to fit the parent div container?
我无法将 SVG 包裹在 div 中以正确缩放 - I can't get an SVG wrapped in a div to scale properly
缩放 SVG 以适应 div - Scale SVG to fit inside a div
缩放svg背景图像以适合容器 - scale an svg background-image to fit the container
使嵌入式SVG秤适合父容器 - Make embedded SVG scale to fit parent container
如何缩放SVG使其适合d3中其容器div的大小？ - How do I scale my SVG to fit the size of its container div in d3?
旋转和缩放图像以“适合”容器 div - Rotate and scale image to "fit" container div
如何使用其父容器制作 svg 比例尺？ - How can I make an svg scale with its parent container?
当容器div的内容不能排成一行时，将其清除吗？ - Make container div clear when its content can't fit in one line?
无法将div容器居中 - Can't center a div container
相关标签