This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging

This is the SVG series directory:

  • Front end will know will learn | SVG see this article is enough (a)
  • Front end will know will learn | SVG see this article is enough (2)
  • Front end will know will learn | SVG see this article is enough (3)
  • Front end will know will learn | SVG see this article is enough (4)
  • Front end will know will learn | SVG see this article is enough (5)
  • Front end will know will learn | SVG see this article is enough (6)
  • Front end will know will learn | SVG see this article is enough (7)
  • Front end will know will learn | SVG see this article is enough (8)

preface

After learning the basic drawing of SVG graphics, you can also move, rotate, scale and other conversion operations in SVG graphics, just like CSS.

g

The g tag actually appeared in our previous example, but I didn’t go into it in detail, so let’s talk about the G tag.

It is used for the collection of graphs, using G can batch assign values to the graphs in the collection.

<g fill="red">
    <circle cx="10" cy="10" width="30" height="30" r="10"></circle>
    <circle cx="40" cy="10" width="30" height="30" r="10"></circle>
</g>
Copy the code

Graphics translation

The translate function is used to move an element horizontally or vertically. This function takes 1-2 arguments, x, x, and y. Use the single-argument form if you only need to move horizontally. The second value defaults to 0.

<circle cx="30" cy="30" r="15" fill="red" />
<circle cx="30" cy="30" r="15" fill="red" transform="translate(40)" />
<circle cx="30" cy="30" r="15" fill="red" transform="Translate (40, 40)" />
Copy the code

Graphics rotation

The rotate function rotates an element, passing in an Angle of rotation. A positive Angle indicates a clockwise rotation, and a negative Angle indicates a counterclockwise rotation.

<rect x="60" y="0" width="40" height="40" fill="red" transform="rotate(45)" />
Copy the code

Note that this is not a rotation by the center of the graph, if you want to rotate by the center of the graph you can use CSS, add the following inline code to do it. (You can define the center point with the transform-Origin attribute.)

style="transform-box:fill-box;transform-origin:center;"
Copy the code

oblique

The skewX and skewY functions are used to transform the graph to a two-dimensional plane. It needs to pass in an Angle to distort the figure

<rect x="10" y="0" width="40" height="40" fill="none" stroke="red" />
<rect x="60" y="0" width="40" height="40" fill="none" stroke="red" transform="skewX(40)" />
<rect x="150" y="0" width="40" height="40" fill="none" stroke="red" transform="skewY(50)" />
Copy the code

The zoom

The scale function is used to scale a graph. It needs to pass in a scale value to scale it.

<circle cx="30" cy="30" r="15" fill="none" stroke="red" transform="Scale (0.5)" />
<circle cx="30" cy="30" r="15" fill="none" stroke="blue" transform="scale(1)" />
<circle cx="30" cy="30" r="15" fill="none" stroke="green" transform="Scale (1.5)" />
<circle cx="100" cy="30" r="15" fill="none" stroke="red" transform="Scale (0.5)" style="transform-box:fill-box; transform-origin:center;" />
<circle cx="100" cy="30" r="15" fill="none" stroke="blue" transform="scale(1)" style="transform-box:fill-box; transform-origin:center;" />
<circle cx="100" cy="30" r="15" fill="none" stroke="green" transform="Scale (1.5)" style="transform-box:fill-box; transform-origin:center;" />
Copy the code

As with rotate above, if you want to rotate the shape around the center point, you need to use CSS.

The last

This article describes the image distortion properties in SVG, which are similar to CSS and are simple to use.

Thanks for reading!

😀😀 Pay attention to me, don’t get lost! 😀 😀