RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/svg/elements/radialGradient below:

radialGradient · WebPlatform Docs

radialGradient Overview Table

DOM Interface: SVGElement

Examples

In the following code example, a radial gradient fills a rectangle. The gradient is defined in a definition and fills the rectangle by referencing the gradient. The gradient runs from magenta to cyan, starting in the center with magenta and working outward to cyan.

Copy this sample to a text file and save it with the .html file extension. Run it in Internet Explorer 9 to see the circular magenta to cyan gradient filling the rectangle.

The radial-filled rectangle will look like this:



<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    
    <svg width="400" height="400">
      <defs>
        
        <radialGradient id="magenta2cyan" >
        
        <stop offset="0%" style="stop-color:magenta"/>
        
        <stop offset="100%" style="stop-color:cyan"/>
        </radialGradient>
      </defs>
      
      <rect width="100" height="50" x="50" y="50" style="fill:url(#magenta2cyan)"/>
    </svg>
  </body>
</html>

Notes Remarks

Note: In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherent core HTML attributes, properties, events, methods, and styles.

The radialGradient element inherits properties from its ancestors instead of from the element that references the radialGradient element. radialGradient elements are never rendered directly. They exist so that you can reference them by using the fill and stroke properties.

The display property does not apply to the radialGradient element. radialGradient elements are not directly rendered even if the display property is set to a value other than none. But radialGradient elements are available for referencing even when the display property on the radialGradient element or any of its ancestors is set to none.

Standards information

Scalable Vector Graphics: Gradients and Patterns, Section 13.4.3

Members

The SVGRadialGradientElement object has these properties:

className: Gets the names of the classes that are assigned to this object.
cx: Gets or sets the x-coordinate for the center of the largest (that is, outermost) circle of a radial gradient.
cy: Gets or sets the y-coordinate for the center of the largest (that is, outermost) circle of a radial gradient.
externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
focusable: Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
fx: Gets or sets the x-coordinate for the focal point of a radial gradient.
fy: Gets or sets the y-coordinate for the focal point of a radial gradient.
gradientTransform: Gets a value that contains the definition of an optional, additional transformation from the gradient coordinate system onto the target coordinate system.
gradientUnits: Gets a value that indicates the type of coordinate system that is used because of a transformation.
href: Gets an xlink:href attribute of an element.
ownerSVGElement: Gets the nearest ancestor svg element.
r: Gets or sets the radius of a radial gradient.
spreadMethod: Gets a value that determines what happens if a gradient starts or ends inside the bounds of a target rectangle.
style: Gets a style object.
viewportElement: Gets the element that established the current viewport.
xmlbase: Gets or sets the base attribute on the element.

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4