HTML5's SVG 2D Introduction 6 - Overview of Windows Coordinate System and User Coordinate System and Transformation

Author：Eve Cole Update Time：2025-04-06 02:00:03

Coordinate system

There are two coordinate systems in SVG: the window coordinate system and the user coordinate system. By default, the points of the user coordinate system and the window coordinate system correspond one by one, both of which are the origin in the upper left corner of the window, the x-axis is horizontally to the right, and the y-axis is vertically to the downward; as shown in the figure below:

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

Here we need to distinguish the concepts of windows, window coordinate systems, and user coordinate systems:

Window : refers to the visible rectangular area on the web page, with limited length and width, and this area is generally related to the size of the peripheral object.

Window coordinate system : essentially a coordinate system with origin, x-axis and y-axis; and it extends infinitely in both directions. By default, the origin is in the upper left corner of the window, the x-axis is horizontally to the right, and the y-axis is vertically to the downward. The points in this coordinate system can be transformed.

User coordinate system : essentially a coordinate system with origin, x-axis and y-axis; and it extends infinitely in both directions. By default, the origin is in the upper left corner of the window, the x-axis is horizontally to the right, and the y-axis is vertically to the downward. The points in this coordinate system can be transformed.

By default, the window coordinate system and the user coordinate system overlap, but it should be noted here that the window coordinate system belongs to the element that creates the window. After the window coordinate system is determined, the coordinate tone of the entire window will be determined. However, the user coordinate system belongs to each graphic element. As long as the graphic has coordinate transformation, a new user coordinate system will be created. All coordinates and dimensions in this element use this new user coordinate system.

To put it simply: the window coordinate system describes the initial coordinate profile of all elements in the window, and the user coordinate system describes the coordinate profile 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 transformation of canvas user coordinates, which are implemented through translation, scaling, and rotation functions; each transformation will work on the figures drawn later, unless the transformation is performed again, which is the concept of the current user coordinate system. canvas has only one user coordinate system.

In SVG, the situation is completely different. As a vector graph element, SVG itself can essentially be considered as user coordinate systems; both coordinate spaces of SVG can be transformed: window space transformation and user space transformation. The window space transformation is controlled by the property viewBox of the related elements (these elements create new windows); the user space transformation is controlled by the transform attribute of the graph element. The window space transformation is applied to the corresponding entire window, and the user space transformation is applied to the current element and its child elements.

Window transformation - viewBox property

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

The format of the viewBox attribute value is (x0,y0,u_width,u_height), and each value is separated by a comma or space. They jointly determine the area displayed by the window: the coordinates of 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 works for the entire window.

Don't confuse here: the size and position of the window have been determined by the element that creates the window and the peripheral elements (for example, the window created by the outermost svg element is determined by CSS, width and height). The viewBox here is actually to set this determined area to display which part of the window coordinate system.

The setting of viewBox actually includes two transformations: zoom and translation of the window space.

The calculation of the transformation is also very simple: take the view window of the outermost svg element as an example, assuming that the width and length of svg are set to width, height, and the setting of viewBox is (x0, y0, u_width, u_height). Then the scales of width and height of the drawn figure are: width/u_width, height/u_height respectively. The coordinates of the upper left corner of the window are set to (x0,y0).

Experience the differences in the results drawn by the following codes:

</svg>

In the figure drawn in the example above, you can see green and red rectangles. In this case, the points in the window coordinate system still correspond to the points on the window, which is also the default.

</svg>

In the figure drawn in the example above, you can only see the green rectangle, and the green rectangle is displayed on the screen with 200*200 pixels. At this time, the coordinate points are no longer one by one, and the figure is enlarged.

</svg>

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

In daily work, one task we often need to complete is to scale a set of graphics to adapt it to its parent container. We can achieve this by setting the viewBox property.

Elements that can create new windows

At any time, we can nest windows. When creating a new window, a new window coordinate system and user coordinate system will be created, and of course, a new one will be created, including the clipping path. The following is a list of elements that can create a new window:

svg : svg supports nesting.

symbol : Create a new window when instantiated by the use element.

image : A new window is created when referencing an svg element.

foreignObject : Create a new window to render the object inside.

Keep scaling scale-preserveAspectRatio property

Sometimes, especially when using viewBox, we expect the graphics to occupy the entire window instead of scaling in the same proportion in both directions. Sometimes, we hope that the two directions of the figure are scaled at a fixed scale. Use the attribute preserveAspectRatio to achieve the purpose of controlling this.

This property is all elements that can create a new window, plus image, marker, pattern, and view elements. Moreover, the preserveAspectRatio attribute will only work after the viewBox is set to the element. If the viewBox is not set, the preserveAspectRatio property is ignored.

The syntax of the attribute is as follows: preserveAspectRatio=[defer] <align> [<meetOrSlice>]

Note that the 3 parameters need to be separated by spaces.

defer : optional parameter, only valid for image elements. If the value of the preserveAspectRatio attribute in the image element starts with defer, it means that the image element uses the scaling ratio of the referenced image. If the referenced image has no scaling ratio, defer is ignored. All other elements ignore this string.

align : This parameter determines the alignment of unified scaling, and the following values can be taken:

none - Unforced unified scaling, so that the graphics can fill the entire viewport completely.

xMinYMin - Force uniform scaling, and align the <min-x> and <min-y> set in the viewBox to the minimum X and Y values of the viewport.

