linearGradient

This page has been flagged with the following issues:

High-level issues:

Content:

Overview Table

DOM Interface	SVGElement

Examples

In the following code example, a linear 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.

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

The gradient-filled rectangle will look like this:

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <!-- Inline SVG -->
    <svg width="400" height="400">
      <defs>
        <!-- Define linear gradient for magenta to cyan. -->
        <linearGradient id="magenta2cyan" >
        <!-- First color is magenta. -->
        <stop offset="0%" style="stop-color:magenta"/>
        <!-- Second color is cyan. -->
        <stop offset="100%" style="stop-color:cyan"/>
        </linearGradient>
      </defs>
      <!-- Rectangle fill is defined by linear gradient in 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.

Standards information

Scalable Vector Graphics: Gradients and Patterns, Section 13.4.2

Members

The SVGLinearGradientElement object has these properties:

className: Gets the names of the classes that are assigned to this object.
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).
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.
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.
x1: Gets or sets the x-coordinate for the begining of a gradient vector.
x2: Gets or sets the x-coordinate for the end of a gradient vector.
xmlbase: Gets or sets the base attribute on the element.
y1: Gets or sets the y-coordinate for the begining of a gradient vector.
y2: Gets or sets the y-coordinate for the end of a gradient vector.

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]

Search