我有一个SVG，我期望扩展到它的父容器的大小。让我们说为了论证，父容器是width: 10rem; height: 10rem;
我期望的是以下内容：
preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100"
会将SVG的大小调整为其父容器，并将其置于X轴和Y轴的中心。这不起作用，我仍然试图去查看viewBox的神奇工作方式。例如，我创建的数字越小（第二组数字），SVG在viewBox中越大。
这是一个codepen： https://codepen.io/mearleycf/pen/VxGyPZ
在codepen中我希望SVG垂直和水平居中并填充可用的灰色空间。
答案 0 :(得分：4)
您的图片尺寸是自定义视图窗口viewBox的一半。
为了将图片放大一半，有必要将viewBox两次缩短viewBox="0 0 50 50"
.viewport {
width: 10rem;
height: 10rem;
background-color: rgba(0,0,0,.2);<div class="viewport">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="-3 0 50 50">
<path d="M27.38 38.45c.3676376.0432512.6447064.3548269.6447064.725s-.2770688.6817488-.6447064.725H16.62c-.2793485.0328643-.5527292-.0976886-.702766-.3356058-.1500368-.2379172-.1500368-.5408712 0-.7787884.1500368-.2379172.4234175-.3684701.702766-.3356058h10.76z"/>
<path d="M22 20.32l7-8.08H15l7 8.08zm5.77 2.59l4.17-7.76-1.44-2.41-7.28 8.38 4.55 1.79zM40 30.48c1.1964325-3.1635471 1.8718678-6.5001977 2-9.88l-4.4-2.22v8.27c.222793 1.5584681 1.0946906 2.9498712 2.4 3.83zm-11.26-6.31c-.1278873.2340796-.3732635.3797717-.64.38-.0856249.0190035-.1743751.0190035-.26 0L22 22.2l-5.84 2.3c-.0855499.0196756-.1744501.0196756-.26 0-.2643693.0005027-.5071244-.145921-.63-.38l-1.67-3.04v8.12h16.79v-8.1l-1.65 3.07zM6.39 26.59v-8.2L2 20.6c.13283876 3.3792388.80812272 6.7151415 2 9.88 1.31972827-.8919415 2.19075519-2.3096381 2.39-3.89zM42.06 19V2.08c.000044-.33854901-.271495-.61453953-.61-.62H2.57c-.16352967-.00002198-.32022048.06561659-.43490953.18218579C2.02040143 1.75875498 1.95731918 1.9164923 1.96 2.08L1.95991792 19 10.74 14.58l2.05-3.45v-.05a.6199991.6199991 0 0 1 .14-.14l.09-.06c.0606197-.0379407.1289512-.0618568.2-.07h17.53c.0710488.0081432.1393803.0320593.2.07l.09.06a.6199991.6199991 0 0 1 .14.14v.05l2.05 3.45L42.06 19zm-30-3.85l4.17 7.76 4.55-1.79-7.28-8.38-1.44 2.41zm.1 14.78V18.66a.57999937.57999937 0 0 1 0-.19l-1.23-2.37-3.09 1.56v9c-.23358787 2.140913-1.43965798 4.0551344-3.27 5.19 3.28318525 7.6277175 9.4797039 13.6262068 17.21 16.66.147458.0600295.312542.0600295.46 0 7.7209585-3.0462892 13.9080563-9.0462264 17.19-16.67-1.8174849-1.1243263-3.0217854-3.0173247-3.27-5.14v-9l-3.09-1.6-1.24 2.31v11.52c.0000375.3992947-.3207428.7245302-.72.73H12.88c-.3992572-.0054698-.7200375-.3307053-.72-.73zm9.12 19.95C9.07046721 45.052873.91252114 33.4138361.54 20.29a1.00000007 1.00000007 0 0 1 0-.17V2.08C.52887155.94612822 1.43619307.01645888 2.57 0h38.88c1.1181022.03256431 2.0059041.95143932 2 2.07v18.05a.99999966.99999966 0 0 1 0 .17c-.3740569 13.1119454-8.517206 24.7427688-20.71 29.58-.2373877.0854445-.4877039.129419-.74.13-.244887-.0010737-.4880019-.0415928-.72-.12z"/>
</svg>
</div>
解决方案的第一个变体满足问题的条件，但不是自适应的。
为了让svg更改其大小以及更改父容器的大小，您必须以百分比指定其宽度和高度
.viewport {
width:25%;
height:25%;
}
#rect {
fill: rgba(0,0,0,.2);
}<div class="viewport">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="-6 0 50 50">
<rect id="rect" width="100%" height="100%" />
<path d="M27.38 38.45c.3676376.0432512.6447064.3548269.6447064.725s-.2770688.6817488-.6447064.725H16.62c-.2793485.0328643-.5527292-.0976886-.702766-.3356058-.1500368-.2379172-.1500368-.5408712 0-.7787884.1500368-.2379172.4234175-.3684701.702766-.3356058h10.76z"/>
<path d="M22 20.32l7-8.08H15l7 8.08zm5.77 2.59l4.17-7.76-1.44-2.41-7.28 8.38 4.55 1.79zM40 30.48c1.1964325-3.1635471 1.8718678-6.5001977 2-9.88l-4.4-2.22v8.27c.222793 1.5584681 1.0946906 2.9498712 2.4 3.83zm-11.26-6.31c-.1278873.2340796-.3732635.3797717-.64.38-.0856249.0190035-.1743751.0190035-.26 0L22 22.2l-5.84 2.3c-.0855499.0196756-.1744501.0196756-.26 0-.2643693.0005027-.5071244-.145921-.63-.38l-1.67-3.04v8.12h16.79v-8.1l-1.65 3.07zM6.39 26.59v-8.2L2 20.6c.13283876 3.3792388.80812272 6.7151415 2 9.88 1.31972827-.8919415 2.19075519-2.3096381 2.39-3.89zM42.06 19V2.08c.000044-.33854901-.271495-.61453953-.61-.62H2.57c-.16352967-.00002198-.32022048.06561659-.43490953.18218579C2.02040143 1.75875498 1.95731918 1.9164923 1.96 2.08L1.95991792 19 10.74 14.58l2.05-3.45v-.05a.6199991.6199991 0 0 1 .14-.14l.09-.06c.0606197-.0379407.1289512-.0618568.2-.07h17.53c.0710488.0081432.1393803.0320593.2.07l.09.06a.6199991.6199991 0 0 1 .14.14v.05l2.05 3.45L42.06 19zm-30-3.85l4.17 7.76 4.55-1.79-7.28-8.38-1.44 2.41zm.1 14.78V18.66a.57999937.57999937 0 0 1 0-.19l-1.23-2.37-3.09 1.56v9c-.23358787 2.140913-1.43965798 4.0551344-3.27 5.19 3.28318525 7.6277175 9.4797039 13.6262068 17.21 16.66.147458.0600295.312542.0600295.46 0 7.7209585-3.0462892 13.9080563-9.0462264 17.19-16.67-1.8174849-1.1243263-3.0217854-3.0173247-3.27-5.14v-9l-3.09-1.6-1.24 2.31v11.52c.0000375.3992947-.3207428.7245302-.72.73H12.88c-.3992572-.0054698-.7200375-.3307053-.72-.73zm9.12 19.95C9.07046721 45.052873.91252114 33.4138361.54 20.29a1.00000007 1.00000007 0 0 1 0-.17V2.08C.52887155.94612822 1.43619307.01645888 2.57 0h38.88c1.1181022.03256431 2.0059041.95143932 2 2.07v18.05a.99999966.99999966 0 0 1 0 .17c-.3740569 13.1119454-8.517206 24.7427688-20.71 29.58-.2373877.0854445-.4877039.129419-.74.13-.244887-.0010737-.4880019-.0415928-.72-.12z"/>
</svg>
</div>
现在增加，减少父容器.viewport的宽度和高度百分比也将精确地改变SVG的大小
答案 1 :(得分：0)
将viewBox更改为viewBox="-3 0 50 50"修复它。我认为你不能得到相同的宽度和高度来适应svg到square div，因为它需要保持比例。