HTML5 SVG 2D entry 6-Windows coordinate system and user coordinate system and transformation Overview

Comments: SVG has two sets of Coordinate Systems: Window coordinate system and user coordinate system. By default, the points in the user coordinate system and the window coordinate system correspond one by one. Let's take a look at the coordinates and transformations. If you are interested, you can understand them. It may be helpful to you.

Coordinate System
SVG has two sets of Coordinate Systems: Window coordinate system and user coordinate system. By default, the points in the user coordinate system and the window coordinate system correspond one to one, with the origin in the upper left corner of the window, the X axis horizontal to the right, and the Y axis vertical downward; as shown in:

The window position of SVG is generally specified by CSS, And the size is set by the width and height attributes of the SVG element. However, if SVG is stored in an embedded object (such as an object element, or other SVG elements), and the documents containing SVG are formatted with CSS or XSL, And the CSS or other specified size values of these peripheral objects can be used to calculate the size of the window, the size of the peripheral object is used.

We need to distinguish between windows, windows, and users:

Windows: Refers to the visible rectangular area on the webpage. The length and width are limited. This area is generally related to the size of the peripheral object.

Windows Coordinate System: It is essentially a coordinate system with an origin, X axis and Y axis, and infinitely extending in two directions. By default, the origin is in the upper left corner of the window, the X axis is horizontal to the right, and the Y axis is vertical down. You can change the points in the coordinate system.

User Coordinate System: It is essentially a coordinate system with an origin, X axis and Y axis, and infinitely extending in two directions. By default, the origin is in the upper left corner of the window, the X axis is horizontal to the right, and the Y axis is vertical down. You can change the points in the coordinate system.

By default, the Windows coordinate system overlaps with the user coordinate system. However, you must note that the windows coordinate system belongs to the elements for creating windows. After the Windows coordinate system is determined, the coordinate tone of the entire window is determined. However, the user coordinate system belongs to each Graphic Element. As long as the coordinate transformation is performed on the image, a new user coordinate system is created. All coordinates and dimensions of the element use the new user coordinate system.

Simply put: The Window coordinate system describes the initial coordinates of all elements in the window. The user coordinate system describes the coordinates of each element. By default, all elements use the default user coordinate system that coincides with the window coordinate system.

Coordinate Space Transformation
Let's review the user coordinate transformations of the canvas, which are implemented by the translation, scaling, and rotation functions. Each transformation will take effect for the images drawn later, unless it is changed again, this is the concept of "current" user coordinate system. Canvas has only one user coordinate system.
In SVG, the situation is completely different. SVG itself is a vector graph element, and its two coordinate systems can be essentially counted as "user coordinate systems". The two coordinate spaces of SVG can be transformed: window space conversion and user space conversion. The window space transformation is controlled by the attribute viewBox of the relevant elements (these elements create new windows), and the user space transformation is controlled by the transform attribute of the Graphic Element. The window space transformation applies to the corresponding entire window, and the user space transformation applies to the current element and its child element.

Window transform-viewBox attributes

All elements that can create a window (see the next section) plus the marker, pattern, and view elements have a viewBox attribute.

The format of the viewBox property value is (x0, y0, u_width, u_height). Each value is separated by commas (,) or spaces. They jointly determine the display area of the window: the coordinates in the upper left corner of the window are set to (x0, y0), the width of the window is set to u_width, and the height is u_height. This transformation applies to the entire window.

Do not confuse: the size and position of a window have been determined by the elements of the created window and the peripheral elements. For example, the window created by the svg element on the outermost layer is determined by CSS, width and height). viewBox is used to set which part of the window coordinate system can be displayed in the determined area.
In fact, viewBox settings include two types of transformations: Zoom and shift of the window space.

The calculation of the transformation is also very simple: Taking the window of the svg element at the outermost layer as an example, assuming that the width and length of svg are set to width, height, and viewBox is set to (x0, y0, u_width, u_height ). The scaled ratio of the drawn image width and height is: width/u_width, height/u_height. The coordinates in the upper left corner of the window are set to (x0, y0 ).

The following code draws different results:

The Code is as follows:
<Svg width = "200" height = "200" viewBox = "0 0 200 200">
<Rect x = "0" y = "0" width = "200" height = "200" fill = "Red"/>
<Rect x = "0" y = "0" width = "100" height = "100" fill = "Green"/>
</Svg>

In the figure drawn in the above example, you can see green and red rectangles. In this case, the points in the window coordinate system are exactly the same as those in the window. This is also the default situation.

The Code is as follows:
<Svg width = "200" height = "200" viewBox = "0 0 100 100">
<Rect x = "0" y = "0" width = "200" height = "200" fill = "Red"/>
<Rect x = "0" y = "0" width = "100" height = "100" fill = "Green"/>
</Svg>

