SVG的preserveAspectRatio

朱雀 2022-01-06 09:15 176阅读 0赞

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

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

### 文章目录 ###

*  语法
 *  参数
 *   *  align
     *  meetOrSlice
     *  align和meetOrSlice参数结合的情况

# 语法 #

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

# 参数 #

## align ##

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

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

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>xMin</td> 
   <td>viewBox的最小x值对齐viewport的左边</td> 
  </tr> 
  <tr> 
   <td>xMid</td> 
   <td>viewBox的x轴中点对齐viewport的x轴中点</td> 
  </tr> 
  <tr> 
   <td>xMax</td> 
   <td>viewBox的最大x值对齐viewport的右边</td> 
  </tr> 
  <tr> 
   <td>YMin</td> 
   <td>viewBox的最小y值对齐viewport的顶边</td> 
  </tr> 
  <tr> 
   <td>YMid</td> 
   <td>viewBox的Y轴中点对齐viewport的Y轴中点</td> 
  </tr> 
  <tr> 
   <td>YMax</td> 
   <td>viewBox的最大x值对齐viewport的右边</td> 
  </tr> 
 </tbody> 
</table>

## meetOrSlice ##

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>meet</td> 
   <td>保持宽高比并将<code>viewBox</code>缩放为适合<code>viewport</code>的大小</td> 
  </tr> 
  <tr> 
   <td>slice</td> 
   <td>保持宽高比并将所有不在viewport中的<code>viewBox</code>剪裁掉</td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>不保存宽高比。缩放图像适合整个<code>viewBox</code>，可能会发生图像变形。</td> 
  </tr> 
 </tbody> 
</table>

## align和meetOrSlice参数结合的情况 ##

`xMinYMin`、`xMinYMid`、`xMinYMax`，`meetOrSlice`取值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

其实之所以`y`取三个不同的值最终结果都一样是因为，在`meetOrSlice`取值为`meet`的时候，是按最短边来缩放，即图片能够完整的显示出来。所以最短边都能够拉伸到跟`viewPort`的短边等长。所以无论怎么调整`y`的值都是不会有效果的。

同理，对于`meetOrSlice`取值为`slice`的情况，由于是优先把长边显示出来，所以长边那个轴无论赋值成什么，都不会有变化。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20211227/221a85a5299e49cea0a0ce26d48bd0ad.png