Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what is the concept of SVG window coordinate system and user coordinate system". In daily operation, I believe that many people have doubts about the concept of SVG window coordinate system and user coordinate system. I have consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what is the concept of SVG Windows coordinate system and user coordinate system". Next, please follow the editor to study!

Coordinate system

There are two coordinate systems in SVG: windows coordinate system and user coordinate system. By default, the points of 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 horizontally to the right, and the y-axis vertically down, as shown in the following figure:

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

Here we need to distinguish the concepts of Windows, Windows coordinate system, and user coordinate system:

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

Window coordinate system: it is 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 horizontal to the right, and the y-axis is vertical down. The points in this coordinate system can be transformed.

User coordinate system: it is essentially a coordinate system with an origin, x-axis and y-axis, and is infinitely extended in both 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. The points in this coordinate system can be transformed.

By default, the window coordinate system coincides with the user coordinate system, but it should be noted here that the window coordinate system belongs to the elements that create the window, and once the window coordinate system is determined, the coordinate tone of the entire window is determined. But the user coordinate system belongs to each graphic element, and as long as the drawing is transformed, a new user coordinate system is created, and all coordinates and dimensions in this element use the new user coordinate system.

To put it simply: the window coordinate system describes the initial coordinate overview of all elements in the window, and the user coordinate system describes the coordinate overview 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 transformations of canvas user coordinates, which are achieved through translation, zooming, and rotation functions; each transformation works on later drawings, unless transformed 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. SVG itself is a vector graph element, its two coordinate systems can be regarded as "user coordinate system" in essence, and the two coordinate spaces of SVG can be transformed: window space transformation and user space transformation. The window space transformation is controlled by the attribute viewBox of the related elements that create new windows; the user space transformation is controlled by the transform attribute of the graphic 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 transform-viewBox property

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

The value of the viewBox attribute is in the format (x0quotation y0instruction widthprecinct height). Each value is separated by a comma or space, and together they determine the area of the window display: the coordinate of the upper left corner of the window is set to (x0department y0), the width of the window is set to u_width, and the height is set to the height of the window; this transformation works for the entire window.

There must be no confusion here: the size and position of the window have been determined by both the element that created the window and the surrounding elements (for example, the window created by the outermost svg element is determined by CSS,width and height), and the viewBox here actually sets which part of the window coordinate system can be displayed in this determined area.

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

The calculation of the transformation is also simple: take the window of the outermost svg element as an example, suppose the width and length of svg are set to width,height,viewBox. Then the zoom ratios of the width and height of the drawing are width/u_width and height/u_height respectively. The coordinates in the upper-left corner of the window are set to (x0 ~ Y0).

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

The copy code is as follows:

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

The copy code is as follows:

In the picture drawn by the above example, you can only see the green rectangle, and the green rectangle is displayed on the screen with a size of 200 pixels. At this time, the coordinate points no longer correspond one to one, and the picture is enlarged.

The copy code is as follows:

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

In our daily work, one of the tasks we often need to accomplish is to scale a set of graphics to fit its parent container. We can do this by setting the viewBox property.

Elements that can create a new window

We can nest windows at any time. When you create a new window, you also create a new window coordinate system and a user coordinate system, including clipping paths, as well as new ones. The following is a list of elements that can create a new window:

Svg:svg supports nesting.

Symbol: creates a new window when instantiated by the use element.

Image: a new window is created when the svg element is referenced.

ForeignObject: create a new window to render the objects inside.

Maintain the scale of scaling-preserveAspectRatio property

Sometimes, especially when using viewBox, we expect graphics to occupy the entire window, rather than zooming in the same proportion in both directions. Sometimes, however, we want the two directions of the graph to be scaled in a fixed proportion. You can control this by using the property preserveAspectRatio.

This attribute is available to all elements that can create a new window, plus the image,marker,pattern,view element. And the preserveAspectRatio attribute does not work until the element has viewBox set. If viewBox is not set, the preserveAspectRatio property is ignored.

The syntax of the attribute is as follows: preserveAspectRatio= "[defer] []"

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

Defer: optional parameter, valid only for the image element. If the value of the preserveAspectRatio attribute in the image element begins with "defer", it means that the image element uses the zoom ratio of the referenced picture, and ignores "defer" if the referenced picture does not have a zoom ratio. All other elements ignore this string.

Align: this parameter determines the alignment of unified scaling. You can take the following values:

None-uniform scaling is not forced so that the drawing can fully fill the entire viewport.

