VG transforms the shapes created in the SVG image. For example, move, scale and rotate shapes. This is a convenient way to display vertical or diagonal text.

A simple example of conversion

Ex. :

<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)">
   </rect>
   <text x="70" y="100" transform="translate(30) rotate(45 50 50)"
   >nhooo.com</text>
</svg>
Copy the code

Note:

The transform and transform properties of the rect element.

This property specifies the transformation to be applied to the shape. In this example, panning and rotation are applied. Both are explained later in this article.

Which elements can be converted?

You can apply the transform to all SVG shapes. You can also apply the transformation to the G element, effectively transforming the entire set of elements at once. You can also change gradients and fill patterns.

3. Conversion function

The transform function does not transform the SVG shape itself, but rather transforms the shape’s underlying coordinate system. Thus, even if the width is shown in multiples, a shape with a width of 20 by 2 logically has a width of 20.

1. Move the translate ()

The translate() function moves the shape. The function that passes x and y values to translate().

translate(50.25)
Copy the code

Move the shape 50 along the x axis and 25 along the y axis. Shows two equally positioned and equally sized shapes, with or without translations.

Ex. :

<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)">
</rect>
</svg>
Copy the code

Operation effect:

note

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

2. Rotate the rotate ()

The rotate() function rotates the shape around the point 0,0.

Displays 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>

<rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)"></rect>
</svg>
Copy the code

Operation effect:

If you want to rotate around a point other than 0,0, you pass the x and y coordinates of that point to the transform function.

Shows a non-rotating rectangle (contour) and an equal rectangle (solid) rotated 15 degrees around its center.

Ex. :

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

<rect x="20" y="20" width="40" height="40"
     style="fill: #3333cc"
     transform="rotate(15, 40, 40)"
      ></rect>
</svg>
Copy the code

Operation effect:

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

Code words are not easy to nonsense two sentences: need python learning materials or technical questions to exchange “click”

3. The zoom scale ()

3.1 Introduction to the scale() function

The scale() function scales up or down shapes. The scale() function scales the size of a shape and its position coordinates. Thus, a rectangle that is 20 wide and 30 high scaled by 20 times 2 is located at 20,20, and 40 wide and 60 high.

The scale() function also scales the stroke width of the shape.

3.2 case

Shows a rectangle at 10,0 with a width of 20 and a height of 20 (blue), and a rectangle of equal scale (black) with a scale of 2.

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

<rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)"></rect>
</svg>
Copy the code

Operation effect:

Pay attention to

How the position and size of the rectangle are scaled.

You can scale the shape by other factors on the X and y axes. To do this, you can supply the scale() function with x-scale and y-scale parameters.

As follows:

scale(2.3);
Copy the code

Scale the shape 2 times along the x axis and 3 times along the y axis.

Ex. :

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

<rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="Scale" (2, 3)></rect>
</svg>
Copy the code

Effect:

Note:

The stroke width of the scaled rectangle (black) is also scaled in different proportions on the X and y axes.

4. The deflection skew ()

The skewX() and skewY() functions skew the x and y axes. In effect, these functions tilt a given axis according to an Angle specified in degrees.

Shows some examples of rectangles with different skewX() values.

<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>
Copy the code

Operation effect:

The skewX() function makes vertical lines appear to be rotated at a given Angle.

Therefore, the skewY() function makes the horizontal line appear to be rotated by a given Angle.

Ex. :

<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>
Copy the code

Four,

This paper introduces the image conversion based on HTML. How to use the transformation function to move, zoom, rotate, stretch or stretch the image is introduced in detail. Through case analysis, rich renderings, can let readers better understand.

Hopefully this will help you better understand image transformations in SVG.

I have spent three days in compiling a set of Python learning tutorials, from the most basic Python scripts to Web development, crawlers, data analysis, data visualization, machine learning, etc. These materials have wanted to friends: Click to pick it up