14 January 2003

13 Gradients and Patterns


Contents


13.1 Introduction

With SVG, you can fill (i.e., paint the interior) or stroke (i.e., paint the outline) of shapes and text using one of the following:

SVG uses the general notion of a paint server. Gradients and patterns are just specific types of built-in paint servers. The 'solidColor' element is another built-in paint server, described in Color.

Paint servers are referenced using a URI reference on a 'fill' or 'stroke' property.

13.2 Gradients

13.2.1 Introduction

Gradients consist of continuously smooth color transitions along a vector from one color to another, possibly followed by additional transitions along the same vector to other colors. SVG provides for two types of gradients, linear gradients and radial gradients.

Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.

13.2.2 Linear gradients

Linear gradients are defined by a 'linearGradient' element.

<!ENTITY % SVG.linearGradient.extra.content "" >
<!ENTITY % SVG.linearGradient.element "INCLUDE" >
<![%SVG.linearGradient.element;[
<!ENTITY % SVG.linearGradient.content
    "(( %SVG.Description.class; )*, ( %SVG.stop.qname; | %SVG.animate.qname;
      | %SVG.set.qname; | %SVG.animateTransform.qname;
        %SVG.linearGradient.extra.content; )*)"
>
<!ELEMENT %SVG.linearGradient.qname; %SVG.linearG\
radient.content; >
<!-- end of SVG.linearGradient.element -->]]>
<!ENTITY % SVG.linearGradient.attlist "INCLUDE" >
<![%SVG.linearGradient.attlist;[
<!ATTLIST %SVG.linearGradient.qname;
    %SVG.Core.attrib;
    %SVG.Style.attrib;
    %SVG.Color.attrib;
    %SVG.Gradient.attrib;
    %SVG.XLink.attrib;
    %SVG.External.attrib;
    x1 %Coordinate.datatype; #IMPLIED
    y1 %Coordinate.datatype; #IMPLIED
    x2 %Coordinate.datatype; #IMPLIED
    y2 %Coordinate.datatype; #IMPLIED
    gradientUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    gradientTransform %TransformList.datatype; #IMPLIED
    spreadMethod ( pad | reflect | repeat ) #IMPLIED
>

Attribute definitions:

gradientUnits = "userSpaceOnUse | objectBoundingBox"
Defines the coordinate system for attributes x1, y1, x2, y2.
If gradientUnits="userSpaceOnUse", x1, y1, x2, y2 represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a 'fill' or 'stroke' property) and then applying the transform specified by attribute gradientTransform.
If gradientUnits="objectBoundingBox", the user coordinate system for attributes x1, y1, x2, y2 is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) and then applying the transform specified by attribute gradientTransform.
When gradientUnits="objectBoundingBox" and gradientTransform is the identity matrix, the stripes of the linear gradient are perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the stripes that are conceptually perpendicular to the gradient vector within object bounding box space will render non-perpendicular relative to the gradient vector in user space due to application of the non-uniform scaling transformation from bounding box space to user space.
If attribute gradientUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.
Animatable: yes.
gradientTransform = "<transform-list>"
Contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
If attribute gradientTransform is not specified, then the effect is as if an identity transform were specified.
Animatable: yes.
x1 = "<coordinate>"
x1, y1, x2, y2 define a gradient vector for the linear gradient. This gradient vector provides starting and ending points onto which the gradient stops are mapped. The values of x1, y1, x2, y2 can be either numbers or percentages.
If the attribute is not specified, the effect is as if a value of "0%" were specified.
Animatable: yes.
y1 = "<coordinate>"
See x1.
If the attribute is not specified, the effect is as if a value of "0%" were specified.
Animatable: yes.
x2 = "<coordinate>"
See x1.
If the attribute is not specified, the effect is as if a value of "100%" were specified.
Animatable: yes.
y2 = "<coordinate>"
See x1.
If the attribute is not specified, the effect is as if a value of "0%" were specified.
Animatable: yes.
spreadMethod = "pad | reflect | repeat"
Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle. Possible values are: pad, which says to use the terminal colors of the gradient to fill the remainder of the target region, reflect, which says to reflect the gradient pattern start-to-end, end-to-start, start-to-end, etc. continuously until the target rectangle is filled, and repeat, which says to repeat the gradient pattern start-to-end, start-to-end, start-to-end, etc. continuously until the target region is filled.
If the attribute is not specified, the effect is as if a value of "pad" were specified.
Animatable: yes.
xlink:href = "<uri>"
A URI reference to a different 'linearGradient' or 'radialGradient' element within the current SVG document fragment. Any 'linearGradient' attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no defined gradient stops, and the referenced element does (possibly due to its own href attribute), then this element inherits the gradient stop from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own href attribute, then the current element can inherit those attributes or gradient stops.
Animatable: yes.

Percentages are allowed for x1, y1, x2, y2. For gradientUnits="userSpaceOnUse", percentages represent values relative to the current viewport. For gradientUnits="objectBoundingBox", percentages represent values relative to the bounding box for the object.

If x1 = x2 and y1 = y2, then the area to be painted will be painted as a single color using the color and opacity of the last gradient stop.

Properties inherit into the 'linearGradient' element from its ancestors; properties do not inherit from the element referencing the 'linearGradient' element.

'linearGradient' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'linearGradient' element; thus, 'linearGradient' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'linearGradient' elements are available for referencing even when the 'display' property on the 'linearGradient' element or any of its ancestors is set to none.

