我有位于右侧的 svg 元素。这种对齐方式在 Firefox 中运行良好，但当我在 Chrome 浏览器中打开我的网页时，SVG 元素位于部分的中心。
<html>
<svg style="position:absolute;right:0;" width="auto" height="120%" viewBox="0 0 116 253" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M59.1636 98.0787C48.2396 99.6774 44.5051 100.519 34.7033 106.062C24.9015 111.606 16.8079 119.731 11.3034 129.555C5.7989 139.379 3.0943 150.524 3.48398 161.778C3.87366 173.032 7.34269 183.963 13.5135 193.383C19.6844 202.802 28.3206 210.348 38.4823 215.201C48.6441 220.053 59.942 222.025 71.1466 220.902C82.3512 219.779 92.3976 216.622 101.394 209.85C110.391 203.078 111.786 201.191 118.313 188.935L119.315 181.351C115.345 191.285 108.726 199.94 100.179 206.373C91.6319 212.806 81.791 218.109 71.1466 219.176C60.5022 220.243 48.136 218.723 38.4823 214.113C28.8287 209.504 20.264 202.331 14.4017 193.383C8.53939 184.434 4.78037 172.469 4.41017 161.778C4.03997 151.087 6.07412 142.581 11.3034 133.249C16.5327 123.916 26.9068 114.008 36.2185 108.742C45.5303 103.475 56.108 100.864 66.8007 101.192L59.1636 98.0787Z" fill="#C4C4C4" fill-opacity="0.5"/>
<path d="M63.4178 41.2475C56.6489 43.02 50.6873 47.0487 46.518 52.668C42.3487 58.2872 40.2213 65.1608 40.4874 72.1528C40.7534 79.1448 43.3969 85.8369 47.9811 91.1231C52.5653 96.4094 59.3403 99.8898 66.2243 101.143L59.2968 98.2119C53.8348 95.0146 53.1124 94.5766 48.9866 89.819C44.8608 85.0614 42.4841 78.4456 42.2447 72.1528C42.0052 65.86 42.7656 59.573 46.518 54.5157C50.2703 49.4583 55.0699 45.7197 61.1619 44.1245L63.4178 41.2475Z" fill="#C4C4C4" fill-opacity="0.5"/>
<path d="M12.7873 92.5315C19.5273 100.432 23.0393 106.482 26.5414 114.654C25.2887 104.9 25.0264 97.7404 25.1272 92.7738C25.1724 90.5464 25.2907 88.7598 25.4254 87.3778C23.8135 89.2058 22.4806 90.2382 20.832 90.8877C19.681 91.3412 18.4161 91.5927 16.8924 91.8482C16.4992 91.9141 16.0869 91.9806 15.6507 92.0509C14.7991 92.1882 13.8564 92.3401 12.7873 92.5315Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/>
<path d="M33.2938 68.7639C30.4436 64.512 28.6665 61.1848 26.1622 55.2208C23.7429 61.1064 22.0473 64.4274 19.3202 68.8562C22.1626 73.9448 23.8536 77.4954 26.0165 83.0088C26.9853 79.7262 27.7752 77.424 28.7285 75.4494C29.8636 73.0982 31.2145 71.2427 33.2938 68.7639Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="116" height="253" fill="white" transform="matrix(-1 0 0 1 116 0)"/>
</clipPath>
</defs>
</svg>
</html>最佳答案
尝试使用这个preserveAspectRatio="xMaxYMin meet"
<svg style="position:absolute;right:0;" width="auto" height="100%" viewBox="0 0 116 253" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMin meet">
<g clip-path="url(#clip0)">
<path d="M59.1636 98.0787C48.2396 99.6774 44.5051 100.519 34.7033 106.062C24.9015 111.606 16.8079 119.731 11.3034 129.555C5.7989 139.379 3.0943 150.524 3.48398 161.778C3.87366 173.032 7.34269 183.963 13.5135 193.383C19.6844 202.802 28.3206 210.348 38.4823 215.201C48.6441 220.053 59.942 222.025 71.1466 220.902C82.3512 219.779 92.3976 216.622 101.394 209.85C110.391 203.078 111.786 201.191 118.313 188.935L119.315 181.351C115.345 191.285 108.726 199.94 100.179 206.373C91.6319 212.806 81.791 218.109 71.1466 219.176C60.5022 220.243 48.136 218.723 38.4823 214.113C28.8287 209.504 20.264 202.331 14.4017 193.383C8.53939 184.434 4.78037 172.469 4.41017 161.778C4.03997 151.087 6.07412 142.581 11.3034 133.249C16.5327 123.916 26.9068 114.008 36.2185 108.742C45.5303 103.475 56.108 100.864 66.8007 101.192L59.1636 98.0787Z" fill="#C4C4C4" fill-opacity="0.5"/>
<path d="M63.4178 41.2475C56.6489 43.02 50.6873 47.0487 46.518 52.668C42.3487 58.2872 40.2213 65.1608 40.4874 72.1528C40.7534 79.1448 43.3969 85.8369 47.9811 91.1231C52.5653 96.4094 59.3403 99.8898 66.2243 101.143L59.2968 98.2119C53.8348 95.0146 53.1124 94.5766 48.9866 89.819C44.8608 85.0614 42.4841 78.4456 42.2447 72.1528C42.0052 65.86 42.7656 59.573 46.518 54.5157C50.2703 49.4583 55.0699 45.7197 61.1619 44.1245L63.4178 41.2475Z" fill="#C4C4C4" fill-opacity="0.5"/>
<path d="M12.7873 92.5315C19.5273 100.432 23.0393 106.482 26.5414 114.654C25.2887 104.9 25.0264 97.7404 25.1272 92.7738C25.1724 90.5464 25.2907 88.7598 25.4254 87.3778C23.8135 89.2058 22.4806 90.2382 20.832 90.8877C19.681 91.3412 18.4161 91.5927 16.8924 91.8482C16.4992 91.9141 16.0869 91.9806 15.6507 92.0509C14.7991 92.1882 13.8564 92.3401 12.7873 92.5315Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/>
<path d="M33.2938 68.7639C30.4436 64.512 28.6665 61.1848 26.1622 55.2208C23.7429 61.1064 22.0473 64.4274 19.3202 68.8562C22.1626 73.9448 23.8536 77.4954 26.0165 83.0088C26.9853 79.7262 27.7752 77.424 28.7285 75.4494C29.8636 73.0982 31.2145 71.2427 33.2938 68.7639Z" stroke="#C4C4C4" stroke-opacity="0.5" stroke-width="2"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="116" height="253" fill="white" transform="matrix(-1 0 0 1 116 0)"/>
</clipPath>
</defs>
</svg>关于html - SVG 元素在 Chrome 浏览器中居中对齐，但它应该向右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56613065/