How to implement coordinate system transformation in svg (with code)

This article introduces to you a summary of various methods of using svg in react (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Cartesian Coordinate System Conversion

If there are other systems transmitting data to SVG, you may have to deal with using Cartesian Coordinates represent vector graphics of data. Point (0, 0) is located in the lower left corner of the canvas, and the y coordinate increases upward. The y-axis is "opposite" to SVG's default convention, so the coordinates need to be recalculated.

The following example:

<svg width="200px" height="200px" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(0, 100) scale(1, -1)">
    <line x1="0" y1="0" x2="100" y2="0" style="stroke: black" />
    <line x1="0" y1="0" x2="0" y2="100" style="stroke: black" />
    
    <polygin points="40 40, 100 40, 70 70, 40 70" style="fill: grey; stroke: black" />
  </g>
<svg>

SVG Transform

translate(x, y): Follow Move the user coordinate system by the specified x and y values ​​
scale(xFactor, yFactor): Multiply all user coordinate systems using the specified xFactor and yFactor. The scale value can be a decimal or a negative value
scale(factor): Same as scale(xFactor, yFactor)
rotate(angle): Rotate the user coordinates according to the specified angle. The center of rotation is the origin (0, 0). In the default coordinate system, the rotation angle increases clockwise, and the angle of the horizontal line is 0 degrees
rotate(angle, centerX, centerY): Rotate the user coordinates according to the specified angel. The center of rotation is specified by centerX and centerY
skewX(angle): Skew all x coordinates according to the specified angle. Visually, this makes the vertical line appear angled
skewY(angle): Skew all y coordinates according to the specified angle. Visually speaking, this will make the horizontal line appear at an angle

Recommended related articles:

The role of svg path: How to use svg path in web development

Summary of various methods of using svg in react (with code)

The above is the detailed content of How to implement coordinate system transformation in svg (with code). For more information, please follow other related articles on the PHP Chinese website!