Example lingrad01 shows how to fill a rectangle by referencing a linear gradient paint server.

<?Surf Clothing version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     Surfns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example lingrad01 - fill a rectangle using a 
           linear gradient paint server</desc>
  <g>
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
      </linearGradient>
    </defs>
    <!-- Outline the drawing area in blue -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>
    <!-- The rectangle is filled using a linear gradient paint server -->
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>
Example lingrad01
Example lingrad01 - fill a rectangle by referencing a linear gradient paint server

View this example as SVG (SVG-enabled browsers only)

13.2.3 Radial gradients

Radial gradients are defined by a 'radialGradient' element.

<!ENTITY % SVG.radialGradient.extra.content "" >
<!ENTITY % SVG.radialGradient.element "INCLUDE" >
<![%SVG.radialGradient.element;[
<!ENTITY % SVG.radialGradient.content
    "(( %SVG.Description.class; )*, ( %SVG.stop.qname; | %SVG.animate.qname;
      | %SVG.set.qname; | %SVG.animateTransform.qname;
        %SVG.radialGradient.extra.content; )*)"
>
<!ELEMENT %SVG.radialGradient.qname; %SVG.radialG\
radient.content; >
<!-- end of SVG.radialGradient.element -->]]>
<!ENTITY % SVG.radialGradient.attlist "INCLUDE" >
<![%SVG.radialGradient.attlist;[
<!ATTLIST %SVG.radialGradient.qname;
    %SVG.Core.attrib;
    %SVG.Style.attrib;
    %SVG.Color.attrib;
    %SVG.Gradient.attrib;
    %SVG.XLink.attrib;
    %SVG.External.attrib;
    cx %Coordinate.datatype; #IMPLIED
    cy %Coordinate.datatype; #IMPLIED
    r %Length.datatype; #IMPLIED
    fx %Coordinate.datatype; #IMPLIED
    fy %Coordinate.datatype; #IMPLIED
    gradientUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    gradientTransform %TransformList.datatype; #IMPLIED
    spreadMethod ( pad | reflect | repeat ) #IMPLIED
>

Attribute definitions:

gradientUnits = "userSpaceOnUse | objectBoundingBox"
Defines the coordinate system for attributes cx, cy, r, fx, fy.
If gradientUnits="userSpaceOnUse", cx, cy, r, fx, fy represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a 'fill' or 'stroke' property) and then applying the transform specified by attribute gradientTransform.
If gradientUnits="objectBoundingBox", the user coordinate system for attributes cx, cy, r, fx, fy is established using the bounding box of the element to which the gradient is applied (see Object bounding box units) and then applying the transform specified by attribute gradientTransform.
When gradientUnits="objectBoundingBox" and gradientTransform is the identity matrix, then the rings of the radial gradient are circular with respect to the object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box). When the object's bounding box is not square, the rings that are conceptually circular within object bounding box space will render as elliptical due to application of the non-uniform scaling transformation from bounding box space to user space.
If attribute gradientUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.
Animatable: yes.
gradientTransform = "<transform-list>"
Contains the definitions of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the gradient. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
If attribute gradientTransform is not specified, then the effect is as if an identity transform were specified.
Animatable: yes.
cx = "<coordinate>"
cx, cy, r define the largest (i.e., outermost) circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle.
If the attribute is not specified, the effect is as if a value of "50%" were specified.
Animatable: yes.
cy = "<coordinate>"
See cx.
If the attribute is not specified, the effect is as if a value of "50%" were specified.
Animatable: yes.
r = "<length>"
See cx.
A negative value is an error (see Error processing). A value of zero will cause the area to be painted as a single color using the color and opacity of the last gradient stop.
If the attribute is not specified, the effect is as if a value of "50%" were specified.
Animatable: yes.
fx = "<coordinate>"
fx, fy define the focal point for the radial gradient. The gradient will be drawn such that the 0% gradient stop is mapped to (fx, fy).
If attribute fx is not specified, fx will coincide with cx.
Animatable: yes.
fy = "<coordinate>"
See fx.
If attribute fy is not specified, fy will coincide with cy.
Animatable: yes.
spreadMethod = "pad | reflect | repeat"
Indicates what happens if the gradient starts or ends inside the bounds of the object(s) being painted by the gradient. Has the same values and meanings as the spreadMethod attribute on 'linearGradient' element.
Animatable: yes.
xlink:href = "<uri>"
A URI reference to a different 'linearGradient' or 'radialGradient' element within the current SVG document fragment. Any 'radialGradient' attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no defined gradient stops, and the referenced element does (possibly due to its own href attribute), then this element inherits the gradient stop from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attribute or gradient stops due to its own href attribute, then the current element can inherit those attributes or gradient stops.
Animatable: yes.

Percentages are allowed for attributes cx, cy, r, fx and fy. For gradientUnits="userSpaceOnUse", percentages represent values relative to the current viewport. For gradientUnits="objectBoundingBox", percentages represent values relative to the bounding box for the object.

If the point defined by fx and fy lies outside the circle defined by cx, cy and r, then the user agent shall set the focal point to the intersection of the line from (cx, cy) to (fx, fy) with the circle defined by cx, cy and r.

Properties inherit into the 'radialGradient' element from its ancestors; properties do not inherit from the element referencing the 'radialGradient' element.

