SVG 不适合父容器，preserveAspectRatio 未按预期工作

Question

我有一个 SVG，我希望将其缩放到其父容器的大小。为了便于论证，我们假设父容器是width: 10rem; height: 10rem; 我期望的内容如下：

preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100"

在 SVG 上会将 SVG 的大小调整到其父容器，并将其在 X 轴和 Y 轴上居中。那是行不通的，我仍在尝试理解 viewBox 的神奇工作原理。例如，我设置的数字越小（第二组数字），SVG 在 vi​​ewBox 中就越大。

这是一个代码笔： https ://codepen.io/mearleycf/pen/VxGyPZ

在 codepen 中，我希望 SVG 垂直和水平居中并填充可用的灰色空间。

Answer 1

您的图像是自定义视图窗口大小的一半viewBox。

为了将图像放大一半，需要将图像缩小viewBox两倍viewBox="0 0 50 50"

1#

.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>

2#

解决方案的第一个变体满足问题的条件，但不具有适应性。

为了使 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