In many cases, svgthe viewPortand the viewBoxwidth and height are not always equal. In other words, in many cases, viewBoxit is not to scale scaling stretching force.
What if we want to make viewBoxto keep the aspect ratio when stretching, can be used preserveAspectRatio.
Article Directory
grammar
preserveAspectRatioSyntax :preserveAspectRatio=[defer] <align> <meetOrSlice>
parameter
align
align parameter controls viewBoxwhether to force uniform scaling, the main control viewBoxposition , can be divided into x, ytwo portions.
Which both parts have the same three values, namely min, mid, max.
| The value | description |
|---|---|
| xMin | The minimum value of x viewBox aligned left viewport |
| xMid | The x-axis is aligned with the midpoint of the viewport viewBox x-axis midpoint |
| xMax | The maximum value of x is aligned to the right of the viewport viewBox |
| YMin | A top edge aligned with the minimum y-value of the viewport viewBox |
| YMid | ViewBox midpoint of the Y-axis Y-axis is aligned with the midpoint of the viewport |
| YMax | The maximum value of x is aligned to the right of the viewport viewBox |
meetOrSlice
| The value | description |
|---|---|
| meet | Maintain aspect ratio and viewBoxscaled to fit viewportthe size of the |
| slice | And to maintain the aspect ratio of the viewport is not all viewBoxcut out |
| none | Without saving aspect ratio. Scale image to fit the entire viewBoximage distortion may occur. |
Where the binding parameters align and meetOrSlice
xMinYMin, xMinYMid, xMinYMax, meetOrSliceValue
In fact, why ytake three different values because the end result is the same, the meetOrSlicevalue of meettime, is based on the shortest side to zoom, namely a complete picture can be displayed. It can be stretched to the shortest side with viewPorta short side length and the like.So no matter how the adjustment yvalues are not Effective。
Similarly, for the meetOrSlicevalue of slicethe situation, because it is a priority to the long side is displayed, so that the long side of the shaft no matter what the assignment to, will not be changed.