This is the first day of my participation in the August Challenge. For details, see:August is more challenging

above

Today, I had a sudden impulse to do a loading animation. I felt something was wrong with CSS, so I decided to do it in SVG. The problem is that I haven’t used SVG to animate loads, so I’ll have to see the tutorial first

Let’s start with today’s results

First, how do you use SVG

Take a look at the MDN documentation, browse the general functions of tags and attributes, and then play with the demo.

  1. Use the IMG tag

<img src="loading.svg" />

  1. Using CSS background image

background-image: url(loading.svg);

  1. Use object, iframe, embed tag
<object data="loading.svg" type="image/svg+xml"></object>
<iframe src="loading.svg" frameborder="0"></iframe>
<embed src="loading.svg" type="" />
Copy the code

The common labels are these

  1. Text: Text element
  2. Line: Line element
  3. Rect: Rectangular element
  4. Circle: A circular element
  5. Ellipse: Ellipse element
  6. Path: Path element
  7. Polyline: Polyline element
  8. Polygon: polygonal elements
  9. G: element combination/set

The common properties are these

  1. X: x coordinate
  2. Y: y coordinates
  3. Wide width:
  4. Height:
  5. Rx: the radius of the X-axis of a rounded rectangle
  6. Ry: the radius of the Y-axis of the rounded rectangle
  7. R: Radius of the circle
  8. Cx: the X-axis coordinate of the center point of the circle (ellipse)
  9. Cy: the Y-axis coordinate of the center point of the circle (ellipse)
  10. Points: sets of coordinate points, separated by commas (,)
  11. D: Point set number columns and other information about how to draw paths
  12. Stroke: Brush property (for stroke)
  13. Stroke-width: stroke size
  14. Fill: fill color

Take a chestnut

/ / text<text x="15" y="300" fill="blue" font-family="sans-serif" font-size="16pt">Text</text>/ / rectangle<rect x="10" y="10" width="30" height="30"></rect>// A rounded rectangle<rect x="60" y="10" rx="10" ry="10" width="30" height="30"></rect>/ / round<circle cx="140" cy="30" r="20"></circle>/ / oval<ellipse cx="200" cy="30" rx="20" ry="5"></ellipse>/ / in a straight line<line stroke="#f44" x1="10" x2="50" y1="60" y2="90"></line>/ / line<polyline points=60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145" />/ / polygon<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180" />// Path (path is too complicated, I didn't learn it, I drew it with AI)<path d="M357.2, c0 141 v - 24.2-3.1-2.5-5.6-5.6-5.6 h - 66.1 - c - 3.1, 0-5.6, 2.5-5.6, 5.6 V141c0, 3.1-2.5, 5.6-5.6, 5.6 H129.7 C - 3.1, 0-5.6, 2.5-5.6, 5.6 v43.1 v8.1 v30.9 c0, 3.1, 2.5, 5.6, 5.6, 5.6 H167c3. 1,0,5.6-2.5, 5.6-5.6 v - 42.6 - c0-3.1, 2.5-5.6, 5.6-5.6 h283.6 ,5.6 c3.1, 0, 2.5, 5.6, 5.6 v42.6 c0, 3.1, 2.5, 5.6, 5.6, 5.6 h31.7 c3.1, 0,5.6-2.5, 5.6-5.6 v to 33.9 v to 8.1 v - 40.1 - c0-3.1-2.5-5.6-5.6-5.6 H362. 8 C359.7, 146.5, 357.2, 144357, 141 z"/>
Copy the code

The path I learned myself is for this subson

The element is one of the most powerful of SVG’s basic shapes and can be used to create lines, curves, curves, and more. The shape of the path element is defined by attribute D, whose value is a sequence of “commands + arguments”

  • M = moveto: move the brush but do not draw, take two parameters (M x y)
  • L = lineto: Draw a line from the current position to the parameter’s coordinate point (L x y)
  • H = horizontal lineto: horizontal lineto (H x)
  • V = vertical lineto: Vertical line (V x)
  • C = curveto: cubic bezier curve with three coordinate points as parameters (C x1 y1, x2 y2, x y)
  • S = smooth curveto: It is possible to create multiple bezier curves that are the same as the previous bezier curves, thus creating a continuous curve where the first control point after C or S becomes the centrosymmetric point of the second control point of the previous curve
  • Q = Quadratic Belzier Curve: quadratic Bezier curve with two coordinate points as parameters
  • T = Smooth Quadratic Belzier Curveto: You can create multiple quadratic Bezier curves to create a continuous curve
  • A = quasiarc: Arc, the same parameters as the ellipse
  • Z = closepath: Indicates the end symbol

Use CSS in SVG

All the previous demos were black because they weren’t colored, so I’m going to use stroke and fill

The line is not filled, so fill is not valid, anything else is usedstroke=”red” fill=”#4ff”Color is good problem, so many color so troublesome, unified method has no answer is some, usedefsTags define CSS styles that are used in the same way as HTML

<defs>
    <style type="text/css">
      </style>
</defs>
Copy the code

However, it is also troublesome to style so many elements one by one, so it is much more comfortable to include all the elements with g tags

<g class="color">
    <rect x="10" y="10" width="30" height="30"></rect>.</g>
Copy the code

One of them wants a different style, ok? Just use style inline.

<text x="15" y="300" style="fill:blue" font-family="sans-serif" font-size="16pt">Text</text>
Copy the code

SVG gradient

All of this needs to go into the defs tag

  1. LinearGradient: linearGradient

