How to realize SVG dynamic standard
You can see many amazing loading icons on loading.io They are all written in svg, with only a few lines of code, which are finer and more volume-saving than img images, and more flexible and efficient than pure dom implementation. In addition, you can make icons respond to click events.
How to draw these circles and squares? How to color? How to move? Look at the basics of svg first, then draw the first icon on it.
First, the basic graphic element svg has some predefined shape elements: rectangles.
1 & lt； ! -viewBox defines canvas size, width/height defines actual size->
2 & ltSVG xmlns = " http://www . w3 . org/2000/SVG " version = " 1. 1 " width = " 300 " height = " 300 " view box = " 0 0 300 300 " & gt；
three
4 & lt！ -straight lines (x 1, y 1) and (x2, y2) are two-point coordinates->;
5 & ltline x 1 = " 0 " y 1 = " 0 " x2 = " 250 " y2 = " 30 "/>
six
7 & lt！ -the polygon forms a closed figure through the coordinates of multiple points->;
8< Polygon Point = "5,5100,100 50,200"/>
nine
10 & lt； ! -The rectangle (x, y) is the starting point of the upper left corner->;
1 1 & lt； rect x = " 100 " y = " 100 " width = " 120 " height = " 100 "/>
12
13 & lt； ! -R center radius (cx, cy)-& gt；;
14 & lt； circle CX = " 100 " cy = " 50 " r = " 40 " stroke = " black "/& gt；
15
16 & lt； ! -text (x, y) coordinates in the lower left corner->;
17 & lt； text x = " 0 " y = " 20 " style = " font-size: 16px； Font-weight: bold "> Try SVG & lt/text & gt；; 18 19 & lt； /SVG & gt； Second, styles and effects The styles of svg elements can be written as attributes of labels or styles. The following are some major style attributes:
Stroke: stroke color
Stroke width: stroke width.
Opacity of brush strokes: transparency of brush strokes
Fill: Fill color, that is, background.
Fill Opacity: The transparency of the fill color.
Transformation: Graphic transformation, similar to css3 transformation.
Svg also supports many filter effects, such as gradient, shadow, blur, image blending and so on. You don't need to know so much, for example, draw a few colored circles and use circle with fill.
Note: By default, the transformation is based on the upper left corner of svg, not the circle center or other centers. The upper left corner is the origin of svg coordinate system. To understand the transformation and coordinate system, you can refer to it here.
Third, the auxiliary element svg has several auxiliary elements:
& ltg> elements are usually used to group related graphic elements for unified operations, such as rotating, scaling or adding related styles.
& lt Using & gt To reuse existing SVG graphics, you can reuse a single SVG graphic element or
Elements defined internally in & ltdefs & gt will not be displayed directly. You can use the.
& ltsymbol & gt can create its own window.
For the transformation base point problem mentioned above, it can be nested.
1 & lt； SVG width = " 80px " height = " 80px " xmlns = " http://www . w3 . org/2000/SVG " view box = " 0 0 100 100 " preserve aspect ratio = " xmidy mid " >
2 & ltg transform="translate(20 50)" >
3 & ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # e 15b 64 " transform = " scale(0.99275 0.99275)"/>
4 & lt/g & gt；
5 & ltg transform="translate(40 50)" >
6 & ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f47e 60 " transform = " scale(0.773605 0.773605)"/& gt；
7 & lt/g & gt；
8 & ltg transform="translate(60 50)" >
9 & ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f8b 26 a " transform = " scale(0.42525 0.42525)"/& gt；
10 & lt； /g & gt；
1 1 & lt； g transform="translate(80 50)" >
12 & lt； circle CX = " 0 " cy = " 0 " r = " 7 " fill = " # abbd 8 1 " transform = " scale(0. 1 134 18 0. 1 134 18)"/>
13 & lt； /g & gt；
14 & lt； /SVG & gt； Fourth, the realization of animation. The animation effect of svg is based on animation tag elements:
& ltanimate & gt realizes the transition effect of a single attribute,
& ltanimateTransform & gt realizes the animation effect of transformation,
& lt Animation Emotion & gt Realize the path animation effect.
Svg can be written flexibly. Styles can be written as label attributes or in styles. The animation tag can specify the element through xlink, or it can be written inside the animation element. The xlink of animateTransform is demonstrated as follows:
& ltSVG xmlns = " http://www . w3 . org/2000/SVG " & gt；
& ltrect id = " animate object " x = " 20 " y = " 20 " width = " 50 " height = " 50 " fill = " blue " & gt； & lt/rect & gt；
& lt animation deformation
xlink:href = " # animate object " & lt； ! -Specify animation elements->
attributeName = " transform " & lt！ -Name of the attribute that needs to be animated->
type = " scale " & lt！ -Specify transformation properties->
begin = " 0s " & lt！ -Start time, that is, delay->
dur = " 3s " & lt！ -animation time->
from = " 1 " & lt； ! -starting value->
to = " 2 " & lt！ -End value->
repeatCount = " indefinite " & lt！ -Repetition, infinite repetition->
/& gt；
& lt/SVG & gt； The animation in the above example is the transition from A to B. To form a smooth cycle, at least three key points must be defined. AnimateTransform supports more and more flexible property settings:
Values: values of multiple key points instead of from and to, for example, values = "0；; 1; 0"
KeyTimes: corresponding numerical value, the time point of each point.
CalcMode: animation speed mode. Discrete | linear | pace | spline
Keysplines: Sets the Bessel motion control point, which is effective when calcMode is a spline.
For a more detailed introduction of svg animation, please refer to here.
Verb (abbreviation of verb) code example
Circle draw a circle, fill it with color, wrap it with G label and locate it. Transform sets the initial deformation, and animateTransform sets the animation. Now look at the code, I believe I won't be confused again:
& ltSVG class = " LDS-message " width = " 80px " height = " 80px " xmlns = " http://www . w3 . org/2000/SVG " view box = " 0 0 100 100 " preserve aspect ratio = " xMidYMid " >
& ltg transform="translate(20 50)" >
& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # e 15b 64 " transform = " scale(0.99275 0.99275)" & gt；
& ltanimate transform attributeName = " transform " type = " scale " begin = "-0.375s " calc mode = " spline " keySplines = " 0.3 0 0.7 1； 0.3 0 0.7 1 " values = " 0； 1; 0 " keyTimes = " 00.5; 1 " dur = " 1s " repeat count = " infinite " >& lt/animate transform & gt；
& lt/circle & gt；
& lt/g & gt；
& ltg transform="translate(40 50)" >
& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f47e 60 " transform = " scale(0.773605 0.773605)" & gt；
& ltanimate transform attributeName = " transform " type = " scale " begin = "-0.25s " calc mode = " spline " keySplines = " 0.3 0 0.7 1； 0.3 0 0.7 1 " values = " 0； 1; 0 " keyTimes = " 00.5; 1 " dur = " 1s " repeat count = " infinite " >& lt/animate transform & gt；
& lt/circle & gt；
& lt/g & gt；
& ltg transform="translate(60 50)" >
& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f8b 26 a " transform = " scale(0.42525 0.42525)" & gt；
& ltanimate transform attributeName = " transform " type = " scale " begin = "-0. 125s " calc mode = " spline " keySplines = " 0.3 0 0.7 1； 0.3 0 0.7 1 " values = " 0； 1; 0 " keyTimes = " 00.5; 1 " dur = " 1s " repeat count = " infinite " >& lt/animate transform & gt；
& lt/circle & gt；
& lt/g & gt；
& ltg transform="translate(80 50)" >
& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # abbd 8 1 " transform = " scale(0. 1 134 18 0. 1 134 18)" >
& ltanimate transform attributeName = " transform " type = " scale " begin = " 0s " calc mode = " spline " keySplines = " 0.3 0 0.7 1； 0.3 0 0.7 1 " values = " 0； 1; 0 " keyTimes = " 00.5; 1 " dur = " 1s " repeat count = " infinite " >& lt/animate transform & gt；
& lt/circle & gt；
& lt/g & gt；
& lt/SVG & gt； Related suggestions:
How JS operates svg drawing