如何使用'viewBox”、'width”和'height”缩放内联 SVG 以适合其父容器？

使用父容器缩放内联 SVG

使用内联 SVG（可缩放矢量图形）元素时，经常需要缩放 SVG 以匹配它的父容器。虽然可以通过引用外部 SVG 文件来实现缩放，但这种方法可能会限制使用 CSS 设置 SVG 样式的能力。因此，更理想的解决方案是直接缩放内联 SVG。

使用 viewBox 定义图像坐标并使用宽度/高度缩放

定义 SVG 图像的内部坐标并确定其缩放方式，使用以下属性：

• viewBox：定义图像在其自身坐标系中的边界框。
• 宽度：SVG 相对于包含页面的宽度（单位为单位）。
• 高度：SVG 相对于包含页面的高度（单位）。

例如，请考虑以下内容带有红色三角形的内联 SVG：

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

这里，我们有：

• viewBox (0, 0, 20, 10)：指定 SVG 有一个矩形边界框宽度为 20 个单位，高度为 10 个单位。
• width (10)：指定SVG 相对于包含页面的宽度应为 10 个单位。
• 高度 (20)：指定 SVG 相对于包含页面的高度应为 20 个单位。

此 SVG 将渲染为 10 像素宽、20 像素高的红色三角形。

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