<radialGradient>

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

The <radialGradient> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.

Don't be confused with CSS radial-gradient() as CSS gradients can only apply to HTML elements where SVG gradient can only apply to SVG elements.

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </radialGradient>
  </defs>
 
  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

Attributes

cx
This attribute defines the x coordinate of the end circle of the radial gradient.
Value type: <length> ; Default value: 50%; Animatable: yes
cy
This attribute defines the y coordinate of the end circle of the radial gradient.
Value type: <length> ; Default value: 50%; Animatable: yes
fr
This attribute defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle.
Value type: <length> ; Default value: 50%; Animatable: yes
fx
This attribute defines the x coordinate of the start circle of the radial gradient.
Value type: <length> ; Default value: Same as cx; Animatable: yes
fy
This attribute defines the y coordinate of the start circle of the radial gradient.
Value type: <length> ; Default value: Same as cy; Animatable: yes
gradientUnits
This attribute defines the coordinate system for attributes x1, x2, y1, y2
Value typeuserSpaceOnUse|objectBoundingBox ; Default value: objectBoundingBox; Animatableyes
gradientTransform
This attribute provides additional transformation to the gradient coordinate system.
Value type: <transform-list> ; Default value: identity transform; Animatableyes
href
This attribute defines a reference to another <linearGradient> element that will be used as a template.
Value type: <URL> ; Default value: none; Animatable: yes
r
This attribute defines the radius of the end circle of the radial gradient. The gradient will be drawn such that the 100% <stop> is mapped to the perimeter of the end circle.
Value type: <length> ; Default value: 50%; Animatable: yes
spreadMethod
This attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient.
Value type: pad|reflect|repeat ; Default value: pad; Animatableyes
xlink:href

Deprecated since SVG 2
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

An <IRI> reference to another <linearGradient> element that will be used as a template.
Value type: <IRI> ; Default value: none; Animatable: yes

Global attributes

Core Attributes
Most notably: id
Styling Attributes
class, style
Event Attributes
Global event attributes, Document element event attributes
Presentation Attributes
Most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
XLink Attributes
xlink:href, xlink:title

Usage notes

CategoriesGradient element
Permitted contentAny number of the following elements, in any order:
Descriptive elements
<animate>, <animateTransform>, <set>, <stop>

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of '<radialGradient>' in that specification.
Candidate Recommendation Added fr attribute
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of '<radialGradient>' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
radialGradientChrome Full support 1Edge Full support YesFirefox Full support 1.5IE Full support 9Opera Full support 9Safari Full support 3.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3.1Samsung Internet Android Full support 1.0
cxChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
cyChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
frChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fxChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
fyChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
gradientTransformChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
gradientUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
hrefChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
spreadMethodChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
Deprecated
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.