'radialGradient' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'radialGradient' element; thus, 'radialGradient' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'radialGradient' elements are available for referencing even when the 'display' property on the 'radialGradient' element or any of its ancestors is set to none.

Example radgrad01 shows how to fill a rectangle by referencing a radial gradient paint server.

<?Surf Clothing version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     Surfns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example radgrad01 - fill a rectangle by referencing a 
           radial gradient paint server</desc>
  <g>
    <defs>
      <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"
                      cx="400" cy="200" r="300" fx="400" fy="200">
        <stop offset="0%" stop-color="red" />
        <stop offset="50%" stop-color="blue" />
        <stop offset="100%" stop-color="red" />
      </radialGradient>
    </defs>
    <!-- Outline the drawing area in blue -->
    <rect fill="none" stroke="blue" 
          x="1" y="1" width="798" height="398"/>
    <!-- The rectangle is filled using a radial gradient paint server -->
    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="600" height="200"/>
  </g>
</svg>
Example radgrad01
Example radgrad01 - fill a rectangle by referencing a radial gradient paint server

View this example as SVG (SVG-enabled browsers only)

13.2.4 Gradient stops

The ramp of colors to use on a gradient is defined by the 'stop' elements that are child elements to either the 'linearGradient' element or the 'radialGradient' element.

