如何使用其父容器制作 SVG 比例？

SVG(Scalable Vector Graphics) 是一种矢量图形格式，可以很好地扩展和缩放而不会失去质量，因此在现代网页设计中非常常见。然而，在父容器大小发生变化时，SVG 可能会变形或拉伸，这可能会对设计产生负面影响。

在本文中，我们将介绍如何使用父容器大小来制作 SVG 比例，以确保 SVG 图像不会面临形状变形的问题。

使用 viewBox 属性

SVG 的 viewBox 属性定义了 SVG 文件的坐标系和尺寸，在父容器大小发生变化时，可以使用 viewBox 属性来保持 SVG 图像的比例。

<div class="svg-container">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
    <rect x="0" y="0" width="100" height="100" fill="#ffffff"/>
    <circle cx="50" cy="50" r="40" fill="#009900"/>
  </svg>
</div>

上面的代码中，我们定义了一个父容器，并在其中嵌入了一个 SVG 元素。SVG 元素的 viewBox 属性设置为 "0 0 100 100"，这意味着 SVG 图像的宽度和高度设置为 100 个单位。preserveAspectRatio 属性设置为 "xMidYMid meet"，表示保持 SVG 图像的宽高比，并且在父容器中居中对齐。

使用 CSS

除了 viewBox 属性外，我们还可以使用 CSS 来设置 SVG 的比例。可以将 SVG 元素设置为一个固定的宽度和高度，并将其放置在一个标准的块级容器中，以便根据父容器的大小来调整大小。

<div class="svg-container">
  <svg width="100%" height="100%">
    <rect x="0" y="0" width="100" height="100" fill="#ffffff"/>
    <circle cx="50" cy="50" r="40" fill="#009900"/>
  </svg>
</div>

.svg-container {
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  position: relative;
}

.svg-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

上面的代码中，我们首先将父容器的宽度设置为 50%，高度设置为 0，并通过 padding-bottom 来设置父容器的高度，以使其与宽度成比例。接下来，我们将 SVG 元素的宽度和高度设置为 100%，并将其放置在父容器中，使其覆盖整个父容器。由于父容器内的所有元素的位置都是绝对定位的，因此 SVG 元素将根据父容器的大小而调整大小。

总之，在父容器大小发生变化时，有多种方法可以制作 SVG 比例。无论您是使用 viewBox 属性还是 CSS，都要确保您的 SVG 图像保持比例，以避免任何形状变形的问题。