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

使用其父容器缩放内联 SVG

将内联 SVG 元素合并到 HTML 代码中提供了使用 CSS 对其进行样式化的优势。然而，缩放此类 SVG 元素以匹配其父容器的尺寸可能是一个挑战。

解决方案

要使用其父容器缩放内联 SVG，它是需要将 viewBox 属性与宽度和高度属性结合使用：

1. viewBox attribute: 该属性定义 SVG 图像在其自身坐标系内的边界框。它确定 SVG 图像的纵横比和初始尺寸。通过设置此属性，您可以独立于缩放后的大小来指定 SVG 图像内的坐标。
2. 宽度和高度属性： 这些属性指定 SVG 元素在包含页面。它们控制 SVG 图像在页面上显示的大小。通过相对于容器的尺寸设置这些属性（例如，使用百分比），您可以按比例缩放 SVG 图像。

例如，考虑以下代码：

<svg viewBox="0 0 123 456" width="100%" height="100%">
  <polygon fill="red" stroke-width="0" points="0,10 20,10 10,0" />
</svg>

在此示例中，原始大小为 123 像素 x 456 像素的 SVG 图像经过缩放以填充整个容器。 viewBox 属性定义 SVG 图像本身内多边形的坐标，而 width 和 height 属性则将 SVG 图像缩放到容器的尺寸。结果，多边形在容器内呈现为 100% 宽的红色三角形。

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