SVG Tutoriallogin
SVG Tutorial
author:php.cn  update time:2022-04-18 17:51:50

SVG Gradient - Radioactive



SVG Radial Gradient - The <radialGradient>

<radialGradient> element is used to define a radial gradient.

<radialGradient> tag must be nested inside <defs>. The <defs> tag is the abbreviation of definitions, which can define special elements such as gradients.


Example 1

Define a radial gradient from white to blue ellipse:

The following is the SVG code:

Example

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

For Opera users: View SVG file ( Right click on the SVG graphic preview source).

Code analysis:

  • ##<radialGradient>The id attribute of the tag can define a unique name for the gradient

  • The outermost circle defined by the CX, CY and r attributes and the innermost circle defined by Fx and Fy

  • The gradient color range can be composed of two or more color composition. Each color is specified with a <stop> tag. The offset attribute is used to define the start and end of the gradient

  • The fill attribute links the ellipse element to this gradient


Example 2

Another ellipse defining a radioactive gradient from white to blue:

Here is the SVG code:

Example

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

For Opera users: View the SVG file (right-click on the SVG graphic preview source).