<!ENTITY % SVG.stop.extra.content "" >
<!ENTITY % SVG.stop.element "INCLUDE" >
<![%SVG.stop.element;[
<!ENTITY % SVG.stop.content
    "( %SVG.animate.qname; | %SVG.set.qname; | %SVG.animateColor.qname;
       %SVG.stop.extra.content; )*"
>
<!ELEMENT %SVG.stop.qname; %SVG.stop.content; >
<!-- end of SVG.stop.element -->]]>
<!ENTITY % SVG.stop.attlist "INCLUDE" >
<![%SVG.stop.attlist;[
<!ATTLIST %SVG.stop.qname;
    %SVG.Core.attrib;
    %SVG.Style.attrib;
    %SVG.Color.attrib;
    %SVG.Gradient.attrib;
    offset %NumberOrPercentage.datatype; #REQUIRED
>

Attribute definitions:

offset = "<number> | <percentage>"
The offset attribute is either a <number> (usually ranging from 0 to 1) or a <percentage> (usually ranging from 0% to 100%) which indicates where the gradient stop is placed. For linear gradients, the offset attribute represents a location along the gradient vector. For radial gradients, it represents a percentage distance from (fx,fy) to the edge of the outermost/largest circle.
Animatable: yes.

The 'stop-color' property indicates what color to use at that gradient stop. The keyword currentColor and ICC colors can be specified in the same manner as within a <paint> specification for the 'fill' and 'stroke' properties.

'stop-color'
Value: currentColor |
<color> [icc-color(<name>[,<icccolorvalue>]*)] |
inherit
Initial: black
Applies to: 'stop' elements
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

The 'stop-opacity' property defines the opacity of a given gradient stop.

'stop-opacity'
Value: <opacity-value> | inherit
Initial: 1
Applies to: 'stop' elements
Inherited: no
Percentages: N/A
Media: visual
Animatable: yes

Some notes on gradients:

13.3 Patterns

A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using a 'pattern' element and then referenced by properties 'fill' and 'stroke' on a given graphics element to indicate that the given element shall be filled or stroked with the referenced pattern.

Attributes x, y, width, height and patternUnits define a reference rectangle somewhere on the infinite canvas. The reference rectangle has its top/left at (x,y) and its bottom/right at (x+width,y+height). The tiling theoretically extends a series of such rectangles to infinity in X and Y (positive and negative), with rectangles starting at (x + m*width, y + n*height) for each possible integer value for m and n.

<!ENTITY % SVG.pattern.extra.content "" >
<!ENTITY % SVG.pattern.element "INCLUDE" >
<![%SVG.pattern.element;[
<!ENTITY % SVG.pattern.content
    "( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class;
       %SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class;
       %SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class;
       %SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class;
       %SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class;
       %SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class;
       %SVG.Font.class; %SVG.pattern.extra.content; )*"
>
<!ELEMENT %SVG.pattern.qname; %SVG.pattern.content; >
<!-- end of SVG.pattern.element -->]]>
<!ENTITY % SVG.pattern.attlist "INCLUDE" >
<![%SVG.pattern.attlist;[
<!ATTLIST %SVG.pattern.qname;
    %SVG.Core.attrib;
    %SVG.Conditional.attrib;
    %SVG.Style.attrib;
    %SVG.Presentation.attrib;
    %SVG.XLink.attrib;
    %SVG.External.attrib;
    x %Coordinate.datatype; #IMPLIED
    y %Coordinate.datatype; #IMPLIED
    width %Length.datatype; #IMPLIED
    height %Length.datatype; #IMPLIED
    patternUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    patternContentUnits ( userSpaceOnUse | objectBoundingBox ) #IMPLIED
    patternTransform %TransformList.datatype; #IMPLIED
    viewBox %ViewBoxSpec.datatype; #IMPLIED
    preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet'
>

Attribute definitions:

patternUnits = "userSpaceOnUse | objectBoundingBox"
Defines the coordinate system for attributes x, y, width, height.
If patternUnits="userSpaceOnUse", x, y, width, height represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the 'pattern' element is referenced (i.e., the user coordinate system for the element referencing the 'pattern' element via a 'fill' or 'stroke' property) and then applying the transform specified by attribute patternTransform.
If patternUnits="objectBoundingBox", the user coordinate system for attributes x, y, width, height is established using the bounding box of the element to which the pattern is applied (see Object bounding box units) and then applying the transform specified by attribute patternTransform.
If attribute patternUnits is not specified, then the effect is as if a value of objectBoundingBox were specified.
Animatable: yes.
patternContentUnits = "userSpaceOnUse | objectBoundingBox"
Defines the coordinate system for the contents of the 'pattern'. Note that this attribute has no effect if attribute viewBox is specified.
If patternContentUnits="userSpaceOnUse", the user coordinate system for the contents of the 'pattern' element is the coordinate system that results from taking the current user coordinate system in place at the time when the 'pattern' element is referenced (i.e., the user coordinate system for the element referencing the 'pattern' element via a 'fill' or 'stroke' property) and then applying the transform specified by attribute patternTransform.
If patternContentUnits="objectBoundingBox", the user coordinate system for the contents of the 'pattern' element is established using the bounding box of the element to which the pattern is applied (see Object bounding box units) and then applying the transform specified by attribute patternTransform.
If attribute patternContentUnits is not specified, then the effect is as if a value of userSpaceOnUse were specified.
Animatable: yes.
patternTransform = "<transform-list>"
Contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system (i.e., userSpaceOnUse or objectBoundingBox). This allows for things such as skewing the pattern tiles. This additional transformation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined transformations, including the implicit transformation necessary to convert from object bounding box units to user space.
If attribute patternTransform is not specified, then the effect is as if an identity transform were specified.
Animatable: yes.
x = "<coordinate>"
x, y, width, height indicate how the pattern tiles are placed and spaced. These attributes represent coordinates and values in the coordinate space specified by the combination of attributes patternUnits and patternTransform.
If the attribute is not specified, the effect is as if a value of zero were specified.
Animatable: yes.
y = "<coordinate>"
See x.
If the attribute is not specified, the effect is as if a value of zero were specified.
Animatable: yes.
width = "<length>"
See x.
A negative value is an error (see Error processing). A value of zero disables rendering of the element (i.e., no paint is applied).
If the attribute is not specified, the effect is as if a value of zero were specified.
Animatable: yes.
height = "<length>"
See x.
A negative value is an error (see Error processing). A value of zero disables rendering of the element (i.e., no paint is applied).
If the attribute is not specified, the effect is as if a value of zero were specified.
Animatable: yes.
xlink:href = "<uri>"
A URI reference to a different 'pattern' element within the current SVG document fragment. Any attributes which are defined on the referenced element which are not defined on this element are inherited by this element. If this element has no children, and the referenced element does (possibly due to its own href attribute), then this element inherits the children from the referenced element. Inheritance can be indirect to an arbitrary level; thus, if the referenced element inherits attributes or children due to its own href attribute, then the current element can inherit those attributes or children.
Animatable: yes.

SVG's user agent style sheet sets the 'overflow' property for 'pattern' elements to hidden, which causes a rectangular clipping path to be created at the bounds of the pattern tile. Unless the 'overflow' property is overridden, any graphics within the pattern which goes outside of the pattern rectangle will be clipped. Example pattern01 below shows the effect of clipping to the pattern tile.

The contents of the 'pattern' are relative to a new coordinate system. If there is a viewBox attribute, then the new coordinate system is fitted into the region defined by the x, y, width, height and patternUnits attributes on the 'pattern' element using the standard rules for viewBox and preserveAspectRatio. If there is no viewBox attribute, then the new coordinate system has its origin at (x,y), where x is established by the x attribute on the 'pattern' element, and y is established by the y attribute on the 'pattern' element. Thus, in the following example:

<pattern x="10" y="10" width="20" height="20">
   <rect x="5" y="5" width="10" height="10"/>
</pattern>

the rectangle has its top/left located 5 units to the right and 5 units down from the origin of the pattern tile.

The viewBox attribute introduces a supplemental transformation which is applied on top of any transformations necessary to create a new pattern coordinate system due to attributes x, y, width, height and patternUnits.

Properties inherit into the 'pattern' element from its ancestors; properties do not inherit from the element referencing the 'pattern' element.

'pattern' elements are never rendered directly; their only usage is as something that can be referenced using the 'fill' and 'stroke' properties. The 'display' property does not apply to the 'pattern' element; thus, 'pattern' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'pattern' elements are available for referencing even when the 'display' property on the 'pattern' element or any of its ancestors is set to none.

Event attributes and event listeners attached to the contents of a 'pattern' element are not processed; only the rendering aspects of 'pattern' elements are processed.

Example pattern01 shows how to fill a rectangle by referencing a pattern paint server. Note how the blue stroke of each triangle has been clipped at the top and the left. This is due to SVG's user agent style sheet setting the 'overflow' property for 'pattern' elements to hidden, which causes the pattern to be clipped to the bounds of the pattern tile.

<?Surf Clothing version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     Surfns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id="TrianglePattern" patternUnits="userSpaceOnUse"
             x="0" y="0" width="100" height="100"
             viewBox="0 0 10 10" >
      <path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue" />
    </pattern> 
  </defs>
  <!-- Outline the drawing area in blue -->
  <rect fill="none" stroke="blue" 
        x="1" y="1" width="798" height="398"/>
  <!-- The ellipse is filled using a triangle pattern paint server
       and stroked with black -->
  <ellipse fill="url(#TrianglePattern)" stroke="black" stroke-width="5"  
           cx="400" cy="200" rx="350" ry="150" />
</svg>
Example pattern01
Example pattern01 - fill a rectangle by referencing a radial gradient paint server

View this example as SVG (SVG-enabled browsers only)

.4 Gradient Module

Elements Attributes Content Model
linearGradient Core.attrib, XLink.attrib, Paint.attrib, Gradient.attrib, Style.attrib, External.attrib, gradientUnits, gradientTransform, x1, y1, x2, y2, spreadMethod (Description.class | Animation.class | stop)*
radialGradient Core.attrib, XLink.attrib, Paint.attrib, Gradient.attrib, Style.attrib, External.attrib, gradientUnits, gradientTransform, cx, cy, r, fx, fy, spreadMethod (Description.class | Animation.class | stop)*
stop Core.attrib, Style.attrib, Paint.attrib, Gradient.attrib, offset (Description.class | Animation.class)*

.4.1 Gradient Content Set

The Gradient Module defines the Gradient.class content set.

Content Set Name Elements in Content Set
Gradient.class linearGradient, radialGradient

.4.2 Gradient Attribute Set

The Gradient Module defines the Gradient.attrib attribute set.

Collection Name Attributes in Collection
Gradient.attrib stop-color, stop-opacity

.5 Pattern Module

Elements Attributes Content Model
pattern Core.attrib,, XLink.attrib, Conditional.attrib, External.attrib, Style.attrib, Presentation.attrib, viewBox, preserveAspectRatio, patternUnits, patternTransform, x, y, width, height (Description.class | Structure.class | Shape.class | Text.class | Image.class | Hyperlink.class | Script.class | Style.class | Clip.class | Mask.class | Gradient.class | Pattern.class | Filter.class | Cursor.class | Font.class | ColorProfile.class | Animation.class)*

.5.1 Pattern Content Set

The Pattern Module defines the Pattern.class content set.

Content Set Name Elements in Content Set
Pattern.class pattern

13.6 DOM interfaces

The following interfaces are defined below: SVGGradientElement, SVGLinearGradientElement, SVGRadialGradientElement, SVGStopElement, SVGPatternElement.


Interface SVGGradientElement

The SVGGradientElement interface is a base interface used by SVGLinearGradientElement and SVGRadialGradientElement.


IDL Definition
interface SVGGradientElement : 
                SVGElement,
                SVGURIReference,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGUnitTypes { 
  // Spread Method Types
  const unsigned short SVG_SPREADMETHOD_UNKNOWN = 0;
  const unsigned short SVG_SPREADMETHOD_PAD     = 1;
  const unsigned short SVG_SPREADMETHOD_REFLECT = 2;
  const unsigned short SVG_SPREADMETHOD_REPEAT  = 3;
  readonly attribute SVGAnimatedEnumeration   gradientUnits;
  readonly attribute SVGAnimatedTransformList gradientTransform;
  readonly attribute SVGAnimatedEnumeration   spreadMethod;
};

Definition group Spread Method Types
Defined constants
SVG_SPREADMETHOD_UNKNOWN The type is not one of predefined types. It is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type.
SVG_SPREADMETHOD_PAD Corresponds to value pad.
SVG_SPREADMETHOD_REFLECT Corresponds to value reflect.
SVG_SPREADMETHOD_REPEAT Corresponds to value repeat.
Attributes
readonly SVGAnimatedEnumeration gradientUnits
Corresponds to attribute gradientUnits on the given element. Takes one of the constants defined in SVGUnitTypes.
readonly SVGAnimatedTransformList gradientTransform
Corresponds to attribute gradientTransform on the given element.
readonly SVGAnimatedEnumeration spreadMethod
Corresponds to attribute spreadMethod on the given element. One of the Spread Method Types.

Interface SVGLinearGradientElement

The SVGLinearGradientElement interface corresponds to the 'linearGradient' element.


IDL Definition
interface SVGLinearGradientElement : SVGGradientElement { 
  readonly attribute SVGAnimatedLength x1;
  readonly attribute SVGAnimatedLength y1;
  readonly attribute SVGAnimatedLength x2;
  readonly attribute SVGAnimatedLength y2;
};

Attributes
readonly SVGAnimatedLength x1
Corresponds to attribute x1 on the given 'linearGradient' element.
readonly SVGAnimatedLength y1
Corresponds to attribute y1 on the given 'linearGradient' element.
readonly SVGAnimatedLength x2
Corresponds to attribute x2 on the given 'linearGradient' element.
readonly SVGAnimatedLength y2
Corresponds to attribute y2 on the given 'linearGradient' element.

Interface SVGRadialGradientElement

The SVGRadialGradientElement interface corresponds to the 'radialGradient' element.


IDL Definition
interface SVGRadialGradientElement : SVGGradientElement { 
  readonly attribute SVGAnimatedLength cx;
  readonly attribute SVGAnimatedLength cy;
  readonly attribute SVGAnimatedLength r;
  readonly attribute SVGAnimatedLength fx;
  readonly attribute SVGAnimatedLength fy;
};

Attributes
readonly SVGAnimatedLength cx
Corresponds to attribute cx on the given 'radialGradient' element.
readonly SVGAnimatedLength cy
Corresponds to attribute cy on the given 'radialGradient' element.
readonly SVGAnimatedLength r
Corresponds to attribute r on the given 'radialGradient' element.
readonly SVGAnimatedLength fx
Corresponds to attribute fx on the given 'radialGradient' element.
readonly SVGAnimatedLength fy
Corresponds to attribute fy on the given 'radialGradient' element.

Interface SVGStopElement

The SVGStopElement interface corresponds to the 'stop' element.


IDL Definition
interface SVGStopElement : 
                SVGElement,
                SVGStylable { 
  readonly attribute SVGAnimatedNumber offset;
};

Attributes
readonly SVGAnimatedNumber offset
Corresponds to attribute offset on the given 'stop' element.

Interface SVGPatternElement

The SVGPatternElement interface corresponds to the 'pattern' element.


IDL Definition
interface SVGPatternElement : 
                SVGElement,
                SVGURIReference,
                SVGTests,
                SVGLangSpace,
                SVGExternalResourcesRequired,
                SVGStylable,
                SVGFitToViewBox,
                SVGUnitTypes { 
  readonly attribute SVGAnimatedEnumeration   patternUnits;
  readonly attribute SVGAnimatedEnumeration   patternContentUnits;
  readonly attribute SVGAnimatedTransformList patternTransform;
  readonly attribute SVGAnimatedLength        x;
  readonly attribute SVGAnimatedLength        y;
  readonly attribute SVGAnimatedLength        width;
  readonly attribute SVGAnimatedLength        height;
};

Attributes
readonly SVGAnimatedEnumeration patternUnits
Corresponds to attribute patternUnits on the given 'pattern' element. Takes one of the constants defined in SVGUnitTypes.
readonly SVGAnimatedEnumeration patternContentUnits
Corresponds to attribute patternContentUnits on the given 'pattern' element. Takes one of the constants defined in SVGUnitTypes.
readonly SVGAnimatedTransformList patternTransform
Corresponds to attribute patternTransform on the given 'pattern' element.
readonly SVGAnimatedLength x
Corresponds to attribute x on the given 'pattern' element.
readonly SVGAnimatedLength y
Corresponds to attribute y on the given 'pattern' element.
readonly SVGAnimatedLength width
Corresponds to attribute width on the given 'pattern' element.
readonly SVGAnimatedLength height
Corresponds to attribute height on the given 'pattern' element.

4-19-2013

4-19-2013


kevin carr city of stantonkevin carr city of stantonkevin carr city of stantonkevin carr city of stantonSales Tax Measure GG City of Stantonkevin carr city of stantonkevin carr city of stantonkevin carr city of stantonkevin carr city of stanton


free stock videos
iphone battery cases

Kevin Carr Stanton with Governor Brown Kevin Carr with CA CFO John Chaing Kevin Carr with Congresswoman Loretta Sanchez Kevin Carr with CA State Senator Joe Dunn

Billabong Board Shorts
Quicksilver Board Shorts
I got a new iPhone5 battery case that I found on the web. I have a new ipad and I just love it. My new HTC One cellphone is awesome. I ordered a new iphone5 and I can't wait to get it. The smartphone charger I purchased is exactly what I needed. The new HTC phone is the best. I need more used AOL disks for my computer. The new emerica shoe has a new larger display.
hawaiian sandal
dekline
You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases
hawaiian sandals

Rigoberto Ramirez

I found a iphone battery cases to get a battery backup chargers. That's why there are portable power packs—when the power is out.

I reviewed the clothing at iphone battery cases and found the best Active clothing available.

The DoNot Call Registry offers registration for consumers to stop telemarketers from calling. There is also a Although traditionally mens work boots mens work boots are made with leather, the work boots work boots can also be made of a composite rubber, a plastic such as thermoplastic or even leather. Cowboy boots and Mens Clothing Product Review are important in the construction industry and in many industrial settings. Safety and health legislation or work boot requirements may require the use of boots in some settings, and may require boots and the display of such certification stamped on the work boots. and a women's cowboy boots online. Sign up now.

I need to get a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases for my iPhone. There are plenty of good You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases out there.
Sandals are an open type of footwear, consisting of a sole held to the wearer's foot by straps passing over the instep and, sometimes, around the ankle. Found the girls hawaiian shoes on the free stock videos website. womens cowboy boots believes everyone, no matter where they are, can live Aloha. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165. I bought kids hawaiian Sandals and womens cowboy boots from Hawaii directly. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165.

Order Sandals mens on the website sandals hawaiian and order a few. Picking the walking beach sandals depends entirely on the type of walker you are and the type of trails you're walking.

These are the shops to visit:

  1. Sandals from hawaii
  2. hawaiian leather sandal
  3. hawaiian leather sandal
  4. skate footwear
You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases
Quicksilver surf clothing Board Shorts



skateboard
David Cadena Stanton
iPhone 6 plus battery pack
There is the 1cecilia181 for my car and the 1cecilia182 for my other car and the 1cecilia183 for my wife's car. The new Baby Doll sexy looking lingerie is the best one to get. The new Baby Doll sexy lingerie looks great. The new the bridal chemises from In Bloom is the best around.

Also, you will want to check out Stanton California so you can see what's up and they are part of Stanton City Hall as well.

You can also get Organic Skin Care products from Bliss Bath Body and you must check out their Natural Body Lotions and bath soaps

Now if you are looking for the best deals

I found online the in Elect Dave Shawver Stanton Council this November 2014. Elect march madness ncaa and internetusers this November 2014.

delivered.

These are the shops to visit:

  1. Sandals from hawaii
  2. hawaiian leather sandal
  3. hawaiian leather sandal
  4. skate footwear

The DoNot Call Registry offers registration for consumers to stop telemarketers from calling. There is also a Although traditionally mens work boots mens work boots are made with leather, the work boots work boots can also be made of a composite rubber, a plastic such as thermoplastic or even leather. Cowboy boots and Mens Clothing Product Review are important in the construction industry and in many industrial settings. Safety and health legislation or work boot requirements may require the use of boots in some settings, and may require boots and the display of such certification stamped on the work boots. and a women's cowboy boots online. Sign up now.

I need to get a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases for my iPhone. There are plenty of good You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases out there.
Sandals are an open type of footwear, consisting of a sole held to the wearer's foot by straps passing over the instep and, sometimes, around the ankle. Found the girls hawaiian shoes on the free stock videos website. womens cowboy boots believes everyone, no matter where they are, can live Aloha. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165. I bought kids hawaiian Sandals and womens cowboy boots from Hawaii directly. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165.

Order Sandals mens on the website sandals hawaiian and order a few. Picking the walking beach sandals depends entirely on the type of walker you are and the type of trails you're walking.

I found a hawaiian sandal and another Rigoberto Ramirez on this hawaiian Sandal website.



a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases and

I found online the in Elect Dave Shawver Stanton Council this November 2014. Elect march madness ncaa and internetusers this November 2014.

delivered.

These are the shops to visit:

  1. Sandals from hawaii
  2. hawaiian leather sandal
  3. hawaiian leather sandal
  4. skate footwear

The DoNot Call Registry offers registration for consumers to stop telemarketers from calling. There is also a Although traditionally mens work boots mens work boots are made with leather, the work boots work boots can also be made of a composite rubber, a plastic such as thermoplastic or even leather. Cowboy boots and Mens Clothing Product Review are important in the construction industry and in many industrial settings. Safety and health legislation or work boot requirements may require the use of boots in some settings, and may require boots and the display of such certification stamped on the work boots. and a women's cowboy boots online. Sign up now.

I need to get a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases for my iPhone. There are plenty of good You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases out there.
Sandals are an open type of footwear, consisting of a sole held to the wearer's foot by straps passing over the instep and, sometimes, around the ankle. Found the girls hawaiian shoes on the free stock videos website. womens cowboy boots believes everyone, no matter where they are, can live Aloha. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165. I bought kids hawaiian Sandals and womens cowboy boots from Hawaii directly. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165.

Order Sandals mens on the website sandals hawaiian and order a few. Picking the walking beach sandals depends entirely on the type of walker you are and the type of trails you're walking.

I found a hawaiian sandal and another Rigoberto Ramirez on this hawaiian Sandal website.



a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases and
Hey, check out this Organic Skin Care European Soaps along with Natural Lavender Body Lotion and shea butter

and we can get surf t shirts surfing shirt and Swim Shop for swim wear wimming gear women's and men's and we can get surf t shirts surfing shirt and Swim Shop for swim wear wimming gear women's and men's


I reviewed the clothing at iphone battery cases and found the best Active clothing available.

I found the 1cecilia316 on Amazon.com. And a newer version of the hawaiian sandal is also available.

The hawaiian sandal is also for sale on iBlason and at the hawaiian sandal is at the iPhone Arena.

|

Get the 1cecilia316 on Amazon.com. Or a newer version of the hawaiian sandal is also available on their website.

Order the hawaiian sandal is also for sale on iBlason or at the hawaiian sandal is at the iPhone Area.

Fox Head clothes is on sales at Kevin Carr on the Internet.

Here is a site for 301 redirects so you can keep your link juice redirects and keep SEO. The 301 link juice redirects are the best way to maintain your seo.

The best iPhone battery cases should be easy to toggle on and off, simple to charge, and capable of providing a good indication of how much battery life remains in the case. Oh, and of course, theiphone 6 plus removable case along with iPhone 6 plus removable cases by Incipio should look stylish too.

A battery case not only offers bump, knock and (short) drop protection but as much as a 120 percent recharge foriphone 6 removable case with a iPhone 6 removable cases so it can keep you powered up with Incipio. Keeping your iPhone in aiphone case and a iphone cases while traveling may provide an extra benefit, since almost all such cases rely on Micro-USB cables for charging—you may well have other devices (keyboards, speakers) that can share the same charging cable, and replacement Micro-USB cables are far cheaper than Lightning cables.
Fox shorts is at work boots on the website.

French Lavender Soaps Organic And Natural Body Care Shea Body Butters

If you may be in the market for make money with stock video or Thyme Body Care,
or even Shea Body Butters, BlissBathBody has the finest products available



free stock videos
iphone battery cases

Kevin Carr Stanton with Governor Brown Kevin Carr with CA CFO John Chaing Kevin Carr with Congresswoman Loretta Sanchez Kevin Carr with CA State Senator Joe Dunn

Billabong Board Shorts
Quicksilver Board Shorts
I got a new iPhone5 battery case that I found on the web. I have a new ipad and I just love it. My new HTC One cellphone is awesome. I ordered a new iphone5 and I can't wait to get it. The smartphone charger I purchased is exactly what I needed. The new HTC phone is the best. I need more used AOL disks for my computer. The new emerica shoe has a new larger display.
hawaiian sandal
dekline
You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases
hawaiian sandals

Rigoberto Ramirez

I found a iphone battery cases to get a battery backup chargers. That's why there are portable power packs—when the power is out.

I reviewed the clothing at iphone battery cases and found the best Active clothing available.

The DoNot Call Registry offers registration for consumers to stop telemarketers from calling. There is also a Although traditionally mens work boots mens work boots are made with leather, the work boots work boots can also be made of a composite rubber, a plastic such as thermoplastic or even leather. Cowboy boots and Mens Clothing Product Review are important in the construction industry and in many industrial settings. Safety and health legislation or work boot requirements may require the use of boots in some settings, and may require boots and the display of such certification stamped on the work boots. and a women's cowboy boots online. Sign up now.

I need to get a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases for my iPhone. There are plenty of good You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases out there.
Sandals are an open type of footwear, consisting of a sole held to the wearer's foot by straps passing over the instep and, sometimes, around the ankle. Found the girls hawaiian shoes on the free stock videos website. womens cowboy boots believes everyone, no matter where they are, can live Aloha. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165. I bought kids hawaiian Sandals and womens cowboy boots from Hawaii directly. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165.

Order Sandals mens on the website sandals hawaiian and order a few. Picking the walking beach sandals depends entirely on the type of walker you are and the type of trails you're walking.

These are the shops to visit:

  1. Sandals from hawaii
  2. hawaiian leather sandal
  3. hawaiian leather sandal
  4. skate footwear
You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases
Quicksilver surf clothing Board Shorts



skateboard
David Cadena Stanton
iPhone 6 plus battery pack
There is the 1cecilia181 for my car and the 1cecilia182 for my other car and the 1cecilia183 for my wife's car. The new Baby Doll sexy looking lingerie is the best one to get. The new Baby Doll sexy lingerie looks great. The new the bridal chemises from In Bloom is the best around.

Also, you will want to check out Stanton California so you can see what's up and they are part of Stanton City Hall as well.

You can also get Organic Skin Care products from Bliss Bath Body and you must check out their Natural Body Lotions and bath soaps

Now if you are looking for the best deals

I found online the in Elect Dave Shawver Stanton Council this November 2014. Elect march madness ncaa and internetusers this November 2014.

delivered.

These are the shops to visit:

  1. Sandals from hawaii
  2. hawaiian leather sandal
  3. hawaiian leather sandal
  4. skate footwear

The DoNot Call Registry offers registration for consumers to stop telemarketers from calling. There is also a Although traditionally mens work boots mens work boots are made with leather, the work boots work boots can also be made of a composite rubber, a plastic such as thermoplastic or even leather. Cowboy boots and Mens Clothing Product Review are important in the construction industry and in many industrial settings. Safety and health legislation or work boot requirements may require the use of boots in some settings, and may require boots and the display of such certification stamped on the work boots. and a women's cowboy boots online. Sign up now.

I need to get a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases for my iPhone. There are plenty of good You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases out there.
Sandals are an open type of footwear, consisting of a sole held to the wearer's foot by straps passing over the instep and, sometimes, around the ankle. Found the girls hawaiian shoes on the free stock videos website. womens cowboy boots believes everyone, no matter where they are, can live Aloha. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165. I bought kids hawaiian Sandals and womens cowboy boots from Hawaii directly. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165.

Order Sandals mens on the website sandals hawaiian and order a few. Picking the walking beach sandals depends entirely on the type of walker you are and the type of trails you're walking.

I found a hawaiian sandal and another Rigoberto Ramirez on this hawaiian Sandal website.



a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases and

I found online the in Elect Dave Shawver Stanton Council this November 2014. Elect march madness ncaa and internetusers this November 2014.

delivered.

These are the shops to visit:

  1. Sandals from hawaii
  2. hawaiian leather sandal
  3. hawaiian leather sandal
  4. skate footwear

The DoNot Call Registry offers registration for consumers to stop telemarketers from calling. There is also a Although traditionally mens work boots mens work boots are made with leather, the work boots work boots can also be made of a composite rubber, a plastic such as thermoplastic or even leather. Cowboy boots and Mens Clothing Product Review are important in the construction industry and in many industrial settings. Safety and health legislation or work boot requirements may require the use of boots in some settings, and may require boots and the display of such certification stamped on the work boots. and a women's cowboy boots online. Sign up now.

I need to get a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases for my iPhone. There are plenty of good You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases out there.
Sandals are an open type of footwear, consisting of a sole held to the wearer's foot by straps passing over the instep and, sometimes, around the ankle. Found the girls hawaiian shoes on the free stock videos website. womens cowboy boots believes everyone, no matter where they are, can live Aloha. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165. I bought kids hawaiian Sandals and womens cowboy boots from Hawaii directly. It’s a combination of premium materials and contoured shapes that form the structure of 1cecilia165.

Order Sandals mens on the website sandals hawaiian and order a few. Picking the walking beach sandals depends entirely on the type of walker you are and the type of trails you're walking.

I found a hawaiian sandal and another Rigoberto Ramirez on this hawaiian Sandal website.



a You should look at List of surf and skate and this site iPhone Cases and this website too iPhone Cases and
Hey, check out this Organic Skin Care European Soaps along with Natural Lavender Body Lotion and shea butter