This article introduces the SVG coordinate system and various SVG graphics conversion knowledge. Svg graphics conversion includes scaling, moving, tilting, and rotating the image .,.
SVG Coordinate System
Coordinate System
The origin (0, 0) of a normal Cartesian coordinate system is located in the lower left corner. The top-to-right of the X axis is a positive value and the left is a negative value. In the Y axis, the value is positive and the value is negative. As shown in:
The coordinate origin of the SVG coordinate system is located in the upper left corner. The X axis is the same as the X axis of the Cartesian coordinate system, but the Y axis is the opposite. If the midpoint of the SVG or the numerical value increases, it increases down rather than up. As shown in:
Unit of the SVG Coordinate System
You can specify the value of 1 unit in the SVG coordinate system. If you do not specify the unit explicitly, the unit is pixel (px. The following are the units that can be used by SVG elements:
- 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
SVG Element conversion-TRANSFORM attributes
SVG elements can be scaled, moved, skewed, and rotated, just as HTML elements can be converted using CSS. However, the conversion between SVG and HTML elements varies depending on the coordinate system.
TRANSFORM attributes
Transform is used to specify one or more conversion effects on an element. It uses a series of predefined values as parameters and applies them to elements one by one in sequence.
Available SVG conversions include rotation, displacement, skew, and rotation. The transform attributes of SVG are similar to those of CSS transform, but their parameters are different.
Matrix
You can use the matrix () function to apply one or more transformations on an SVG element. The syntax of matrix conversion is:
- Matrix ( )
The preceding Declaration specifies a matrix transformation that contains six parameters. Matrix (a, B, c, d, e, f) is equivalent to matrix [a B c d e f].
Displacement
To move an SVG element, you can use the translate () function. The syntax of displacement is:
- Translate ( [ ])
The translate () function can contain one or two parameters to indicate horizontal or vertical displacement.
The ty parameter is optional. If it is not specified, it is 0 by default. The tx and ty parameters can be separated by space or comma, and they do not need to be used. Their units use the units of the user coordinate system.
In the following example, an SVG element moves 100 user units to the right and 300 user units downward.
-
The preceding conversion code can also be written as: translate (100,300), separated by commas.
Zoom
You can use the scale () function to scale SVG elements. The scaling syntax is:
- Scale ( [ ])
The scale () function can contain one or two parameters, indicating horizontal or vertical scaling.
The sy parameter is an optional value. If it is not specified, it is equal to the value of sx. The sx and sy parameters can be separated by spaces or commas. And they are non-unit numbers.
In the following example, an SVG element is zoomed twice the original size.
-
In the following example, the horizontal direction of SVG elements is doubled, and the vertical direction is halved.
-
Similarly, we can use commas to separate the parameters of the scale () function. The code above can be written as: scale (2,. 5 ).
Note: When an SVG element is scaled, the entire current coordinate system is scaled at the same time, causing the element to be located in the viewport.
Skew
An SVG element can also be skewed. To tilt an SVG element, you need to use the skewX or skewY function. Syntax:
- SkewX ( )
- SkewY ( )
The skewX function specifies that the element rotates around X, and the skewY function specifies that the element rotates around the Y axis.
The rotation angle uses a non-unit angle value. The default unit is degrees ).
Note that the element skew may also cause the element to be relocated in the viewport.
Rotate
You can use the rotate () function to rotate an SVG element. Syntax:
- Rotate ( [ ])
The rotate () function uses rotate-angle to specify the rotation angle. Different from the rotation in CSS conversion, you cannot specify the unit for the rotation angle, but you can only use the degree (degrees) as the unit. The angle value uses a number with no unit. The default unit is degree.
Cx and cy are optional parameters used to represent the center of the rotation. If the cx and cy values are not provided, the center of the rotation is located at the origin of the current user coordinate system.
Specify the center point in the rotate () function, just like setting the shorthand for transform: rotate () and transform-origin in CSS. Because the default rotation center of SVG is located in the upper left corner of the current user's coordinate system (coordinate origin), you may not need to create a rotation effect. In this case, you need to specify a new rotation center. If you know the size and position of an element, you can easily specify a center for rotation.
The following example rotates a group of SVG elements around the center point (50, 50) 45 degrees in the current user coordinate system.
-
- ......
-
In CSS, if you want an element to rotate around its center, you can specify a rotation center point of 50% 50%, but it cannot be done in SVG rotate. You must use an absolute coordinate system.
This article copyright belongs to the jQuery house, reproduced please indicate the source: http://www.htmleaf.com/ziliaoku/... g/2015062075.html
