YouTip

The `` element in SVG is used to create radial gradients, which produce gradient effects radiating outward from a central point, enabling rich color variations such as circular or radial patterns. Radial gradients can be applied to the fill or stroke of SVG graphic elements, adding depth and visual appeal. ### Basic Syntax <!-- Additional elements --> **Parameter Description:** * The `id` attribute defines a unique identifier for the radial gradient, used to reference it within the SVG image. * The `cx` and `cy` attributes define the coordinates of the gradient’s center point. * The `r` attribute defines the radius of the gradient. * The `fx` and `fy` attributes define the coordinates of the gradient’s focal point (optional), used to control the shape and direction of the gradient. * The `` element specifies colors and their positions within the gradient. The following code defines a radial gradient transitioning from red to blue, then applies it to a filled circle, giving the circle a gradient-filled appearance. ## Example ### Example 1 Define a radial gradient ellipse transitioning from white to blue: Below is the SVG code: ## Example [Try it yourself »](#) View: (#). **Code Explanation:** * The `id` attribute of the `` tag defines a unique name for the gradient. * The `cx`, `cy`, and `r` attributes define the outermost circle; `fx` and `fy` define the innermost circle (focal point). * A gradient may consist of two or more colors. Each color is specified using a `` tag. The `offset` attribute defines where each gradient color starts and ends. * The `fill` attribute links the ellipse element to this gradient. ### Example 2 Define another radial gradient ellipse transitioning from white to blue: Below is the SVG code: ## Example [Try it yourself »](#) View: (#). ### Notes * A gradient may contain multiple `` elements, each representing a color and its position within the gradient. * The `cx`, `cy`, and `r` attributes determine the center and radius of the gradient, while the `fx` and `fy` attributes control the focal point, allowing adjustment of the gradient’s shape and direction. * Coordinate values for the gradient may be expressed either as percentages or absolute length units; percentage values are relative to the size of the graphic element. * Radial gradients can be applied to the fill or stroke of SVG graphic elements. By using the `` element, you can create vibrant radial gradient effects, adding depth and visual appeal to SVG graphic elements.