SVG的preserveAspectRatio

最新推荐文章于 2023-03-14 17:54:17 发布

Meskjei

最新推荐文章于 2023-03-14 17:54:17 发布

阅读量3.8k

点赞数 1

分类专栏：前端文章标签： SVG preserveAspectRatio 前端

本文链接：https://blog.csdn.net/hjc256/article/details/93510253

版权

本文详细介绍了SVG的`preserveAspectRatio`属性，用于在SVG图像缩放时保持原始宽高比。通过解析`align`和`meetOrSlice`参数，解释了如何控制图像在不同场景下的展示效果，确保图像在不失真的情况下适应容器尺寸。

摘要由CSDN通过智能技术生成

在许多情况下，svg的viewPort和viewBox的宽高并不总是相等的。换句话说，在许多的情况下，viewBox的缩放不按比例强制拉伸的。

那如果我们想要让viewBox在拉伸时保持宽高比，可以使用preserveAspectRatio。

语法

preserveAspectRatio的语法：preserveAspectRatio=[defer] <align> <meetOrSlice>

align参数控制viewBox是否强制进行均匀的缩放，主要控制viewBox的位置，主要可分为x、y两个部分。

而这两个部分都各有三个相同的值，分别是min、mid、max。

取值	描述
xMin	viewBox的最小x值对齐viewport的左边
xMid	viewBox的x轴中点对齐viewport的x轴中点
xMax	viewBox的最大x值对齐viewport的右边
YMin	viewBox的最小y

关注

专栏目录