SVG Coordinate Conversion

This topic describesgetScreenCTM()Method.

SVG coordinates and transformations are widely used. You can find the basic information about the subject, especially the coordinate system, conversion, and unit, from the W3C SVG specification.

This topic describes the critical issue of association with SVG coordinates-coordinate the screen (technically, the initial view Coordinate System) maps to the coordinate system associated with any given SVG Element (technically the current user coordinate system ). For example, consider an SVG circle that uses the standard Cartesian coordinate system:

Figure 1

In this example, we focus on how to determine the mouse position relative to the Circle coordinate system. Therefore, we must map the screen coordinates of the mouse to the Cartesian coordinates of the circle, as shown in:

Figure 2

In Figure 2, the screen coordinate of the mouse is (843,270 ). When you map this point to the Circle coordinate system, the mouse coordinate changes to (175,175 ).

Note:

If you are not familiar with matrices, matrix multiplication, or matrix inversion, consider checking one or more of the following before continuing:

• Linear Algebra-Khan Academy (video)
• Matrix (Mathematics)-Wikipedia

To describe the conversions in Figure 2 in an arithmetic way, it is helpful to first understand some definitions. Slave
In the W3C SVG specification, we have:

The conversion matrix defines the mathematical ing from one coordinate system to another. The current conversion matrix (CTM) uses the 3x3 CTM matrix to define the ing from the user coordinate system to the video coordinate system using the following equations:

Where,

• MIs the current conversion matrix (CTM ).
• Is the homogeneous vector of points (x, y) in the user coordinate system. In Figure 2, this vector is
  It is equivalent to a "dot" (175,175 ). Please note that,
  "1" is only used to perform matrix operations. In fact, it can be ignored.
• Is the homogeneous vector of the points (x', y') in the view coordinate system. In Figure 2, this vector is
  , Which is equivalent to "screen point" (843,270 ).

Fortunately, it can be called in JavascriptgetScreenCTM()Method to obtain the CTM. For example, if the circle in Figure 2 is named
svgCircle, Thenvar M = svgCircle.getScreenCTM()Returns the corresponding matrix.
MTo use the equation above to convert the dot into a screen point. That is to say, if the current conversion matrix in Figure 2MYes:

Then we map the circular coordinates (175,175) to the screen coordinates (843,270) as follows ):

After rounding, screen coordinates (843,270) are generated ).

The previous example shows how to convert the circle coordinates to the screen coordinates, but how to perform the opposite operation? That is to say, given the screen coordinate, what is the corresponding circular coordinate? To answer this question, we must solve
. You can do this as follows:

Where,

• M-1Is the inverse matrix of the CTM matrix. For the above example, it is about. Because all SVG coordinate transformations are allowed to map two-dimensional space to another two-dimensional space
  MAlways reversible.
• I3x3 Unit MatrixM-1M=I).

Therefore, we can map the screen coordinates (843,270) to the corresponding circular coordinates using the derived equations, as shown below:

After rounding, the circle coordinates (175,175) are generated ).

After understanding these mathematical knowledge, the implementation in Javascript is relatively simple:

Javascript

function coordinateTransform(screenPoint, someSvgObject){  var CTM = someSvgObject.getScreenCTM();  return screenPoint.matrixTransform( CTM.inverse() );}

Given screen point (SVGPointType) and some SVG objects (such as circles), this function maps the screen pointssomeSvgObjectThe associated coordinate system. If
someSvgObjectIndicates the circle in Figure 2, then:

• var CTM = someSvgObject.getScreenCTM()The CTM associated with the current screen and circle size is obtained.
• CTM.inverse()Returns the inverse of the CTM matrix to provide us withM-1.
• screenPoint.matrixTransform( CTM.inverse() )SetM-1And the given screen coordinates
  (That is
  screenPoint) Multiplied to produce the required circular coordinates.

To view the complete example associated with figure 2, click
Liquid SVG. To view the source code associated with this example, use the browser's View Source file function. For example, in Windows Internet Explorer, right-click the webpage and select "View Source File". Make sure that the source code is available when you read the rest of this document.

Please note that as you change the size of the browser window, the circle size will be adjusted accordingly. ThisLiquid LayoutIs the result of the following percentage-based values:

Javascript

html {  padding: 0;  margin: 0;  height: 100%; /* Required for liquidity. */  }body {  padding: 0;  margin: 0;  height: 100%; /* Required for liquidity. */}

And

Javascript

<!-- width="100%" and height="98%" required for liquidity. --><svg id="svgElement" width="100%" height="98%" viewbox="0 0 800 800">

Move to another aspect of the Code (svgCircleElement), the following two<g>Element conversion provides the standard Cartesian coordinate system:

Javascript

<g transform="translate(400, 400) scale(1, -1)">

That is to say,translate(400, 400)ComparedsvgElementviewbox="0 0 800 800"The Applied 800x800 view box moves the origin of the area-based coordinate system to a point (400,400 ). Then,scale(1, -1)The X axis of the user coordinate system is multiplied by 1 (not changed), and Y axis is multiplied by-1. The effect is to flip the Y axis around the X axis. The result is a standard Cartesian coordinate system (the origin of which appears in the midpoint of the 800x800 area ).

The remaining (secondary) details of this example will go through
Rich liquid SVG comments are introduced. To learn how to use this technology in SVG-based video games, see Example 6 in "Advanced SVG Animation.

Related Topics

HTML5 graphics

How to add SVG to a webpage

Advanced SVG Animation

Scalable Vector Graphics (SVG)