xMidYMin - Force unified scaling, and align the midpoint in the X direction in vivewBox to the midpoint of the X direction of the viewport. In short, the midpoint in the X direction is aligned, and the Y direction is the same as above.

xMaxYMin - Force uniform scaling, and align the <min-x> + <width> set in viewBox to the maximum X value of viewport.

There are other types of values similar to: xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax. The meaning of these combinations is similar to the above situations.

meetOrSlice : optional parameter, you can use the following values:

meet - default value, uniformly scale the graphics, so that all graphics are displayed in the viewport.

slice - Unified scaling of the graphics, allowing the graphics to fill the viewport, and the excesses are cut out.

The following figure explains the effects of various fills:

Transformation of user coordinate system - transform attribute

This type of transformation is specified by setting the element's transform property. It should be noted here that the transformation of the element set by the transform attribute only affects the element and its child elements, has nothing to do with other elements, and does not affect other elements.

Translation - translate

The translation transform translates the relevant coordinate values to the specified position, and the transformation needs to be passed into the amount translated on both axes. See example:

This example draws a rectangle and translates its starting point (0,0) to (30,40). Although the coordinate value of (x,y) can be set directly, it is also very convenient to implement it using translation transformation. The second parameter of this transformation can be omitted, and the default is processed when 0 is processed.

Rotate - rotate

Rotating an element is also a very common task. We can use the rotate transformation to implement it, which requires the rotation angle parameter to be passed in. See example:

This example shows a 45-degree rotation rectangle. A few notes:

1. The transformation here takes the angle value as the parameter.

2. Rotation refers to rotation relative to the x-axis.

3. Rotation is expanded around the origin (0,0) of the user coordinate system.

Leaning - skew

Transform also supports tilt transformation, which can be tilted along the x-axis (left and left and right angles are tilted to the right, which is actually tilted to the y-axis), or along the y-axis (up and down, which is tilted to the downward angle, which is actually tilted to the x-axis). This transformation requires an angle parameter to be passed, which will determine the angle of inclination. See the following example:

<svg>

</svg>

From the result, you can directly see the position and shape of the rectangle of the same size after different inclination transformations. Note here that the starting position of the rectangle has changed, because in the new coordinate system (30,30) is already in different positions.

Scale-scale

The scaling object is completed by a scaling transformation, which accepts 2 parameters, specifying the scaling ratios on horizontal and vertical respectively. If the second parameter is omitted, the same value as the first parameter is taken. See the following example:

<svg>

<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>

Transform matrix - matrix

Anyone who has studied graphics knows that all transformations are actually represented by matrices, so the above transformations can actually be represented by a 3*3 matrix:

ace

bdf

0 0 1

Since only 6 values are used, it is also abbreviated as [abcdef]. Assign matrix(a,b,c,d,e,f) to transform to implement the corresponding transformation. The transformation will convert both coordinates and lengths into new dimensions. The corresponding matrices of the above transformations are as follows:

Translation Transformation[1 0 1 0 tx ty]:

1 0 tx

0 1 ty

0 0 1

Scaling transformation [sx 0 0 sy 0 0]:

sx 0 0

0 sy 0

0 0 1

Rotational transformation [cos(a) sin(a) -sin(a) cos(a) 0 0]:

cos(a) -sin(a) 0

sin(a) cos(a) 0

00 1

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

1 tan(a) 0

0 1 0

0 0 1

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

11 0

tan(a) 1 0

00 1

Change the essence

When we summarized canvas before, we knew that all kinds of transformations are applied to the user coordinate system. In SVG, all transformations are also for two coordinate systems (essentially user coordinate systems). After specifying the transform attribute to the container object or the graph object, or specifying the viewBox attribute to svg, symbol, marker, pattern, view, SVG will transform according to the current user coordinate system to create a new user coordinate system, and act on the current object and its sub-objects. The units of coordinates and length specified in this object are no longer 1:1 corresponding to the peripheral coordinate system, but are converted to the new user coordinate system as it deforms; this new user coordinate system only acts on the current element and its child elements.

Transformation chain

The transform property supports setting multiple transformations. These transformations are just separated by spaces in the middle and placed together in the property. The execution effect is the same as performing these transformations independently in order.

</g>

The above effect is the same as the following:

</g>

unit

Finally, let’s talk about units. Any coordinates and lengths can be equipped with and without units.

Without unit

A value without units is considered to have user units, which is the unit value of the current user coordinate system.

The situation of bringing units

The relevant units in svg are the same as in CSS: em, ex, px, pt, pc, cm, mm and in. % can also be used for length.

Relative units of measurement: em and ex are also similar to CSS, relative to the font-size and x-height of the current font.

Absolute unit of measurement: One px is equal to a user unit, that is, 5px is the same as 5. However, whether a px corresponds to a pixel depends on whether there have been some transformations.

The other units are basically multiples of px: 1pt=1.25px, 1pc=15px, 1mm=3.543307px, 1cm=35.43307px, 1in=90px.

If the width and height of the outermost SVG element do not specify units (that is, user units), these values will be considered to be px.

This article is quite difficult to talk about. In fact, just remember that the coordinates and length of the graphic element refer to the coordinates and length of the new user coordinate system after the double transformation of the window coordinate system and the user coordinate system transformation.

Practical reference:

Script index: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Development Center: https://developer.mozilla.org/en/SVG

Popular reference: http://www.chinasvg.com/

Official document: http://www.w3.org/TR/SVG11/