This is the 11th day of my participation in the August More Text Challenge. For details, see:August is more challenging

This is the SVG series directory:

  • Front end will know will learn | SVG see this article is enough (a)
  • Front end will know will learn | SVG see this article is enough (2)
  • Front end will know will learn | SVG see this article is enough (3)
  • Front end will know will learn | SVG see this article is enough (4)
  • Front end will know will learn | SVG see this article is enough (5)

preface

In SVG, it’s not just about filling in colors and adding strokes. You can also add gradients to your drawing graphics applications, just like CSS. There are linear gradients and radial gradients. How to apply gradients in detail is as follows:

We cannot use the linear-gradient function in SVG, it is invalid code!!

Linear gradient

A linear gradient changes color along a straight line. Let’s look at an example of a linear gradient:

<svg width="300" height="500">
    <defs>
        <linearGradient id="test">
            <stop offset="5%" stop-color="#12c2e9" />
            <stop offset="85%" stop-color="#c471ed" />
        </linearGradient>
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="200" height="100"></rect>
</svg>
Copy the code

We create a defs element in the canvas (which we’ll cover later) and internally create a linearGradient tag that defines the linearGradient to be applied to the fill and stroke of the graphical element. Inside are two stop tags that specify the position offset attribute and the stop-color attribute to render the specified color at the specified location of the gradient.

Note here that the offset value starts at 0 and ranges from 0% to 100% (or 0 to 1), and if the position overlap occurs, the value will be set later.

The stop tag has three properties, two of which are shown above, and a stop-opacity property that sets the opacity of a position.

<stop offset="85%" stop-color="gold" stop-opacity="0"/>
Copy the code

Using a gradient requires a reference on the graph label using stroke and fill, and simply passing in the ID value of the gradient using a URL reference to the element. (The same goes for stroke.)

In the linearGradient TAB you can also define where the gradient starts and ends. They’re x1, x2, y1, and y2. The default gradient is horizontal. You can change the direction of the gradient by modifying these properties. Here is an example of a vertical gradient:

<svg width="300" height="500">
    <defs>
        <linearGradient id="test" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="5%" stop-color="#12c2e9" />
            <stop offset="85%" stop-color="#c471ed" stop-opacity="0" />
        </linearGradient>
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="200" height="100"></rect>
</svg>
Copy the code

  • wheny1 和 y2X1 is equal to x1x2You can create a horizontal gradient at different times
  • whenx1 和x2It’s the same thing, and y1 is equal toy2At different times, you can create a vertical gradient
  • whenx1 和 x2Y1 and y1 are differenty2You can create a corner gradient at different times

Radial gradient

Similar to the linear gradient, except that it diverges from one point to draw the gradient. Let’s look at an example of a radial gradient:

<svg width="300" height="500">
    <defs>
        <radialGradient  id="test">
            <stop offset="5%" stop-color="#0f0c29" />
            <stop offset="55%" stop-color="#302b63" />
        </radialGradient >
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="100" height="100"></rect>
</svg>
Copy the code

The stop is used in the same way as the linear gradient, the dark blue is now changing to gray towards the edge. In linear gradients we can control the direction of the gradient. Similarly, the center point of the gradient can be controlled in the radial gradient. Its properties are Cx, cy, r, FX, and fy, which respectively represent the position of the center point of the circle, the radius, and the gradient edge (range 0-1).

<svg width="300" height="500">
    <defs>
        <radialGradient  id="test" cx="0" cy="0" r="0.5" fy="0.25" fx="0.25">
            <stop offset="0%" stop-color="#0f0c29" />
            <stop offset="100%" stop-color="#302b63" />
        </radialGradient >
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="100" height="100"></rect>
</svg>
Copy the code

defs and use

In the example above, the linearGradient tag is wrapped with a DEFS tag. What does the DEFS tag do?

The defs tag, short for definitions, defines special elements such as gradients.

defs

It is used to pre-define an element and make it reusable in an SVG image. Graphics defined in defS elements are not rendered directly. You can render these tags anywhere in your viewport using the Use tag.

use

The graphics defined in the DEFs tag are not directly displayed on the SVG image and the use element is needed to introduce them to the page.

A simple use example:

<svg width="300" height="300">
    <defs>
        <g id="copyme">
            <circle r="10"/>
          </g>
    </defs>
    <use x="10" y="10" xlink:href="#copyme" />
    <use x="50" y="10" xlink:href="#copyme" />
</svg>
Copy the code

The last

This article explains how to create gradients in SVG and refer to them in drawn graphics, and then extends the defs and use tags. Thank you for reading!

😀😀 Pay attention to me, don’t get lost! 😀 😀