Summary: This article mainly introduces the development ideas of two important components of SVG in the data large screen project, the implementation source code, and the introduction of the radialGradient of SVG used in the implementation process.

Loading component

Desired effect:

Implementation ideas:

  • Two circles, the radius of the outer circle is larger than the radius of the inner circle, the outer circle contains the inner circle.
  • Using SVG’s Stroke-Dasharray: 1/4 of the circumference of the circle, the effect of displaying two arcs and not displaying two arcs is realized.
  • The inner circle and the outer circle are animated by smIL. The rotate Angle is changed by animateTransform tag. The inner circle is rotated clockwise at an Angle of 0, 360, and the outer circle is rotated counterclockwise at an Angle of 360, 0, and the circle is rotated around the center coordinates of the inner circle.
  • Clipping the shapes at both ends of the path to be circular using the stroke-linecap=”round” attribute
  • Use the animate label to animate and change the color of the inner and outer layers so that the inner and outer layers convert to each other

The final code looks like this:

     <svg :width="width" :height="height" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
        <circle cx="100" cy="100" r="50" stroke-width="10" stroke="#02bcfe" fill="none" stroke-dasharray="79" stroke-linecap="round">
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0, 100, 100; 360, 100, 100"
            dur="2s"
            repeatCount="indefinite"></animateTransform>
            <animate attributeName="stroke" :values="#02bcfe; #3be6cb; #02bcfe" dur="2s" repeatCount="indefinite" />
        </circle>
        <circle cx="100" cy="100" r="80" stroke-width="10" stroke="#3be6cb" fill="none" stroke-dasharray="126" stroke-linecap="round">
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="360 100 100; 0 100 100"
            dur="2s"
            repeatCount="indefinite">
          </animateTransform>
          <animate attributeName="stroke" values="#3be6cb; #02bcfe; #3be6cb" dur="2s" repeatCount="indefinite" />          
        </circle>
     </svg>
Copy the code

Fly line matrix

A similar effect is expected

Implementation approach

  • The core is to use the effect of an SVG mask, where the radius of the circle and the rectangle coincide and then animate the circle. By changing the radius of the circle, you can change the length of the motion on the rectangle.
  • Use a radioactive color gradient gradient transparency to brighten the color of the fly line.

SVG mask related knowledge

Without the mask, the rect element below will overwrite the color above and become yellow

    <svg width="200" height="200" viewBox="0 0 200 200">
      <rect x="0" y="0" width="200" height="390" fill="red"></rect>
      <rect x="0" y="0" width="200" height="390" fill="blue"></rect>
    </svg>
Copy the code

Use of mask:

<\mask><\defs> Using a mask: on an SVG element, mask= URL (# mask ID)

    <svg width="200" height="200" viewBox="0 0 200 200">
      <defs>
        <mask id="test-mask">
          <! -- Fill color -->
          <rect x="5" y="5" width="50" height="50" fill="green"></rect>
        </mask>
      </defs>
      <rect x="0" y="0" width="200" height="200" fill="red"></rect>
      <rect x="0" y="0" width="200" height="200" fill="blue" mask="url(#test-mask)"></rect>
    </svg>
Copy the code

After using the mask:

Knowledge of gradients

linearGradient

The linearGradient element is used to define a linearGradient for the fill or stroke of a graphical element

Fill =”url(#MyGradient)” means to fill the color of the element with the ID pointing to it

Stop element: A color gradient on a gradient, defined by the stop element. The stop element can be a child of either a element or a

element.

<svg width="120" height="120"  viewBox="0 0 120 120">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%"  stop-color="green" stop-opacity="1" />
            <stop offset="95%" stop-color="gold" stop-opacity="0" />
        </linearGradient>
    </defs>
    <rect fill="url(#MyGradient)" x="10" y="10" width="100" height="100"/>
</svg>
Copy the code

Radioactive gradation

Same code, but with a radioactive gradient, completely different effect

    <svg width="120" height="120"  viewBox="0 0 120 120">
        <defs>
            <radialGradient id="MyGradient1">
                <stop offset="5%"  stop-color="green" stop-opacity="1" />
                <stop offset="95%" stop-color="gold" stop-opacity="0"/>
            </radialGradient>
        </defs>
        <rect fill="url(#MyGradient1)" x="10" y="10" width="100" height="100"/>
    </svg>  
Copy the code

Radiative gradient draws a gradient that starts at a point. If not set, the default is to start at 50%, which is the center point of the entire element.

Cx, cy center point, controls the range of the inner circle starting to radiate, and fx, FY focus, controls the range of the outer circle starting to radiate, and the outer circle is projected toward the inner circle coordinate points

      <svg width="400" height="400" style="background: rgb(51, 6, 6);">
        <defs>
          <radialGradient id="test-radial-gradient" r="50%" cx="50%" cy="50%" fx="50%" fy="50%">
            <stop offset="0%" stop-color="white"></stop>
            <stop offset="10%" stop-color="yellow"></stop>
            <stop offset="95%" stop-color="red" stop-opacity="1"></stop>
            <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
          </radialGradient>
        </defs>
        <rect x="5" y="5" width="390" height="390" fill="url(#test-radial-gradient)"></rect>
      </svg>
Copy the code

The

node can have multiple properties describing its position and direction, but it is more complex.

The gradient is defined by two points:

The first point defines the circle around which the gradient ends. It requires a center point, defined by the cx and cy properties and the radius R. By setting these points we can move the gradient range and change its size.

The second point is called the focus and is defined by the FX and FY attributes. The first point describes the edge of the gradient, and the focus describes the center of the gradient

Component fly line rectangle implementation code

    <svg  width="300" height="300" >
       <defs>
        <radialGradient id="radialGradientId1" r="50%" cx="50%" cy="50%" fx="100%" fy="50%">
          <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
          <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
        </radialGradient>         
         <mask id="maskIdTest">
          <circle r="50" cx="0" cy="0" fill="url(#radialGradientId1)">
            <animateMotion
              dur="3s"
              path="M0 0 L300 0 L300 300 L0 300 Z"
              rotate="auto"
              repeatCount="indefinite"
            ></animateMotion>   
          </circle>        
         </mask>
       </defs>
       <path id="pathWithMask" d="M0 0 L300 0 L300 300 L0 300 Z" fill="none" stroke-width="1" stroke="green"/>
       <path id="pathWithMask" d="M0 0 L300 0 L300 300 L0 300 Z" fill="none" stroke-width="3" stroke="blue" mask="url(#maskIdTest)"/>     
    </svg>
Copy the code