RetroSearch Browse

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

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

linearGradient · WebPlatform Docs

linearGradient 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>
    
    <svg width="400" height="400">
      <defs>
        
        <linearGradient id="magenta2cyan" >
        
        <stop offset="0%" style="stop-color:magenta"/>
        
        <stop offset="100%" style="stop-color:cyan"/>
        </linearGradient>
      </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.

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