如何将 SVG 缩放到与相邻 SVG 完全相同的高度
How to scale SVG to exactly same height as adjacent SVG's
这是我截取的片段。它是不同 Web 服务徽标的列表，例如一个网站。如您所见，与其他徽标相比，Twitter 徽标并没有完全对齐：
body {
background-color: white;
}
.list {
list-style-type: none;
display: flex;
justify-content: space-between;
padding-right: 20%;
padding-left: 20%;
}
.list-item {
fill: palevioletred;
transition: all 0.1s;
transform-origin: center;
width: 8vw;
height: 8vw;
}
.list-item:hover {
fill: hotpink;
transform: scale(1.08);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<ul class="list">
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2133.0101 2133.5199"
>
<path
d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
transform="translate(-6745.44 -1116.75)"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 49.998463">
<path
d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
transform="translate(-75 -99)"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6999.9997 6999.9997"
>
<path
d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
></path>
<path
d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
></path>
<path
d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
<path
d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42.60677 41.555031"
>
<path
d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
></path>
<path
d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
></path>
<path
d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
></path>
<path
d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
></path>
<path
d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
></path>
<path
d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
></path>
<path
d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
></path>
<path
d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
></path>
</svg>
</li>
</ul>
</div>
</body>
</html>
当我们在元素周围添加边框时，我们可以看到问题是 Twitter 徽标不适合完美的正方形。它需要矩形区域来适应，当它被挤压到一个正方形内时，它会按比例缩小以适应它。这导致它看起来比相邻的徽标高。
body {
background-color: white;
}
.list {
list-style-type: none;
display: flex;
justify-content: space-between;
padding-right: 20%;
padding-left: 20%;
}
.list-item {
border: 2px dashed;
fill: palevioletred;
transition: all 0.1s;
transform-origin: center;
width: 8vw;
height: 8vw;
}
.list-item:hover {
fill: hotpink;
transform: scale(1.08);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<ul class="list">
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2133.0101 2133.5199"
>
<path
d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
transform="translate(-6745.44 -1116.75)"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 49.998463">
<path
d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
transform="translate(-75 -99)"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6999.9997 6999.9997"
>
<path
d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
></path>
<path
d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
></path>
<path
d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
<path
d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42.60677 41.555031"
>
<path
d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
></path>
<path
d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
></path>
<path
d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
></path>
<path
d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
></path>
<path
d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
></path>
<path
d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
></path>
<path
d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
></path>
<path
d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
></path>
</svg>
</li>
</ul>
</div>
</body>
</html>
有没有一种方法可以将 SVG 缩放到完全相同的高度并水平获取 space 所需的任何内容？
请注意，父容器 .list-item 的纵横比为 1:1
width:8vw;
height:8vh;
而twitter icon之外的三个icon还有一个aspect ratio of 1:1（viewBox宽高相等）所以这三个icon均匀的填满父容器
但是 twitter 图标 的宽度大于高度 - viewBox="0 0 61 49.998463"
因此根据容器的高度得到一个空闲字段
在下面的示例中，红色边框显示 canvas svg 的边界。超出 SVG canvas 范围的内容将被剪裁。
因此，用 transform="translate()"
按高度定位图标是没有用的
body {
background-color: white;
}
.list {
list-style-type: none;
display: flex;
justify-content: space-between;
padding-right: 20%;
padding-left: 20%;
}
.list-item {
border: 2px dashed;
fill: palevioletred;
transition: all 0.1s;
transform-origin: center;
width: 8vw;
height: 8vw;
}
.list-item:hover {
fill: hotpink;
transform: scale(1.08);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<ul class="list">
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2133.0101 2133.5199"
>
<path
d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
transform="translate(-6745.44 -1116.75)"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 49.998463" style="border:1px solid red">
<path id="path"
d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
transform="translate(-75 -99)"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6999.9997 6999.9997"
>
<path
d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
></path>
<path
d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
></path>
<path
d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
<path
d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42.60677 41.555031"
>
<path
d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
></path>
<path
d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
></path>
<path
d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
></path>
<path
d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
></path>
<path
d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
></path>
<path
d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
></path>
<path
d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
></path>
<path
d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
></path>
</svg>
</li>
</ul>
</div>
</body>
</html>
解法：
- 需要为
twitter 图标制作 aspect ratio 1:1
选择等于 61 的相同宽度和高度参数
viewBox="87 108 61 61"
- 要完全填满整个父容器，请添加缩放比例 -
transform="scale(1.11)"
body {
background-color: white;
}
.list {
list-style-type: none;
display: flex;
justify-content: space-between;
padding-right: 20%;
padding-left: 20%;
}
.list-item {
border: 2px dashed;
fill: palevioletred;
transition: all 0.1s;
transform-origin: center;
width: 8vw;
height: 8vw;
}
.list-item:hover {
fill: hotpink;
transform: scale(1.08);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<ul class="list">
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2133.0101 2133.5199"
>
<path
d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
transform="translate(-6745.44 -1116.75)"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="87 108 61 61" style="border:0px solid red">
<path id="path"
d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
transform="scale(1.11)"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6999.9997 6999.9997"
>
<path
d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
></path>
<path
d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
></path>
<path
d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
<path
d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42.60677 41.555031"
>
<path
d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
></path>
<path
d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
></path>
<path
d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
></path>
<path
d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
></path>
<path
d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
></path>
<path
d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
></path>
<path
d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
></path>
<path
d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
></path>
</svg>
</li>
</ul>
</div>
</body>
</html>
这是我截取的片段。它是不同 Web 服务徽标的列表，例如一个网站。如您所见，与其他徽标相比，Twitter 徽标并没有完全对齐：
body {
background-color: white;
}
.list {
list-style-type: none;
display: flex;
justify-content: space-between;
padding-right: 20%;
padding-left: 20%;
}
.list-item {
fill: palevioletred;
transition: all 0.1s;
transform-origin: center;
width: 8vw;
height: 8vw;
}
.list-item:hover {
fill: hotpink;
transform: scale(1.08);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<ul class="list">
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2133.0101 2133.5199"
>
<path
d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
transform="translate(-6745.44 -1116.75)"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 49.998463">
<path
d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
transform="translate(-75 -99)"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6999.9997 6999.9997"
>
<path
d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
></path>
<path
d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
></path>
<path
d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
<path
d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42.60677 41.555031"
>
<path
d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
></path>
<path
d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
></path>
<path
d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
></path>
<path
d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
></path>
<path
d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
></path>
<path
d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
></path>
<path
d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
></path>
<path
d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
></path>
</svg>
</li>
</ul>
</div>
</body>
</html>
当我们在元素周围添加边框时，我们可以看到问题是 Twitter 徽标不适合完美的正方形。它需要矩形区域来适应，当它被挤压到一个正方形内时，它会按比例缩小以适应它。这导致它看起来比相邻的徽标高。
body {
background-color: white;
}
.list {
list-style-type: none;
display: flex;
justify-content: space-between;
padding-right: 20%;
padding-left: 20%;
}
.list-item {
border: 2px dashed;
fill: palevioletred;
transition: all 0.1s;
transform-origin: center;
width: 8vw;
height: 8vw;
}
.list-item:hover {
fill: hotpink;
transform: scale(1.08);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<ul class="list">
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2133.0101 2133.5199"
>
<path
d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
transform="translate(-6745.44 -1116.75)"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 49.998463">
<path
d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
transform="translate(-75 -99)"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6999.9997 6999.9997"
>
<path
d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
></path>
<path
d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
></path>
<path
d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
<path
d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42.60677 41.555031"
>
<path
d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
></path>
<path
d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
></path>
<path
d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
></path>
<path
d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
></path>
<path
d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
></path>
<path
d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
></path>
<path
d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
></path>
<path
d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
></path>
</svg>
</li>
</ul>
</div>
</body>
</html>
有没有一种方法可以将 SVG 缩放到完全相同的高度并水平获取 space 所需的任何内容？
请注意，父容器 .list-item 的纵横比为 1:1
width:8vw;
height:8vh;
而twitter icon之外的三个icon还有一个aspect ratio of 1:1（viewBox宽高相等）所以这三个icon均匀的填满父容器
但是 twitter 图标 的宽度大于高度 - viewBox="0 0 61 49.998463"
因此根据容器的高度得到一个空闲字段
在下面的示例中，红色边框显示 canvas svg 的边界。超出 SVG canvas 范围的内容将被剪裁。
因此，用 transform="translate()"
body {
background-color: white;
}
.list {
list-style-type: none;
display: flex;
justify-content: space-between;
padding-right: 20%;
padding-left: 20%;
}
.list-item {
border: 2px dashed;
fill: palevioletred;
transition: all 0.1s;
transform-origin: center;
width: 8vw;
height: 8vw;
}
.list-item:hover {
fill: hotpink;
transform: scale(1.08);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<ul class="list">
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2133.0101 2133.5199"
>
<path
d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
transform="translate(-6745.44 -1116.75)"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 49.998463" style="border:1px solid red">
<path id="path"
d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
transform="translate(-75 -99)"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6999.9997 6999.9997"
>
<path
d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
></path>
<path
d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
></path>
<path
d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
<path
d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42.60677 41.555031"
>
<path
d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
></path>
<path
d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
></path>
<path
d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
></path>
<path
d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
></path>
<path
d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
></path>
<path
d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
></path>
<path
d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
></path>
<path
d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
></path>
</svg>
</li>
</ul>
</div>
</body>
</html>
解法：
- 需要为
twitter图标制作aspect ratio 1:1选择等于61的相同宽度和高度参数viewBox="87 108 61 61" - 要完全填满整个父容器，请添加缩放比例 -
transform="scale(1.11)"
body {
background-color: white;
}
.list {
list-style-type: none;
display: flex;
justify-content: space-between;
padding-right: 20%;
padding-left: 20%;
}
.list-item {
border: 2px dashed;
fill: palevioletred;
transition: all 0.1s;
transform-origin: center;
width: 8vw;
height: 8vw;
}
.list-item:hover {
fill: hotpink;
transform: scale(1.08);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<ul class="list">
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 2133.0101 2133.5199"
>
<path
d="M8760.78,1116.74H6863.07a117.579,117.579,0,0,0-117.63,117.69V3132.57a117.586,117.586,0,0,0,117.63,117.69H7884.8V2423.09H7605.7V2102.18h279.16v-237.6c0-275.59,168.15-424.87,413.94-424.87,117.73,0,218.92,7.99,248.42,11.91v288.13l-170.48-.05c-133.67,0-158.64,63.53-158.64,156.76v205.72h317.89l-41.51,320.91H8218.1v827.17h542.68a117.639,117.639,0,0,0,117.67-117.69V1234.43A117.632,117.632,0,0,0,8760.78,1116.74Z"
transform="translate(-6745.44 -1116.75)"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="87 108 61 61" style="border:0px solid red">
<path id="path"
d="M94.184,149c23.02,0,35.608-19.234,35.608-35.913q0-.82-0.035-1.632A25.6,25.6,0,0,0,136,104.919a24.8,24.8,0,0,1-7.187,1.987,12.647,12.647,0,0,0,5.5-6.982,24.945,24.945,0,0,1-7.947,3.064,12.5,12.5,0,0,0-21.652,8.633,12.683,12.683,0,0,0,.325,2.878,35.431,35.431,0,0,1-25.8-13.187,12.7,12.7,0,0,0,3.874,16.85,12.326,12.326,0,0,1-5.668-1.579c0,0.053,0,.106,0,0.161A12.6,12.6,0,0,0,87.49,129.119a12.469,12.469,0,0,1-3.3.444,12.315,12.315,0,0,1-2.353-.228A12.543,12.543,0,0,0,93.529,138.1a24.976,24.976,0,0,1-15.544,5.4A25.378,25.378,0,0,1,75,143.331,35.212,35.212,0,0,0,94.184,149"
transform="scale(1.11)"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6999.9997 6999.9997"
>
<path
d="M3412 -12c-871,0 -994,5 -1356,21 -372,17 -627,76 -849,163 -230,89 -425,209 -620,404 -195,195 -314,390 -404,620 -86,223 -146,477 -163,849 -17,373 -21,492 -21,1443 0,950 4,1069 21,1443 17,372 76,627 163,849 89,230 209,425 404,620 195,195 390,314 620,404 223,86 477,146 849,163 373,17 492,21 1443,21 950,0 1069,-4 1443,-21 372,-17 627,-76 849,-163 230,-89 425,-209 620,-404 195,-195 314,-390 404,-620 86,-223 146,-477 163,-849 16,-362 21,-485 21,-1356l0 -173c0,-871 -5,-994 -21,-1356 -17,-372 -76,-627 -163,-849 -89,-230 -209,-425 -404,-620 -195,-195 -390,-314 -620,-404 -223,-86 -477,-146 -849,-163 -362,-16 -485,-21 -1356,-21l-173 0zm87 630c934,0 1045,4 1414,20 341,16 526,73 650,120 163,63 280,139 402,262 122,122 198,239 262,402 48,123 105,309 120,650 17,369 20,480 20,1414 0,934 -4,1045 -20,1414 -16,341 -73,526 -120,650 -63,163 -139,280 -262,402 -122,122 -239,198 -402,262 -123,48 -309,105 -650,120 -369,17 -480,20 -1414,20 -934,0 -1045,-4 -1414,-20 -341,-16 -526,-73 -650,-120 -163,-63 -280,-139 -402,-262 -122,-122 -198,-239 -262,-402 -48,-123 -105,-309 -120,-650 -17,-369 -20,-480 -20,-1414 0,-934 4,-1045 20,-1414 16,-341 73,-526 120,-650 63,-163 139,-280 262,-402 122,-122 239,-198 402,-262 123,-48 309,-105 650,-120 369,-17 480,-20 1414,-20z"
></path>
<path
d="M3499 4654c-644,0 -1166,-522 -1166,-1166 0,-644 522,-1166 1166,-1166 644,0 1166,522 1166,1166 0,644 -522,1166 -1166,1166zm0 -2963c-992,0 -1797,804 -1797,1797 0,992 804,1797 1797,1797 992,0 1797,-804 1797,-1797 0,-992 -804,-1797 -1797,-1797z"
></path>
<path
d="M5786 1620c0,232 -188,420 -420,420 -232,0 -420,-188 -420,-420 0,-232 188,-420 420,-420 232,0 420,188 420,420z"
></path>
</svg>
</li>
<li class="list-item">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440.02 1440">
<path
d="M 1227.06,1227.07 H 1013.62 V 892.883 c 0,-79.731 -1.46,-182.235 -110.983,-182.235 -111.145,0 -128.164,86.825 -128.164,176.461 V 1227.07 H 561.047 V 539.863 H 765.93 v 93.891 h 2.84 c 28.496,-54.027 98.171,-110.996 202.082,-110.996 216.278,0 256.208,142.336 256.208,327.359 z M 320.344,445.918 c -68.457,0 -123.867,-55.508 -123.867,-123.868 0,-68.3 55.41,-123.8 123.867,-123.8 68.277,0 123.765,55.5 123.765,123.8 0,68.36 -55.488,123.868 -123.765,123.868 z M 427.09,1227.07 H 213.496 V 539.863 H 427.09 Z M 1333.43,0 H 106.289 C 47.6484,0 0,46.48 0,103.79 v 1232.3 C 0,1393.4492 47.6484,1440 106.289,1440 H 1333.43 c 58.74,0 106.59,-46.5508 106.59,-103.91 V 103.79 C 1440.02,46.48 1392.17,0 1333.43,0"
></path>
</svg>
</li>
<li class="list-item">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 42.60677 41.555031"
>
<path
d="M 21.30354,0 C 9.539461,0 0,9.5376996 0,21.303544 c 0,9.412464 6.10411,17.397938 14.56866,20.214878 1.06469,0.1972 1.45556,-0.46214 1.45556,-1.02483 0,-0.508 -0.0198,-2.186159 -0.0289,-3.966275 -5.92666,1.288695 -7.17726,-2.513542 -7.17726,-2.513542 -0.96908,-2.46239 -2.36537,-3.117146 -2.36537,-3.117146 -1.93287,-1.32221 0.14569,-1.295046 0.14569,-1.295046 2.13925,0.149929 3.2656707,2.195687 3.2656707,2.195687 1.9000593,3.256492 4.9836893,2.31493 6.1993593,1.770592 0.19121,-1.376892 0.7433,-2.317043 1.35255,-2.848679 -4.73181,-0.538691 -9.70597,-2.365375 -9.70597,-10.5283 0,-2.325864 0.8322,-4.226278 2.1949807,-5.718175 C 9.683781,13.93578 8.95459,11.769372 10.11134,8.8349671 c 0,0 1.78894,-0.572559 5.86,2.1836939 1.69933,-0.472017 3.52178,-0.708731 5.33223,-0.716845 1.81046,0.0081 3.63432,0.244828 5.33682,0.716845 4.06612,-2.7562529 5.85259,-2.1836939 5.85259,-2.1836939 1.15958,2.9344049 0.43003,5.1008129 0.20884,5.6377409 1.36596,1.491897 2.19252,3.392311 2.19252,5.718175 0,8.182327 -4.9837,9.983962 -9.7275,10.511367 0.76412,0.661104 1.44498,1.957562 1.44498,3.945112 0,2.850446 -0.0247,5.14456 -0.0247,5.84623 0,0.56692 0.38347,1.2312 1.46332,1.022 8.45997,-2.8201 14.55633,-10.802759 14.55633,-20.212048 C 42.60676,9.5376996 33.0687,0 21.30356,0"
></path>
<path
d="m 8.06873,30.587244 c -0.0469,0.106185 -0.21343,0.137583 -0.36512,0.06491 -0.15452,-0.0695 -0.2413,-0.213784 -0.19121,-0.319969 0.0459,-0.108656 0.21273,-0.138993 0.36689,-0.06668 0.15487,0.06985 0.24307,0.215548 0.18944,0.321734 v 0"
></path>
<path
d="M 8.93163,31.54962 C 8.83003,31.64381 8.63141,31.60007 8.49665,31.45119 8.35731,31.302672 8.3312,31.104057 8.43425,31.008455 c 0.10478,-0.09384 0.29739,-0.04974 0.43709,0.09842 0.13935,0.150284 0.16651,0.347485 0.0603,0.442735 v 0"
></path>
<path
d="m 9.7715907,32.776583 c -0.1305297,0.09066 -0.3439597,0.0056 -0.4759007,-0.183798 -0.13052,-0.189441 -0.13052,-0.416631 0.003,-0.507648 0.132301,-0.09102 0.342551,-0.0088 0.4762507,0.178858 0.13018,0.192617 0.13018,0.419807 -0.003,0.512588 v 0"
></path>
<path
d="m 10.92235,33.961917 c -0.11677,0.128762 -0.36547,0.09419 -0.54751,-0.08149 -0.18626,-0.171805 -0.23812,-0.415573 -0.121,-0.544338 0.11818,-0.129117 0.3683,-0.09278 0.55174,0.08149 0.18486,0.17145 0.2413,0.416983 0.11677,0.544338 v 0"
></path>
<path
d="m 12.50985,34.650185 c -0.0515,0.166865 -0.29104,0.24271 -0.53234,0.171802 -0.24095,-0.07303 -0.39864,-0.268462 -0.34995,-0.437092 0.0501,-0.16792 0.29068,-0.246943 0.53375,-0.171095 0.24059,0.07267 0.39864,0.2667 0.34854,0.436385 v 0"
></path>
<path
d="m 14.25328,34.777892 c 0.006,0.175683 -0.19861,0.321378 -0.45191,0.324553 -0.2547,0.0056 -0.46073,-0.136525 -0.46355,-0.309385 0,-0.177448 0.20003,-0.321733 0.45473,-0.325966 0.2533,-0.0049 0.46073,0.136173 0.46073,0.310798 v 0"
></path>
<path
d="m 15.87571,34.501667 c 0.0303,0.17145 -0.1457,0.347485 -0.39723,0.394403 -0.2473,0.04516 -0.47625,-0.06068 -0.50765,-0.230716 -0.0307,-0.175684 0.14852,-0.351719 0.39546,-0.397227 0.25189,-0.04374 0.47731,0.05927 0.50942,0.23354 v 0"
></path>
</svg>
</li>
</ul>
</div>
</body>
</html>