如何缩放内联 SVG 以适合其父容器？

如何缩放内联 SVG 元素

在某些情况下，开发人员可能需要动态缩放内联 SVG 图像以匹配它的父容器。这可以在不引用外部 SVG 文件的情况下实现，并允许将其他 CSS 样式应用到 SVG 的内容。

要缩放内联 SVG，请使用以下步骤：

1. 指定 Viewbox 属性：
   使用 viewBox 属性定义图像在其坐标系内的边界框在 SVG 元素上。这些值代表 SVG 左上角和右下角的 x 和 y 坐标。
2. 设置宽度和高度属性：
   指定宽度和高度SVG 的外观，因为它应该使用宽度和高度属性出现在包含页面中。这些值决定了 SVG 如何按比例缩放。

例如，以下代码将在 10px x 20px 边界框内渲染一个三角形，然后将其缩放以适合其父容器：

svg {
  border: 1px solid blue;
}

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

通过指定 SVG 内的坐标（与其缩放尺寸无关），图像将保持其比例并正确渲染，无论其容器的大小如何尺寸。

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