SVG basics | SVGVIEWPORT, VIEWBOX, and PRESERVEASPECTRATIO-

The viewport and viewBox of the SVG image are used to set the size of the visible area of the image. PreserveAspectRatio is used to specify the viewBox alignment mode and the storage Aspect Ratio mode .,.

The viewport and viewBox of the SVG image are used to set the size of the visible area of the image.

　　 SVG VIEWPORT

Viewport is the visible area of the SVG image. An SVG image can theoretically be infinitely large, but only some parts of the image can be seen at the same time. This visible area is called viewport.

SVG viewport is similar to browsing a page in a browser. The page can be very large, and its width is wider than the browser's. Its height is also higher than the browser's. However, only the page on the current screen is visible,

You can Use the width and height attributes in the element to specify the viewport size.

This example defines a viewport with a width of 500 and a height of 300.

In SVG, it can only contain units or not. If the unit is not specified for the value, it uses pixels. In the preceding example, the viewport is 500 pixels in width and 300 pixels in height.

You can also specify units for these values. The supported length units in SVG include em, ex, pt, px, pc, cm, mm, in, and percentage.

• Em: default font size, usually the height of one character
• Ex: The height of character x
• Px: pixel
• Pt: Count, 1/72 inch
• Pc: Picas, 1/6 inch
• Cm: centimeter
• Mm: millisecond
• In: inches
  

In The Unit set on will only apply Element (viewport ). The size of the image in SVG is determined by the unit of each image.

The following is an example: The element specifies the cm unit, and each graph in it has its own unit.

1. 
   
3. Style = "stroke: #000000; fill: none;"/>
   
4. 
   
6. Style = "stroke: #000000; fill: none;"/>
   

The following is the returned result. Note that the image on the right must be larger than the image on the left.

SVG VIEWBOX

We can think that the View Box is a real Coordinate System of SVG. ViewBox is a coordinate system used to draw SVG images on the canvas. The coordinate system can be larger or smaller than the viewport, and it can be completely or partially visible in the viewport.

If you do not specify the viewBox attribute, the browser will create a default user coordinate system, which is the same as the viewport coordinate system.

You can use viewBox to specify your own user coordinate system. If the user coordinate system and viewport coordinate system you specify have the same aspect ratio, it will be stretched to fill the entire viewport area. If the aspect ratio is different, you can use the preserveAspectRatio attribute to specify whether the coordinate system is completely visible in the viewport. You can also specify its position in the viewport coordinate system.

　 VIEWBOX syntax

1. ViewBox =

　　 And The value determines the position in the upper left corner of the viewbox. And The value determines the width and height of the viewport. Note that you do not need to set the width and height of the viewBox. The width and height of the element are the same. And It cannot be set as a negative number.

Let's look at the following example:

1. 
   
2. 
   
4. Style = "stroke: #000000; fill: none;"/>
   
5. 
   

In this example, the viewBox starts from (0, 0), the width is 50 pixels, and the height is 20 pixels. This means that, at 500 pixels wide, 200 pixels high Inside the element, a coordinate system starts from (0, 0) with a width of 50 pixels and a height of 20 pixels is used. In other words, the width of each unit in the image is 500/50 = 10 pixels. In the height of the image, each unit is 200/20 = 10 pixels in height. That is to say, the x coordinates of the rectangle are 20, and the y coordinate 10 is actually the coordinate point (200,100), and its width and height are 100 pixels and 50 pixels respectively.

The returned results are as follows:

　　 PRESERVEASPECTRATIO)

