SVG 理解viewBox

作者: CODERLIHAO | 来源:发表于2020-04-03 18:55 被阅读0次

SVG 理解viewBox
svg动画（一）
[svg]viewBox属性
实现svg自适应
2018-09-16_svgPart1_viewport&vie
SVG动画
一、基础篇 svg之viewbox，preserveAspect
svg（viewBox, preserveAspectRatio
SVG用法
理解SVG中视窗、viewBox和preserveAspectR

viewport

viewport就是svg 设置width与height的范围，这个with与height将是浏览器显示的大小

<svg width="10%" height="10%" style="background-color: #b2bbc0">
    <rect x="0" y="0" width="50" height="50" fill="#234234"></rect>
</svg>


<svg width="5%" height="5%" style="background-color: #b2bbc0">
    <rect x="0" y="0" width="50" height="50" fill="#234234"></rect>
</svg>

image.png

viewBox

viewBox将告诉svg只能在这个区域内绘制，内部的路径坐标都是按照viewBox的坐标计算
没有设置viewBox的时候，viewBox就是viewport的大小

<svg width="10%" height="10%" style="background-color: #b2bbc0" viewBox="0,0,200,200">
    <rect x="0" y="0" width="50" height="50" fill="#234234"></rect>
</svg>


<svg width="5%" height="5%" style="background-color: #b2bbc0" viewBox="0,0,200,200">
    <rect x="0" y="0" width="50" height="50" fill="#234234"></rect>
</svg>

image.png

viewBox会缩放到viewport的大小，如果比例不同，就会有裁剪，这时可以用到preserveAspectRatio

preserveAspectRatio

preserveAspectRatio需要配合viewBox使用，第一个参数是必填的对齐方式，第二个参数是meetOrSlice

preserveAspectRatio="<align> [<meetOrSlice>]"

不加preserveAspectRatio，viewbox会缩放到viewport大小

<svg width="300" height="200" style="border:1px solid; background:#fff;" viewbox="0,0,100,160">
     <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

xMinYMin svg内容靠左对齐

<svg width="300" height="200" style="border:1px solid; background:#fff;" 
        viewbox="0,0,100,160" preserveAspectRatio="xMinYMin meet">
     <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

xMidYMin

<svg width="300" height="200" style="border:1px solid; background:#fff;" 
      viewbox="0,0,100,160" preserveAspectRatio="xMidYMin meet">
    <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

xMaxYMin

<svg width="300" height="200" style="border:1px solid; background:#fff;"
        viewbox="0,0,100,160" preserveAspectRatio="xMaxYMin meet">
    <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

xMinYMid

<svg width="300" height="200" style="border:1px solid; background:#fff;"
        viewbox="0,0,100,160" preserveAspectRatio="xMinYMid meet">
    <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

xMidYMid

<svg width="300" height="200" style="border:1px solid; background:#fff;"
        viewbox="0,0,100,160" preserveAspectRatio="xMidYMid meet">
   <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

xMaxYMid

<svg width="300" height="200" style="border:1px solid; background:#fff;"
        viewbox="0,0,100,160" preserveAspectRatio="xMaxYMid meet">
   <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

xMinYMax

<svg width="300" height="200" style="border:1px solid; background:#fff;"
        viewbox="0,0,100,160" preserveAspectRatio="xMinYMax meet">
   <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

xMidYMax

<svg width="300" height="200" style="border:1px solid; background:#fff;"
        viewbox="0,0,100,160" preserveAspectRatio="xMidYMax meet">
   <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

xMaxYMax

<svg width="300" height="200" style="border:1px solid; background:#fff;"
     viewbox="0,0,100,160" preserveAspectRatio="xMaxYMax  meet">
    <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>

image.png

meetOrSlice

slice
等比缩放，直到填充viewport，超出部分会被裁掉

<svg width="300" height="200" style="border:1px solid; background:#fff;"
     viewbox="0,0,100,160" preserveAspectRatio="xMaxYMax  slice">
    <rect width="40" height="30" x="0" y="0" fill="#c00"></rect>
    <rect width="40" height="30" x="60" y="0" fill="#f80"></rect>
    <rect width="40" height="30" x="0" y="130" fill="#09c"></rect>
    <rect width="40" height="30" x="60" y="130" fill="#0c0"></rect>
    <rect width="40" height="30" x="30" y="65" fill="#000"></rect>
</svg>