In the figure drawn in the above example, you can only see the green rectangle, and the green rectangle is displayed at 200*200 pixels on the screen. At this time, the coordinate points are not exactly matched, the image is enlarged.

The Code is as follows:
<Svg width = "200" height = "200" viewBox = "0 0 400 400">
<Rect x = "0" y = "0" width = "200" height = "200" fill = "Red"/>
<Rect x = "0" y = "0" width = "100" height = "100" fill = "Green"/>
</Svg>

In the figure drawn in the above example, the unit of the window coordinate system is reduced, so both rectangles are reduced.

In daily work, one task we often need to accomplish is to scale a group of images to adapt to its parent container. We can achieve this by setting the viewBox attribute.

YesCreate new window Elements
Windows can be nested at any time. When creating a new window, a new window coordinate system and user coordinate system will also be created. Of course, a new window coordinate system will also be created by path reduction. The following is a list of elements that can create a new window:
Svg: Svg supports nesting.
Symbol: Create a new window when the use element is instantiated.

Image: A new window is created when the svg element is referenced.
ForeignObject: Create a new window to render the objects in it.

Preserve the scaling ratio-preserveAspectRatio attribute
In some cases, especially when using viewBox, we expect that the image occupies the entire window, instead of scaling in the same proportion in both directions. In some cases, we hope that the two directions of the image are scaled in a fixed proportion. You can use the attribute preserveAspectRatio to control this function.
This attribute is available to all elements that can create a new window, plus the image, marker, pattern, and view elements. The preserveAspectRatio attribute takes effect only when viewBox is set for this element. If viewBox is not set, the preserveAspectRatio attribute is ignored.
The attribute syntax is as follows:PreserveAspectRatio = "[defer] <align> [<meetOrSlice>]"
Note that the three parameters must be separated by spaces.
Defer: Optional. valid only for the image element. If the value of the preserveAspectRatio attribute in the image Element starts with "defer", it means that the image element uses the scaled ratio of the referenced image, if the referenced image has no scaling ratio, ignore "defer ". All other elements ignore this string.
Align: This parameter determines the alignment mode of unified scaling. You can take the following values:
None-do not force uniform scaling, so that the image can completely fill the entire viewport.
XMinYMin-Forces uniform scaling, and alignment <min-x> and <min-y> In viewBox to the minimum X and Y values of viewport.
XMidYMin-Force uniform scaling, and align the midpoint in the X direction of vivewBox to the midpoint in the X direction of the viewport. In short, the midpoint in the X direction is aligned, and the Y direction is the same as the above.
XMaxYMin-Force uniform scaling and align <min-x> + <width> In viewBox to the maximum value of X in viewport.
Similarly, there are other types of values: xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, and xMaxYMax. The meanings of these combinations are similar to those in the preceding cases.
MeetOrSlice: Optional. values:
Meet-default value: uniformly scales the image so that all the images are displayed in the viewport.
Slice-uniformly scales the image so that the image is filled with viewport, and the excess part is cropped.

Explained the effects of various fills:

Transform-transform attributes of the user coordinate system
This type conversion is specified by setting the transform attribute of the element. It should be noted that the transformation of the element set in the transform attribute only affects the element and its child elements, and is irrelevant to other elements, and does not affect other elements.

Translation-translate
The translation transformation refers to the translation of the relevant coordinate values to the specified position. This transformation requires the amount of translation on the two axes. Example:

The Code is as follows:
<Rect x = "0" y = "0" width = "10" height = "10" transform = "translate (30,40)"/>