If the viewport and viewBox have different aspect ratios. You need to specify how to display SVG images in an SVG reader (such as a browser. You can Using the preserveAspectRatio attribute.

　　 PRESERVEASPECTRATIO syntax

1. PreserveAspectRatio = defer? ?

The defer parameter is an optional value. It is used only when the preserveAspectRatio attribute is applied to the image element. Other elements are ignored.

Whether the align parameter is forcibly scaled evenly. If align is set to none, the image is scaled to adapt to the viewport size, regardless of its aspect ratio.

Other preserveAspectRatio values maintain the viewbox aspect ratio while uniformly scaling, and specify the alignment of the viewbox In the viewport. The value of the align parameter is divided into two parts: the first part specifies the alignment of X coordinates, and the second part specifies the alignment of Y coordinates. The following lists the alignment of X and Y:

Value	Description
XMin	The minimum X value of the viewBox is aligned with the left part of the viewport.
XMid	The X-axis midpoint of the viewBox is aligned with the x-axis midpoint of the viewport.
XMax	The maximum X value of the viewBox is aligned to the right of the viewport.
YMin	The minimum Y value of viewBox is aligned with the top edge of viewport.
YMid	The Y-axis midpoint of viewBox is aligned with the y-axis midpoint of viewport.
YMax	The maximum Y value of the viewBox is aligned with the bottom edge of the viewport.

You can combine X and Y to form an align parameter, for example, xMaxYMax or xMidYMid.

What do the above values mean? Confused! You can think of it as the background-position attribute when percentage value is used in CSS. ViewBox is like a background image. Using Different align values is like using different background-position values in viewport to locate viewBox.

As shown in the figure below, its align value is xMidYMid. In the image, the gray coordinate system is the viewport coordinate system, and the blue coordinate system is the viewBox coordinate system. When the value of align is xMidYMid, the center of the viewBox coordinate system is aligned with the center of the viewport coordinate system. It is equivalent to backrgound-position: 50% 50%; in CSS ;.

Combine the values in the preceding table to obtain the following nine align values:

• XMinYMin: The minimum X value of the viewport and the min-y value of the viewport. The value is equivalent to backrgound-position: 0% 0% ;.
• XMinYMid: The minimum X value of viewport alignment of viewBox, And the y-axis midpoint of viewBox alignment of viewport. The value is equivalent to backrgound-position: 0% 50% ;.
• XMinYMax: Minimum X value of viewport alignment of viewBox and min-y + maximum Y value of viewport alignment. The value is equivalent to backrgound-position: 0% 100% ;.
• XMidYMin: The X-point of the viewBox is aligned with the X-point of the viewport, And the min-y is the smallest Y value of the viewport. The value is equivalent to backrgound-position: 50% 0% ;.
• XMidYMid (default): The X-axis midpoint of viewBox is aligned with the x-axis midpoint of viewport, And the y-axis midpoint of viewBox is aligned with the y-axis midpoint of viewport. The value is equivalent to backrgound-position: 50% 50% ;.
• XMidYMax: The X-point of the viewBox is aligned with the X-point of the viewport, and min-y + is aligned with the maximum Y value of the viewport. The value is equivalent to backrgound-position: 50% 100% ;.
• XMaxYMin: the maximum value of the viewBox plus the value of the viewportX axis, and the min-y value of the viewport. The value is equivalent to backrgound-position: 100% 0% ;.
• XMaxYMid: The + value of the viewBox is the maximum value of the viewportX axis, and the y-axis value of the viewBox is the y-axis value of the viewport. The value is equivalent to backrgound-position: 100% 50% ;.
• XMaxYMax: the maximum value of viewBox + alignment of viewportX axis and min-y + alignment of viewport. The value is equivalent to backrgound-position: 100% 100% ;.
  

Sometimes, based on the viewBox size, the values above may get the same result. For example, when viewBox = "0 0 200 300", align takes different values respectively. The meetOrSlice values are all meet. The result is as follows:

If we set the meetOrSlice value to slice, different results will be obtained. For example:

Another parameter of preserveAspectRatio has three values:

Value	Description
Meet	Maintain the aspect ratio and scale the viewBox to fit the viewport size.
Slice	Maintain the aspect ratio and crop all viewboxes that are not in the viewport.
None	Do not save the aspect ratio. The scaled image is suitable for the entire viewbox and may cause image deformation.

Take a look at the following images: meet and slice.



As you can see, when set to meet, viewBox retains the original aspect ratio, and all the images are displayed. The background-siz: contain is the same when meet and CSS set the background image. When it is set to slice, The viewBox maintains the original width-to-height ratio and scales up to the entire viewport. The part beyond the viewport is cropped. The slice and CSS background-siz: cover are similar.

So what is viewBox scaled based on?

Let's look at an example. In this example, the viewport is 500 in width and 75 in height. Set viewBox to 0 0 250 75. This means that in x, each coordinate Unit represents 2 pixels, and in the Y axis, each coordinate Unit represents 1 pixel. Because the ratio on the X axis is 500/250, the ratio on the Y axis is 75/75. This will distort the image, but we can use preserveAspectRatio to correct it.

In the first example, we first set preserveAspectRatio to xMinYMin meet. This ensures that the aspect ratio remains unchanged and the viewBox scales to adapt to the viewport size. The viewBox is scaled based on a smaller value in the aspect ratio. That is, the y-axis ratio. Its value is 1 (the ratio of the x-axis is 2 ). ViewBox is placed in the upper left corner of the viewport because the value of align is xMinYMin. Below are the code and returned results:

2. PreserveAspectRatio = "xMinYMin meet"
   
3. Style = "border: 1px solid # cccccc;">
   
4. 
   
6. Style = "stroke: #000000; fill: none;"/>
   

In the second example, we set preserveAspectRatio to xMinYMin slice. This setting also maintains the aspect ratio, but the viewbox scales based on the value with a larger value in the aspect ratio. That is, the ratio of the X axis. Its value is 2. The returned image is larger than the viewport, and the part beyond the viewport will be cropped. Below are the code and returned results:

2. PreserveAspectRatio = "xMinYMin slice"
   
3. Style = "border: 1px solid # cccccc;">
   
4. 
   
6. Style = "stroke: #000000; fill: none;"/>
   

In the third example, we set preserveAspectRatio to none. This means that the viewBox will fill the entire viewport, which means the ratio of the X axis and Y axis is different, and the image will be deformed.

2. PreserveAspectRatio = "none"
   
3. Style = "border: 1px solid # cccccc;">
   
4. 
   
6. Style = "stroke: #000000; fill: none;"/>
   

　　 Alignment of VIEWBOX

Here are some examples of viewBox alignment. Let's look at the following code:

2. PreserveAspectRatio = "xMinYMin meet"
   
3. Style = "border: 1px solid # cccccc;">
   
4. 
   
6. Style = "stroke: #000000; fill: none;"/>
   

In this example, the width of svg is set to 500, the height is set to 100, and the viewBox is set to 0 0 50 50. This means the ratio on the X axis is 500/50 = 10, and the ratio on the Y axis is 100/50 = 2. In svg, the circular radius is 25. In fact, its width and height are both 50 units, and the whole viewBox is filled (not the viewport ).

When we specify it as meet, viewBox scales according to the Y axis, because the Y axis proportion is small. In other words, viewBox will be filled with full viewport in the Y axis direction, but in the X axis direction, viewBox will only be filled with 2*50 pixels = 100 pixels. Because the viewport has a width of 500 pixels, you must specify the horizontal alignment mode of the viewBox. In this case, the first part of the align value of preserveAspectRatio can be xMin, xMid, or xMax.

The values of preserveAspectRatio are xMinYMin meet, xMidYmin meet, and xMaxYmin meet.

Similar to the preceding example, if the viewBox aspect ratio is smaller than the Y axis in the X direction, you must specify the alignment mode on the Y axis.

In the following example, the viewport width is set to 100, and the height is set to 200.

The viewBox is the same as the preceding example. Here, the ratio of the Y axis is 200/50 = 4, and the ratio of the X axis is 100/50 = 2. Because it is meet mode, this time it will be scaled according to the X axis. Fill the entire viewport in the X axis and fill 2*50 pixels = 100 pixels in the Y axis.

The values of preserveAspectRatio are xMinYMin meet, xMinYMid meet, and xMinYMax meet.

This article copyright belongs to the jQuery house, reproduced please indicate the source: http://www.htmleaf.com/ziliaoku/... g/201506182064.html