【CSS】SVG（七）——preserveAspectRatio（2）

这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战

SVG（七）——preserveAspectRatio（2）

接上文

（7）视图属性

（7.2）preserveAspectRatio

• 属性值：

  • 第二个参数：meet | slice | none

    • 语法：preserveAspectRatio="$align meet"
    • 主要用于控制可视区域的内容如何显示
    • 缩放meet、裁剪slice、自动none

    属性值	描述
    meet	保持宽高比，以可视区域的最小边为基准，将viewbox缩放为适合可视区域的大小，满足viewbox的最大边与可视区域的最小边一致
    slice	保持宽高比，以可视区域的最大边为基准，将viewbox将缩放为适合可视区域的大小，满足viewbox的最下边与可视区域的最大边一致，而所有不在可视区域中的viewbox将被剪裁掉
    none	不保持宽高比，会适当缩放viewbox区域，以适应可视区域，viewbox区域之外的内容被裁剪，可能会发生图像变形

• 代码示例

  • 对于第二个参数，它的视图区域就是控制上述的绿色边框区域

    • 设置为meet，则绿色边框区域会缩放到满足viewbox最大边（和上述一致）

      

    • 设置为slice，则绿色边框区域会缩放到满足viewbox最小边

      

      • 在结合第一个参数的情况下，因为这里X轴是满足整个视图区域的，所以只有Y轴上的变化才能看到效果

        <!-- 居上 -->
        <svg viewbox="0 0 100 200" preserveAspectRatio="xMinYMin slice" >
            <path d="M 100 50, L 50 100, L 100 150, L 150 100, L 100 50, L 75 100, L 100 125, L 125 100, Z"/>
        </svg>
        <!-- 居中 -->
        <svg viewbox="0 0 100 200" preserveAspectRatio="xMinYMid slice" >
            <path d="M 100 50, L 50 100, L 100 150, L 150 100, L 100 50, L 75 100, L 100 125, L 125 100, Z"/>
        </svg>
        <!-- 居下 -->
        <svg viewbox="0 0 100 200" preserveAspectRatio="xMinYMax slice" >
            <path d="M 100 50, L 50 100, L 100 150, L 150 100, L 100 50, L 75 100, L 100 125, L 125 100, Z"/>
        </svg>
        

        

    • 设置为none，则绿色边框区域同meet一致，不同的是，红色边框区域会被拉伸以适应绿色边框区域

      <svg viewbox="0 0 100 200" preserveAspectRatio="none" >
          <path d="M 100 50, L 50 100, L 100 150, L 150 100, L 100 50, L 75 100, L 100 125, L 125 100, Z"/>
      </svg>
      
      

      

      所以最终的效果实际是这样的，图形会被拉伸，从而导致变形