In this example, a rectangle is drawn and its starting point (0, 0) is translated to (30, 40. Although you can directly set the coordinate values of (x, y), it is also convenient to use translation transformation. The second parameter of this transformation can be omitted. The default value is 0.

Rotate-rotate
Rotating an element is also a common task. We can use the rotate transform to implement it. This transformation requires the input of the rotation angle parameter. Example:

The Code is as follows:
<Rect x = "20" y = "20" width = "20" height = "20" transform = "rotate (45)"/>

This example shows a rectangle with 45 degrees of rotation. Note:
1. The conversion here is based on the angle value.
2. Rotation refers to the rotation relative to the X axis.
3. The rotation is centered on the origin (0, 0) of the user coordinate system.

Tilt-skew
Transform also supports tilt transformation, which can be along the X axis (left and right tilt, the positive angle is to the right tilt, in fact, is skewed to the Y axis), or along the Y axis (up and down tilt, the positive angle is skewed downward, but the X axis is actually skewed). The conversion requires an angle parameter, which determines the angle of skew. See the following example:

The Code is as follows:
<Svg width = "100" height = "100">
<Rect x = "0" y = "0" width = "100" height = "100" fill = "green"/>
<Circle cx = "15" cy = "15" r = "15" fill = "red"/>
<Circle cx = "15" cy = "15" r = "15" fill = "yellow" transform = "skewX (45)"/>
<Rect x = "30" y = "30" width = "20" height = "20"/>
<Rect x = "30" y = "30" width = "20" height = "20" transform = "skewX (45)"/>
<Rect x = "30" y = "30" width = "20" height = "20" transform = "skewY (45)"/>
</Svg>

In the result, you can directly see the rectangle of the same size. After different skew transformations, the position and shape are obtained. Note that the start position of the rectangle has been changed because (30, 30) is already in different positions in the new coordinate system.

Scale-scale
The scaling object is completed by the scaling transformation. This transformation accepts two parameters, respectively specifying the horizontal and vertical scaling ratios. If the second parameter is omitted, the same value is obtained as the first parameter. See the following example:

The Code is as follows:
<Svg width = "500" height = "500">
<Text x = "20" y = "20" font-size = "20"> ABC (scale) </text>
<Text x = "50" y = "50" font-size = "20" transform = "scale (1.5)"> ABC (scale) </text>
</Svg>

Matrix
All those who have learned graphics know that all transformations are actually represented by matrices, so the preceding transformations can be expressed using a 3*3 matrix:

The Code is as follows:
A c e
B d f
0 0 1

Since only 6 values are used, it is also abbreviated as [a B c d e f]. Assign matrix (a, B, c, d, e, f) to transfrom to implement the corresponding transformation. The transformation converts coordinates and lengths into new dimensions. The matrices corresponding to the preceding transformations are as follows:

Translation transformation [1 0 1 0 tx ty]:

The Code is as follows:
1 0 tx
0 1 ty
0 0 1

Scaling and transformation [sx 0 0 sy 0 0]:

The Code is as follows:
Sx 0 0
0 sy 0
0 0 1

Rotation Transformation [cos (a) sin (a)-sin (a) cos (a) 0 0]:

The Code is as follows:
Cos (a)-sin (a) 0
Sin (a) cos (a) 0
00 1

Skew along the X axis [1 0 tan (a) 1 0 0]:

The Code is as follows:
1 tan (a) 0
0 1 0
0 0 1

Skew along the Y axis [1 tan (a) 0 1 0 0]:

The Code is as follows:
11 0
Tan (a) 1 0
00 1

Changing nature
In the previous summary of canvas, we know that all kinds of Transformations work in the user coordinate system. In SVG, all transformations are for two coordinate systems (essentially "user coordinate system. After the "transform" attribute is specified for the container object or graphic object, or the "svg, symbol, marker, pattern, view" viewBox "attribute is specified, SVG creates a new user coordinate system based on the current user coordinate system and acts on the current object and its sub-objects. The coordinates and length units specified in the object are no longer corresponding to the peripheral coordinate system, but are converted to the new user coordinate system with deformation; the new user coordinate system only acts on the current element and its child element.

Transform chain
Multiple transformations can be set for the transform attribute, which can be separated by spaces and put together in the attribute. The execution result is the same as the execution of these transformations independently in order.

The Code is as follows:
<G transform = "translate (-10,-20) scale (2) rotate (45) translate (5, 10)">
<! -- Graphics elements go here -->
</G>

The above effect is the same as the following:

The Code is as follows:
<G transform = "translate (-10,-20)">
<G transform = "scale (2)">
<G transform = "rotate (45)">
<G transform = "translate (5, 10)">
<! -- Graphics elements go here -->
</G>
</G>
</G>
</G>

Unit
Finally, let's talk about the unit. Any coordinate and length can be taken with or without the unit.
No unit

The value without unit is considered to contain "user unit", which is the unit value of the current user coordinate system.
Unit

The relevant units in svg are the same as those in CSS: em, ex, px, pt, pc, cm, mm, and in. The length can also be "% ".
Relative Measurement Units: em and ex are the same as those in CSS. They are relative to the font-size and x-height of the current font.
Absolute Measurement Unit: A px is equal to a "user unit", that is, "5px" is the same as "5. However, if a px corresponds to a pixel, You can see whether there have been some transformations.
The other units are basically multiples of px: 1pt = 1.25px, 1 pc = 15px, 1mm = 3.543307px, 1 CM = 35.43307px, 1in = 90px.

If no unit ("user unit") is specified for the width and height of the SVG element on the outermost layer, these values are considered as px.

This article compares the coordinates and lengths of the new user coordinate system as long as you remember that "the coordinates and lengths of graphic elements refer to the coordinates and lengths of the new user coordinate system after the Windows Coordinate System Transformation and the user coordinate system transformation"You can..

Practical reference:
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v = vs.85). aspx
Development Center: https://developer.mozilla.org/en/SVG
Hot reference: http://www.chinasvg.com/
Official documents: http://www.w3.org/TR/SVG11/