XMinYMin-forces uniform scaling and aligns the sum set in viewBox to the minimum X and Y values of viewport.

XMidYMin-forces uniform scaling and aligns the midpoint in the X direction in the vivewBox to the midpoint in the X direction of the viewport, in short, the midpoint in the X direction, and the Y direction is the same as above.

XMaxYMin-forces uniform scaling and aligns the + set in viewBox to the maximum X value of viewport.

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

MeetOrSlice: optional parameter. You can go to the following values:

Meet-default value to scale the graphics uniformly so that they are all displayed in viewport.

Slice-uniformly scale the drawing so that it is full of viewport, and the excess is clipped.

Transformation of user coordinate system-transform attribute

This type transformation is specified by setting the element's transform attribute. It should be noted here that the transformation of the element set by the transform attribute affects only that element and its children, independent of other elements and does not affect other elements.

Pan-translate

The translation transformation translates the relevant coordinate values to a specified position, which requires passing in the amount of translation on the two axes. Look at the example:

The copy code is as follows:

This example draws a rectangle and translates its starting point (0jin0) to (30pc040). Although it is possible to directly set the coordinate values of (xQuery y), it is also convenient to use translation transformation to achieve it. The second parameter of this transformation can be omitted and is handled as 0 by default.

Rotate-rotate

Rotating an element is also a common task, and we can do it using the rotate transform, which requires passing in the angle parameter of the rotation. Look at the example:

The copy code is as follows:

This example shows a rectangle that rotates 45 degrees. There are a few points to note:

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

two。 Rotation refers to rotation relative to the x-axis.

3. The rotation is unfolded around the origin of the user coordinate system (0pm 0).

Tilt-skew

Transform also supports tilt transformation, either along the x-axis (left and right, positive angle is tilted to the right, actually tilting the y-axis), or along the y-axis (tilted up and down, positive angle is down, actually tilted the x-axis); the transformation requires the input of an angle parameter, which determines the angle of the tilt. Look at the following example:

The copy code is as follows:

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

Zoom-scale

The scaling object is done by a scale transformation, which accepts two parameters that specify the scale on the horizontal and vertical, respectively, and take the same value as the first parameter if the second parameter is omitted. Look at the following example:

The copy code is as follows:

ABC (scale)

ABC (scale)

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

The copy code is as follows:

A c e

B d f

0 0 1

Since only 6 values are used, it is also simplified to [a b c d e f]. The corresponding transformation can be carried out by assigning matrix to transfrom. The transformation converts both the coordinates and the length to the new size. The matrix corresponding to the above transformations is as follows:

Translation transform [1 010 tx ty]:

The copy code is as follows:

1 0 tx

0 1 ty

0 0 1

Scale transform [sx 0 0 sy 0 0]:

The copy code is as follows:

Sx 0 0

0 sy 0

0 0 1

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

The copy code is as follows:

Cos (a)-sin (a) 0

Sin (a) cos (a) 0

00 1

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

The copy code is as follows:

1 tan (a) 0

0 1 0

0 0 1

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

The copy code is as follows:

11 0

Tan (a) 1 0

00 1

Transform essence

When we summarized the canvas earlier, we knew that the various transformations were acting on the user coordinate system. In SVG, all transformations are also for two coordinate systems (essentially "user coordinate systems"). When you assign a "transform" attribute to a container object or graphic object, or a "viewBox" attribute to "svg,symbol,marker,pattern,view", SVG transforms according to the current user coordinate system to create a new user coordinate system and acts on the current object and its children. The units of coordinates and length specified in the object are no longer 1:1 corresponding to the peripheral coordinate system, but are transformed into the new user coordinate system as it deforms; the new user coordinate system acts only on the current element and its child elements.

Transformation chain

The transform property supports the setting of multiple transformations as long as they are separated by spaces and put together in the property. The effect of execution is the same as performing these transformations independently in order.

The copy code is as follows:

The effect above is the same as the one below:

The copy code is as follows:

Unit

Finally, let's talk about units. Any coordinate and length can be with or without units.

The case without a unit

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

The case with units

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 use "%".

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

Absolute unit of measure: a px is equal to a "user unit", that is, "5px" is the same as "5". But whether a px corresponds to a pixel depends on whether some changes have been made.

The other several units are basically multiples of px: 1ptspeak 1.25pxmemorie 1pcparts 15pxmemorials 1mm squares 3.543307pxmemorials 1cmsquares 35.43307pxmemorials 1inhabits 90px.

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

At this point, the study of "what is the concept of SVG window coordinate system and user coordinate system" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.