如何缩放内联 SVG 以适应其父容器，同时保持纵横比？

缩放内联 SVG 以适合父容器

内联 SVG 提供了将矢量图形直接添加到 HTML 文档的灵活性。然而，在保持纵横比的同时缩放它们以匹配父容器的大小可能会带来挑战。以下是使用 viewBox 属性实现此目的的方法：

为了制作内联 SVG 比例，我们在 SVG 元素上使用 viewBox 属性。该属性定义图像在其自身坐标系内的边界框。随后，我们使用 width 和 height 属性指定所需的宽度和高度，这些属性相对于包含的页面。

考虑以下示例，它显示一个 10 像素 x 20 像素的三角形：

<svg viewBox="0 0 20 10">
    <polygon fill="red" stroke-width="0"
             points="0,10 20,10 10,0" />
</svg>

此 SVG 将在给定容器内呈现为 10 像素 x 20 像素的三角形，无论其大小如何。 viewBox 属性 (0 0 20 10) 定义图像的坐标系，(0,0) 为左上角，(20,10) 为右下角。通过指定宽度和高度属性（示例中未显示），我们将图像缩放到相对于容器的所需大小，同时保持其纵横比。

以上是如何缩放内联 SVG 以适应其父容器，同时保持纵横比？的详细内容。更多信息请关注PHP中文网其他相关文章！