【CSS】SVG（六）——preserveAspectRatio（1）

Composition
1,168 阅读2分钟

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

SVG（六）——preserveAspectRatio（1）

接上文

（7）视图属性

（7.2）preserveAspectRatio

  • 在上一篇的示例情况中，视图属性设置的都是和<svg>区域的宽高比保持一致的，但在许多的情况下，viewBox的缩放是不按比例设置的

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

  • 属性值：

    • 第一个参数：align对齐方式

      • 语法：preserveAspectRatio="$align"

      • 主要用于控制viewBox的位置，或者说viewbox的对齐方式

        • Min表示靠近原点，Mid表示居中，Max表示远离原点

      • 可分为x、y两个部分

        • xMin、xMid、xMax、yMin、yMid、yMax
        • 需要注意的是，在使用时，要XY一起使用，如：xMinYMin、xMaxYMid

          • 所以一共有9种组合，对应viewbox在可视区域的9个位置 | 取值 | 描述 | | :----- | ----------------------------------------------- | | xMin | viewbox的最小X值对齐可视区域的左边 | | xMid | viewbox的X轴中点对齐可视区域的X轴中点 | | xMax | viewbox的最大X值对齐可视区域的右边 | | YMin | viewbox的最小Y值对齐可视区域的顶边 | | YMid | viewbox的Y轴中点对齐可视区域的Y轴中点 | | YMax | viewbox的最大Y值对齐可视区域的右边 |

  • 代码示例

    • 对于(0 0 100 200)，它的视图区域是这样的

      • 红色边框区域表示viewbox区域，绿色边框区域表示最终的视图区域
        • 红色边框区域就是设置的(0,0),(100+0,200+0)区域
        • 绿色边框区域是将<svg>区域等比缩放到，满足viewbox区域最大值的区域，最终的视图将聚焦到这个区域
      • 而preserveAspectRatio的第一个参数设置的就是：红色边框区域在绿色视图区域内的位置
      image-20211114132503695

      • 这里因为Y轴是撑满了视图区域的，所以此处只有X轴上的变化才会有效果

        <!-- 居左 -->
<svg viewbox="0 0 100 200" preserveAspectRatio="xMaxYMax" >
    <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="xMaxYMax" >
    <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="xMaxYMax" >
    <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>
        image-20211114133302703

      对于Y轴上的对齐方式，与X轴类似，这里不再赘述

（下篇文章介绍preserveAspectRatio的第二个参数）

avatar
文章
阅读
粉丝