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>

image.png

• meet
  等比缩放，直到高度或者宽度达到viewport