SVG conversion in HTML

• SVG converts shapes created in SVG images. For example, move, scale and rotate shapes. This is a convenient way to display vertical or diagonal text.

1. Simple conversion example

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

   <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)" />
   
   <text x="70" y="100" transform="translate(30) rotate(45 50 50)"> nhooo.com </text>
</svg>

Implementation of the results:

Note:
<rect> the elements transform and <text>the transform attribute:
This attribute specifies applied to the shape transformation . In this example, translation and rotation are applied. Both will be explained later in this article.

2. Which elements can be converted?

• You can apply transformations to all SVG shapes. You can also apply transformations to <g>elements, effectively transforming the entire group of elements at once.
• You can also change gradients and fill patterns.

Three, conversion function

The transformation function will not transform the SVG shape itself, but will transform the basic coordinate system of the shape. Therefore, even if the width is displayed in multiples, the shape of the width 20 multiplied by 2 still has a width of 20 logically.

1. Move translate()

translate()The function moves the shape. Pass the x and y values ​​to the translate() function.

translate(50,25)

Move the shape 50 units along the x-axis and 25 units along the y-axis. Shows two shapes with the same position and size, with or without translation.

<svg width="500" height="150">
	<rect x="20" y="20" width="50" height="50" style="fill: #cc3333" />
	<rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(75,25)" />
</svg>

Execution effect:

Note: Compared with the first (red) shape, the second (blue) shape moves 75 units along the x-axis and 25 units along the y-axis.

2. Rotate rotate()

rotate()The function rotates the shape around the point 0,0.
Display a rectangle (outline) and an equal rectangle (solid) rotated by 15 degrees.

<svg width="500" height="150">
	<rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" />
	<rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)" />
</svg>

Execution effect:

If you want to rotate around a point other than 0,0, pass the x and y coordinates of the point to the transform()function.
Shows a non-rotated rectangle (outline) and an equal rectangle (solid) rotated 15 degrees around its center.

<svg width="500" height="150">
	<rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;" />
	<rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15, 40, 40)" />
</svg>

Execution effect:

All rotations are clockwise, and the degree ranges from 0 to 360. If you want to rotate counterclockwise, pass negative degrees to the rotate()function.

3. Scale scale()

Introduction to scale() function: The
scale() function scales up or down the shape. scale()The function can scale the size of the shape and its position coordinates. Therefore, a rectangle with a width of 20 and a height of 30 scaled by 20 times 2 is located at 20, 20, and its width is 40 and its height is 60.
scale()The function can also scale the stroke width of the shape.
Example:
  Shows a rectangle (blue) with a width of 20 and a height of 20 at 10,0, and a rectangle of equal proportions (black) with a zoom ratio of 2.

<svg width="500" height="150">
	<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />
	<rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)" />
</svg>

Execution effect:

Note:
How to scale the position and size of the rectangle.
  The shape can be scaled by other factors on the x-axis and y-axis. To do this, you can scale()provide x-scaleand y-scaleparameters to the function .

scale(2,3);

The shape will be scaled 2 times along the x axis and 3 times along the y axis.

<svg width="500" height="150">
	<rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />
	<rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2,3)" />
</svg>

Execution effect:

Note:
The stroke width of the scaled rectangle (black) is also scaled, and the scales on the x-axis and y-axis are different.

4. Skew()

skewX()The sum skewY()function skews the x-axis and y-axis. In fact, these functions tilt a given axis according to an angle specified in degrees.

<svg width="500" height="150">
      <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />
      <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" />
      <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(45)" />
      <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(60)" />
</svg>

Execution effect:

• skewX()The function makes the vertical line look like it has been rotated by a given angle.
• Therefore, the skewY()function makes the horizontal line appear to be rotated by a given angle.

<svg width="500" height="150">
      <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />
      <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(60)" />
      <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(45)" />
      <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(10)" />
</svg>

Execution effect:

This article describes in detail how to use the conversion function to perform a series of operations such as image movement, scaling, rotation, lengthening or stretching. Through case analysis and rich renderings, readers can understand better.