[CSS] Getting started with SVG combat, svg drawing curves, getting started with svg simple animation

I wrote an article before [canvas drawing polyline segment], in fact, in actual use, svg drawing simple curves is the most convenient.
For example, use it on a large screen, or use other small special effects

点赞 + 关注 + 收藏 = 学会了

1. What is svg?

Before learning SVG, you must first understand the difference between bitmap and vector graphics .
simply put:

• Bitmap: Enlargement will distort the image and have jagged edges; it is composed of pixels; the front-end Canvas is a bitmap effect, and pictures such as png and jpg are also bitmaps.
• Vector graphics: zoom in without distortion; use XML to describe graphics.

So what SVGis it? SVGmeans Scalable Vector Graphics ( Scalable Vector Graphics). It is one of the formats of vector graphics . It is used XMLto describe graphics.

For SVGbeginners , it can be simply understood as " SVGa new set of tags".

So you can use CSSto set the style, and you can also use JSto SVGoperate .

2. Basic structure of SVG tags

The following is an SVG document structure:

<svg version="1.1" xmlns='http://wwww.w3.org/2000/svg' width='300' height='200' >
  <title>测试</title>
  <desc>这是一个描述</desc>
  <!-- 在这里绘制图像 -->
  <rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="115" font-size="16" text-anchor="middle" fill="white">svg测试文本</text>
</svg>

• <svg>The root element defines the width and height of the entire image in pixels, and also defines the SVG namespace through the xmlns attribute.
• versionattribute to define the SVG version used,
• <title>The content of the element can be displayed by the reader in the title bar or as a hint when the mouse pointer points to the image,
• <desc>Elements allow us to define complete description information for images,
• <rect>The label is used to create a rectangle with the background color set to yellow via fillthe attribute .
• <circle>Labels are used to create a circle. cxThe and cyattributes define the x and y coordinates of the center of the circle. If these two properties are omitted, the dot will be set to (0, 0), and the r property defines the radius of the circle. A green circle with a radius of 80px <circle>is drawn in the very center of the red rectangle (offset 150px to the right and 115px down).
• strokeThe and stroke-widthproperties control how the shape's outline is displayed. We set the outline of the circle to be 4px wide with a red border.
• fillproperty to set the color inside the shape. We set the fill color to red.

Note : All open tags must have a close tag!

running result:

Three, svg coordinate system

The characteristics of the SVG grid coordinate system are as follows:

• Take the upper left corner as the origin of the coordinate system, ie (0,0).
• (To the right) The horizontal extension is the positive direction of the X-axis, and the x-coordinate increases gradually.
• (Down) The vertical direction is the positive direction of the Y axis, and the y coordinate increases gradually.
• Coordinates are in pixels px.

4. Use of common labels

1. rectangle rect

<rect>Labels can be used to create rectangles, and variants of rectangles:

rectangle:

<svg>
  <rect 
  	width="300" height="100"
  	stroke="red" stroke-width="4" 
  	fill="yellow" />
</svg>

Rounded Rectangle:

<svg>
  <rect 
	x="50" y="20" 
	rx="20" ry="20" 
	width="150" height="150" 
	style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

2. Circular circle

<svg>
  <circle 
  	cx="100" cy="50" 
  	r="40" 
  	stroke="black"
  	stroke-width="2" 
  	fill="red"/>
</svg>

3. Ellipse

<svg>
  <ellipse 
  	cx="300" cy="80" 
  	rx="100" ry="50"
  	style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

4. straight line

<svg>
  <line 
  	x1="0" y1="0"
  	x2="200" y2="200"
  	style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

5. Polygon

<polygon>Labels are used to create graphs with no fewer than three sides.

A polygon is made up of straight lines, and its shape is "closed" (all lines connected).

polygonfrom Greece. "Poly" means "many" and "gon" means "angle".

The following code can generate a triangle:

<svg  height="400" width="400">
  <polygon 
  	points="0,0 200,200 0,400"
  	style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

6. polyline

Note that fill needs to be set to none

<svg>
  <polyline 
  	points="20,20 40,25 60,40 80,120 120,140 200,180"
  	style="fill:none;stroke:black;stroke-width:3" />
</svg>

7. Path path

<path>Labels are used to define a path.

The following commands are available for path data:

• M = moveto
• L = lineto
• H = horizontal line
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath close path

Note : All the above commands allow lowercase letters. Uppercase means absolute positioning, lowercase means relative positioning.

The following example defines a path that starts at position 150 0, goes to position 75 200, then starts from there to 225 200, and finally closes the path at 150 0. (black triangle)

<svg>
    <path d="M150 0 L75 200 L225 200 Z" />
</svg>

8. Texttext

<svg>
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

9. Stroke property

All stroke properties, can be applied to any kind of line

• stroke defines the text or element outline color
• stroke-width defines text or element outline thickness
• stroke-linecap defines the different types of open path terminations (the style of the end of a line segment)
• stroke-dasharray for creating dashed lines

4. Introduction to practice

arc motion

The following code defines an arc motion: click to trigger the small square to move infinitely along the curve

<svg width="800" height="800">
   <path d="M0 0 c0 300 300 300 300 0" stroke="red" stroke-width="2" fill="none"></path>
    <rect x="0" y="0" width="40" height="40" fill="lightgreen">
       <animateMotion 
         path="M0 0 c0 300 300 300 300 0" 
         dur="3" 
         begin="click" 
         retate="auto" 
         dur="3" 
         repeatCount="indefinite" 
         restart="auto">
       <animateMotion/>
    </rect>
</svg>

The effect is as follows

To be continued... Next time, I will study the detailed animation, and this time I will get into the door a little bit

https://www.jc2182.com/svg/svg-examples.html
https://blog.csdn.net/sunxiaobai1/article/details/122862625