The foundation is very important.
Viewport
Represents the size of the SVG visible area, or can be imagined as stage size, canvas size.
<width= " max" height= "></svg " >
The SVG code above defines a viewport with a width of 500 units and a height of 300 units.
Note that the wording here is "unit", not "pixel". Although, width
height
if it is a pure number, the use of "Pixels" as the unit.
In other words, the size of the above SVG viewport is 500px * 300px
.
Of course, the phrase "unit", the subtext is that you can use other types of units, covering common CSS units:
Unit |
meaning |
Em |
The font size relative to the parent element |
Ex |
Height relative to the lowercase letter "x" |
Px |
Relative to screen resolution instead of window size: typically 1 dots or 1/72 inches |
Inch |
inch, Table Inch |
Cm |
centimeter, table cm |
Mm |
millimeter, table mm |
Pt |
1/72 inch |
Pc |
12-point movable, or 1/12-point |
% |
Relative to the parent element. It is normal to define itself or other elements through attributes |
In addition to the SVG itself, some other elements, such as <rect>
width
/ height
properties, can also use the units above, and the default units are pixels.
Viewbox Property
This is the focus of this article, but also difficult.
First look at a lively example, the following HTML code:
<svgwidth= "The "Height= "+"ViewBox= "0,0,40,30"style= "border:1px solid #cd0000;"> <rectx= "Ten"y= "5"width= " the"Height= " the"Fill= "#cd0000"/></svg>
The results are as follows:
Or watch the demo yourself.
If you don't look viewBox
, you'll be surprised--svg size obviously has 400*300 pixels, and small <rect>
size only it 1/20
, but the show is occupied half of it! Not science!
OK, the reason why the small rectangular Big Show is here to viewBox
play a role in fuelling.
viewBox
The value has 4 digits:
viewbox= "x, y, Width, height" //x: Upper left corner, y: Upper left ordinate, width: breadth, Height: high
viewBox
As implies meaning is the "viewport box" means, like saying: "SVG ah, or you let me fill you ~"
The more vivid explanation is: SVG is like our monitor screen, Viewbox is the screenshot tool selected the box, the final rendering is to put the screenshot in the box in the display screen again!
More intuitive explanation:
1. If not viewBox
, it should look like this:
<rect>
The size is only for the entire SVG stage 1/20
.
2. the viewBox="0,0,40,30"
equivalent of a box shown in the upper-left corner of the SVG circle:
3. then zoom the box, along with the small rectangle in the box, to the entire SVG size (gif below):
In the hands of the is their own, you can click here: SVG Viewbox Property Principle of the steps to demonstrate the demo
Preserveaspectratio
In the above example, the aspect ratio of SVG is exactly the same as the viewbox aspect ratio 4:3
. Obviously, the actual application cannot always be the same as the viewBox
viewport
one diaper. At this point, you need to go preserveAspectRatio
, this property is also applied to the <svg>
element, and the object is Viewbox.
Let's see how the Pigs run:
preserveaspectratio= "Xmidymid Meet"
Now let's eat pork.
preserveAspectRatio
The value of the property is a combination of two values separated by a space. For example, the above xMidYMid
and meet
.
The 1th value indicates how the Viewbox aligns with the SVG viewport, and the 2nd value indicates how the aspect ratio (if any) is maintained.
Where the 1th value is made up of two parts. The first half represents the alignment of the x
direction, and the latter part represents y
the direction alignment. The family members are as follows:
value |
meaning |
XMin |
Viewport and Viewbox align to the left |
Xmid |
Viewport and Viewbox X-axis Center alignment |
Xmax |
Viewport and Viewbox right align |
Ymin |
Align the viewport and viewbox top edges. Note Y is uppercase. |
Ymid |
Aligns the center points of the viewport and Viewbox y axes. Note Y is uppercase. |
YMax |
Align the viewport and viewbox bottom edges. Note Y is uppercase. |
x
, y
free fit is available, such as:
Xmaxymax
Xmidymid
Dear little Buddy, you see what that means?
Thump thump pedal, yes, is the combination of meaning: "Right-down" and "medium-medium" alignment. Congratulations on your knowledge points here to learn the smooth graduation!
preserveAspectRatio
The values in part 2nd of the attribute support the following 3:
value |
meaning |
Meet |
Maintain aspect ratio scaling Viewbox adapt to viewport, subject to |
Slice |
Keep the aspect ratio small in the direction of the enlargement and fill viewport, attack |
None |
Twist aspect ratios to fully adapt to viewport, perverted |
There is an urgent need for a living example that will allow you to feel the performance of these three values.
You can click here:meet,slice,none function Demo Demo
First, look at the SVG code:
<svgwidth= "The "Height= "$"ViewBox= "0 0"style= "border:1px solid #cd0000;"> <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>
Intercept the left half of the SVG (200 just 400 of the width) as the viewport, with a 150*150
red rectangle inside.
The default shows are as follows:
If I'm right, the default should be the "xMidYmid meet"
effect.
① If it is an meet
effect, the code is as follows:
<svgwidth= "The "Height= "$"ViewBox= "0 0"Preserveaspectratio= "Xminymin Meet"style= "border:1px solid #cd0000;"> <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>
The effect is as follows:
The performance principle is: SVG wide, 400
high 200
, Viewbox wide 200
, high 200
. x
The horizontal scale is 2
the y
vertical axis ratio 1
. meet
The function is to let viewbox and so on, and so on at the same time, completely in the SVG viewport display. Here, the minimum scale is vertical 1
, so the Viewbox actually does not have any scaling.
As long as we viewBox
make a small change to the attribute value (200→300), we can feel the zoom:
<svgwidth= "The "Height= "$"ViewBox= "0 0"Preserveaspectratio= "Xminymin Meet"style= "border:1px solid #cd0000;"> <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>
At this point the effect is:
After the change, the height of the 300
Viewbox is higher than the viewport 200
, so, viewbox to fully adapt to viewport, it is necessary to scale, so we can go up to the upper rectangular area becomes smaller, because of the scale of the result (zoom 200/300
, Almost the original 66.7%
).
② If it is slice
, slice
it has the meaning of shearing itself. The code is as follows:
<svgwidth= "The "Height= "$"ViewBox= "0 0"Preserveaspectratio= "Xminymin Slice"style= "border:1px solid #cd0000;"> <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>
Effect:
slice
is also to maintain the aspect ratio of the viewbox, but its role is to fill viewport as far as possible. Again, here Viewbox width 200
, svg width
is 400
. Obviously, to maximize the fill, the width of the viewbox needs to be enlarged to twice times the original. So, there is a viewbox magnification twice times after the effect. Since the viewbox part of the area is beyond the viewport, the content outside the viewport is not visible, so the slice
"cut" effect appears.
③
If it is none
, it indicates that the proportions are not cared for, and the Viewbox is stretched directly to the maximum fill viewport.
<svgwidth= "The "Height= "$"ViewBox= "0 0"Preserveaspectratio= "Xminymin None"style= "border:1px solid #cd0000;"> <rectx= "Ten"y= "Ten"width= "Max"Height= "Max"Fill= "#cd0000"/></svg>
Originally a good square, now because of the viewbox stretch, has become a wide 2:1
-height rectangle.
Alignment of the Viewbox
Thousands of words than a can do their own experience of the demo, you can ruthlessly click here:Viewbox The alignment of the various names to express feelings demo
Cut two pictures to show you:
Whether it is meet
or slice
not, you are not able to see in a state at the same time x
, the y
direction of the displacement. Because there is always a direction is full of viewport.
Conclusion
This article is a basic technical article with almost no personal emotion, individual spit groove, to meet the appetite of different groups.
Haste, error inevitably, welcome to correct. Welcome to the Exchange.
Original http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/
Understanding the Viewport,viewbox,preserveaspectratio of SVG