如何使内联 SVG 与其父容器按比例缩放？

与父容器按比例缩放内联 SVG

让内联 SVG 与其父容器成比例缩放是动态调整 SVG 大小的便捷方法内容。当您需要在 HTML 元素中嵌入 SVG 图形并确保它们适当缩放时，这是理想的选择。实现此目的的方法如下：

<svg viewBox="0 0 100 50">
  <polygon fill="red" points="0,0 100,0 50,50" />
</svg>

在此示例中，SVG 元素的宽度为 100，高度为 50，如 viewBox 属性所定义。 Polygon 元素表示跨越 SVG 整个宽度和高度的三角形。

viewBox 属性指定 SVG 内容的坐标。在本例中，水平坐标范围为 0 到 100，垂直坐标范围为 0 到 50。即使您使用 CSS 调整 SVG 元素的大小，三角形也将始终填充整个 viewBox 区域。

svg {
  width: 300px; /* Can be any value */
  height: auto; /* Automatically scales height */
}

通过设置 SVG 元素的宽度，我们可以指定包含元素的所需大小。高度将自动调整以保持 SVG 的纵横比，确保三角形保持按比例缩放。

这种方法允许您将 SVG 嵌入 HTML 元素并动态控制其大小，而无需使用外部文件或牺牲样式选项。

以上是如何使内联 SVG 与其父容器按比例缩放？的详细内容。更多信息请关注PHP中文网其他相关文章！