1. Introduction
Today, Hong shared in the actual testing work rarely encountered, more out-of-the-way, if suddenly encountered we may be brain big, confused, a moment do not know how to do? So macro here to provide a way of thinking for everyone to learn and reference.
synopsis
svg is also a new tag in html5, it is very similar to canvas. It can realize drawing and animation. But svg draw out are vector graphics, unlike canvas is in pixels, put the big fuzzy. svg draw out of the picture is not. svg English full name is Scalable vector Graphics, meaning scalable vector graphics, this element is more special, you need to use the name () function to locate.
basic use
svg operates inside html and css, not inside js.
<body>
<svg width="500" height="500"> </svg>
</body>
3.1 Drawing straight lines
1. Reference code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Beijing, capital of People's *-* businessman</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black } </style> </head> <body> <svg width="500" height="500"> <!-- The first two values of line are the coordinates of the start point, and the last two values are the coordinates of the end point.--> <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line> </svg> </body> </html>
2. The browser opens as shown below:
3.2 Drawing rectangles
1. Reference code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Beijing, capital of People's *-* businessman</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black } </style> </head> <body> <svg width="500" height="500"> <!-- rect (rectangle) the first two values are the position, the middle two values are the rounded corners, and the last two values set the width and height.--> <rect x="50" y="20" rx="10" ry="10" width="150" height="150"></rect> </svg> </body> </html>
2. The browser opens as shown below:
3. Let's see plus css style, hollow rectangle
rect{
fill:transparent; //Set to transparent color
stroke: red;// Stroke in red
}
3.3 Drawing arcs
1. Reference code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Beijing, capital of People's *-* businessman</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black } </style> </head> <body> <svg width="500" height="500"> <!-- The first value in front of cirle sets the radius of the circle, the next value is the position. Solid circle--> <!-- You can set the css to transparent and then set the stroke, it will be a hollow circle--> <circle r="50" cx="200" cy="100"></circle> </svg> </body> </html>
2. The browser opens as shown below:
3.4 Drawing Ellipses
1. Reference code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Beijing, capital of People's *-* businessman</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black } </style> </head> <body> <svg width="500" height="500"> <!-- ellipse (ellipse) the first value is the width of the circle, the second is the height of the circle, the last two values are the position of the circle--> <!-- You can set the css to transparent and then set the stroke, and it will be a hollow center--> <ellipse rx="60" ry="30" cx="100" cy="100"></ellipse> </svg> </body> </html>
2. The browser opens as shown below:
3.5 Drawing Folding Lines
1. Reference code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Beijing, capital of People's *-* businessman</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black } polygon,polyline{ fill:transparent; //Set to transparent color } .bi{ fill: transparent; stroke: red;//Stroke in red stroke-width: 3px; } </style> </head> <body> <svg width="500" height="500"> <!-- Polugon. The start point will be connected to the end point.--> <!-- You can set the css to transparent and then set the stroke, and it will be a hollow center--> <polygon class="bi" points="100 100, 200 50, 300 100, 400 50" stroke-width="3"></polygon> <!-- A polyline, where the start point is connected to the end point.--> <!-- You can set the css to transparent and then set the stroke, and it will be a hollow center--> <polyline class="bi" points="100 200, 200 150, 300 200, 400 150" stroke-width="3"></polyline> </svg> </body> </html>
2. The browser opens as shown below:
3.6 Drawing text
1. Reference code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Beijing, capital of People's *-* businessman</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black } </style> </head> <body> <svg width="500" height="500"> <!-- text is the same as absolute positioning.--> <text x="400" y="150">123</text> </svg> </body> </html>
2. The browser opens as shown below:
4. Style Properties
4.1fill: fill color (default black)
4.2stroke: color of the line (default black)
4.3stroke-width: width of the line
4.4stroke-linecap
stroke-linecap: the style of the end of the line (default) butt (rounded) round (square) square , round and square affect the length of the line
Default style will not be set, set with the setting of no above two things
round
square
stroke-linejoin: the available values are: miter, round, bevel, inherit The stroke-join attribute defines the shape of the corners of the path, with "miter" as the default, "round" for smooth joins, "bevel" for bevel joins, and "inherit" for inheritance.
round
bevel
opacity: opacity 0~1 (can be set for fill or stroke)
Use what you learned above to make a small demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black; } rect{ fill: transparent; stroke: black; stroke-width: 5px; } polygon{ fill: black; } circle{ fill: transparent; stroke: black; stroke-width: 4px; } .yan{ fill: black; } .bi{ fill: transparent; stroke: black; stroke-width: 3px; } ellipse{ fill: transparent; stroke: black; stroke-width: 3px; } text{ stroke: red; } </style> </head> <body> <svg width="500" height="500"> <rect x="100" y="100" rx="15" ry="15" width="300" height="300"></rect> <polygon points="110 100, 130 60, 190 95, 250 60, 310 95,370 60, 390 100"></polygon> <circle r="20" cx="190" cy="200"></circle> <circle r="20" cx="320" cy="200"></circle> <circle class="yan" r="5" cx="198" cy="208"></circle> <circle class="yan" r="5" cx="328" cy="208"></circle> <polygon class="bi" points="240 300, 250 260, 270 300"></polygon> <ellipse rx="30" ry="10" cx="260" cy="330"></ellipse> <text x="200" y="440">You look good in front of the screen.</text> </svg> </body> </html>
positioning of elements
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Beijing, capital of People's *-* businessman</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black } </style> </head> <body> <div id="app1"> <svg width="500" height="200"> <!-- text is the same as absolute positioning.--> <text x="400" y="150">123</text> </svg> </div> <div id="app2"> <svg width="500" height="200"> <!-- text is the same as absolute positioning.--> <text x="400" y="150">456</text> </svg> </div> </body> </html>
5.1 General Positioning
1. Press F2 on the keyboard or open the developer mode of the browser, we begin to utilize the js code in the console to locate. As shown in the image below:
2. Enter, return results, we can clearly see that is empty, no elements are located. This means that this method does not work.
5.2 Name function positioning
1. Press F2 on the keyboard or open the developer mode of the browser, we begin to utilize the js code in the console to locate. As shown in the image below:
2. Enter, return results, we can clearly see is 2 svg, locate the element. This method is feasible.
6. Use multiple svg elements on the page
1. If more than one svg element is used on the page, pass the//*[name()="svg"] will locate all svg elements, in order to distinguish which one to locate specifically, it can be distinguished by the parent element's distinction.
//*[@]//*[name()="svg"]
2. In addition to using the parent element to distinguish, you can also use other attribute combinations, svg attribute plus other attributes, with and combination.
//*[name()="svg" and @width="500"]
7. Position child elements on the svg.
1. If you need to position a child element under svg, use the text attribute as shown below.
2. With the previous positioning, or through the name () function to locate the label of the child element.
//*[@]//*[name()="svg"]/*[name()="text"]
localization
Canvas positioning and SVG methods are similar, macro will not repeat here, and generally Canvas tags will have the id attribute, so that if, positioning through the id more convenient.
9. Summary
Today mainly explained and shared some of the basics and applications of Canvas and SVG, and then entered the topic of SVG positioning related knowledge of the explanation. There is a kind of will not be difficult, the difficult will not feel. Well, it's not too early today, about Canvas and SVG element positioning is introduced here, only for small partners or children to learn. Thank you for your patience to read!