The stop label can specify the color, offset controls the offset, stop-color controls the color, and stop-opacity controls the opacity

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>// Horizontal gradient<linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>// Change the orientation of the two coordinates.<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <style type="text/css">
      </style>
  </defs>

  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>

</svg>
Copy the code
  1. RadialGradient: indicates the radialGradient

It works almost the same as a linear gradient, with a central focus

  • Fx and fy are the focus parameters
  • Cx,cy and r are the parameters of the center
<? The XML version = "1.0" standalone = "no"? > < SVG width = "120" height = "120" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > < defs > < radialGradient id = "Gradient" Cx = "0.5" cy = "0.5" r = "0.5" fx = "0.25" fy = "0.25" > < stop offset = "0%" stop - color = "red" / > < stop offset = "100%" stop-color="blue"/> </radialGradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white"  stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg>Copy the code

I’m going to get my load animation out

If there is something wrong, remember to tell me, let us progress together

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
    <defs>
        <linearGradient id="left-to-right">
            <stop offset="0" stop-color="#e02e42">
                <animate dur="1.5 s" attributeName="offset" from="0" to="1.5" repeatCount="indefinite" />
            </stop>
            <stop offset="0" stop-color="#eee">
                <animate dur="1.5 s" attributeName="offset" from="0" to="1.5" repeatCount="indefinite" />
            </stop>
        </linearGradient>
    </defs>
    <g fill="url(#left-to-right)" stroke-width="10">
        <path d="M357.2, c0 141 v - 24.2-3.1-2.5-5.6-5.6-5.6 h - 66.1 - c - 3.1, 0-5.6, 2.5-5.6, 5.6 V141c0, 3.1-2.5, 5.6-5.6, 5.6 H129.7 C - 3.1, 0-5.6, 2.5-5.6, 5.6 v43.1 v8.1 v30.9 c0, 3.1, 2.5, 5.6, 5.6, 5.6 H167c3. 1,0,5.6-2.5, 5.6-5.6 v - 42.6 - c0-3.1, 2.5-5.6, 5.6-5.6 h283.6 ,5.6 c3.1, 0, 2.5, 5.6, 5.6 v42.6 c0, 3.1, 2.5, 5.6, 5.6, 5.6 h31.7 c3.1, 0,5.6-2.5, 5.6-5.6 v to 33.9 v to 8.1 v - 40.1 - c0-3.1-2.5-5.6-5.6-5.6 H362. 8 C359.7, 146.5, 357.2, 144357, 141 z"/>
        <path d="M317.3, 378.8 L178, 426-9, 3-15 c,11.4-15,20.9 v64.8 c0, 12.2, 9.9, 22.1, 22.1, 22.1 h274.6 c12.2, 0,22.1-9.9, 22.1 to 22.1 V - 65 c0-9.4-5.9-17.8-14.8-20.9 l - 135.3-47.1 C327, 377.2, 322377, 317.3, 378.8 z M401.6, H246.2 c - 12.2-493.2, 0-22.1-9.9-22.1-22.1 V471 C0-9.6, 6.2-18.1, 15.4-21 l76. 3-24.2 c4.3-1.4, 8.9, 1.4, 13.2-0.1 l79.1 c9.3 24.4, 2.9, 15.6, 11.4, 15.6, 21.1 l0, 0 C423.7, 483.3, 413.8, 493.2, 401.6, 493.2 z"/>
        <path d="M512.4, 368 l - 120-43.5 - c - 4.7-1.7-4.6-8.3, 0.1, 9.9 l26.5 8.8 c2.1 l27.4-9.9-0.8, 3.5-2.7, 3.5-4.9 v - 38.6 v - 4.2 V222 C0-2.9-2.3-5.2-5.2-5.2 H241.4 V206c0-1.8-1.4-3.2-3.2-3.2 - h - 43 - c - 1.8, 0-3.2, 1.4, 3.2, 3.2 v70.8 c0, 1.8, 1.4, 3.2, 3.2, 3.2 h43 ,3.2 c1.8, 0-1.4, 3.2-3.2 v - 20.6 c0.3-2.7, 2.5-4.7, 5.2-4.7 h150.8 c2.9, 0,5.2, 2.3, 5.2, 5.2 v13.1 c0, 2.2-1.4, 4.2-3.5, 4.9 l - 71.2, 25.1 C - 1.2, 0.4-2.5, 0.4-3.7-0.1 l - 44.9-18.1 - c - 3.4-1.4-7.2, 1.2, 7.2, 4.9 v29.1 c0, 2.2-1.4, 4.2, 3.5, 5 l130. 5368 c - 2.1, 0.7-3.5, 2.7-3.5, 5 v 36.7 C0, 3.6, 3.6, 6.2, 7,4.9 L321.2, 347 c1. 1-0.4, 2.3, 0.4, 3.5, 0 l508. 9409 c3.4, 1.1, 6.9, 1.4, 6.9 5 v - 31.1 C515.9, 370.7, 514.5, 368.7, 512.4 ,368z"/>
    </g>
    <style>@keyframes r{0%{stroke-dasharray:15.5.3100; stroke-dashoffset:0;transform:rotate(0); }50%{stroke-dasharray:1395.2325; stroke-dashoffset:-620}100%{stroke-dasharray:1395.2325; stroke-dashoffset:-1860;transform:rotate(1turn)}}.rotate{transform-origin:50% 50%;animation:r 1.5 sease-in-out infinite; stroke:currentColor; stroke-width:20; stroke-linecap:round;color:#e02e42}</style>
    <circle class="rotate" cx="320" cy="320" r="310" fill="none"></circle>
</svg>
Copy the code