Chapter 14: Paint Servers: Solid Colors, Gradients, Patterns and Hatches

14.1. Introduction

This section covers Paint Servers, a method which allows the fill or stroke of an object to be defined by a resource found elsewhere. It allows resources to be reused throughout a document. See the section Painting: Filling and Stroking for a general discussion of filling and stroking objects.

SVG defines several types of paint servers:

SVG 2 Requirement: Arbitrary fills for shapes.
Resolution: SVG 2 shall support filling and stroking from arbitrary elements.
Purpose: To allow for example videos or images to be used as a fill source.
Owner: Alex? (no action)
Image of three types of paint servers.

Three types of paint servers. From left to right: A solid color ("MyLightPurple"). A linear gradient. A pattern.

Paint servers are used by including a URL reference in a fill or stroke property (i.e. fill="url(#MyLightPurple)").

properties inherit into a paint-server element from its ancestors; properties do not inherit from the element referencing the paint server element.

Paint-server elements are never rendered directly; their only usage is as something that can be referenced using the fill and stroke properties. The display value for these elements must always be set to none by the user agent style sheet, and this declaration must have importance over any other CSS rule or presentation attribute. Paint-server elements are available for referencing even when the display property on the paint-server element or any of its ancestors is set to none.

14.1.1. Using paint servers as templates

Most paint server elements accept an ‘href’ attribute, which can be used to define a compatible paint server element as a template. Attributes defined for the template element are used instead of the initial value if corresponding attributes are not specified on the current element. Furthermore, if the current element does not have any child content other than descriptive elements, than the child content of the template element is cloned to replace it.

The exclusion of descriptive content is new in SVG 2 for pattern, consistent with the behavior of gradients, and with changes to make descriptive content valid for any SVG element.

Also new: template cross-references may be to external file resources (different chapters in SVG 1.1 had inconsistent guidance on this point), and the "inheritance" of child elements is represented through a shadow tree.

Templating can be indirect to an arbitrary level (subject to security limits on external file resources, which can make a reference invalid). Thus, if the referenced template element does not have relevant child content or does not define the specified attribute, then the attribute value or cloned content is derived from another element referenced by the template's own ‘href’ attribute.

The description of each ‘href’ attribute in this chapter defines the limits of the templating process, as follows:

If any of the specified attributes are not defined on the current element, or if the current element has no child elements other than descriptive elements, the user agent must process the URL to identify the referenced resource. If the URL reference is not invalid, then the URL's target element is used as the template element, as follows:

When a paint-server element has a shadow tree, the element instances in that tree must be used in rendering the paint server effect, as if they were the paint server element's own children.

The use-element shadow tree model for templating allows cloned content to inherit different styles than the original. This behavior is newly defined in SVG 2; SVG 1.1 did not define how styles applied to inherited paint server content.

14.2. Solid colors

Solid Colors are new in SVG 2 (ported from SVG 1.2 Tiny).

SVG 2 Requirement: Support named colors.
Resolution: Will add ‘solidColor’ element to SVG 2.
Purpose: To provide an easy mechanism for creating named colors and palettes. Also useful for animation.
Owner: Tav (no action)

The 'solidcolor' element is a paint server that provides a single color with opacity. It can be referenced any place a single color can be used. The 'solidcolor' element allows a palette to be defined and used consistently throughout a document. It is also useful as away of animating a palette colors. (See CSS3 Color for a more general discussion of color [css3-color].)

In SVG 1.1, 1-stop gradients can be used to to produce a palette. This method for creating a palette fails, however, when a palette color is to be used for a gradient stop, a flood-fill, etc.

Solid colors are defined by a solidcolor element.

solidcolor
Categories:
Paint server element
Content model:
Any number of the following elements, in any order:animate, script, set, style
Attributes:
DOM Interfaces:

14.2.1. Properties

solid-color

The solid-color property specifies the color of the solidcolor. The keyword currentColor and ICC colors can be specified in the same manner as within a <paint> specification for the fill and stroke properties.

Value
currentColor | <color> <icccolor>
Initial
black
Applies to
solid-color elements
Inherited
no
Percentages
N/A
Media
visual
Animatable
yes
solid-opacity

The solid-opacity property defines the opacity of the solidcolor. The value of 'solid-opacity' is independent of the opacity used to render the paint via fill or stroke.

Value
<number> | <percentage>
Initial
1
Applies to
solid-color elements
Inherited
no
Percentages
N/A
Media
visual
Animatable
yes
<number>
The opacity of the solid-color. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) must be clamped to this range.
<percentage>
The opacity of the solid-color expressed as a percentage of the range 0 to 1.
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 300 100" >

  <title>Example solidColor</title>
  <desc>Fill objects using a solidColor paint server.</desc>

  <defs>
    <solidColor id="MyLightPurple" solid-color="#a080ff" solid-opacity="0.5"/>
  </defs>

  <!-- The shapes are filled using a solidColor paint server -->
  <circle fill="url(#MyLightPurple)" cx="50" cy="50" r="40"/>
  <rect   fill="url(#MyLightPurple)" x="110" y="10" width="80" height="80"/>
  <path   fill="url(#MyLightPurple)" d="m 250 10 l 40 80 -80 0 z"/>
</svg>
Example solidcolor.svg — fill objects using a solidcolor paint server

Example solidcolor.svg

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

14.3. Gradients

Gradients consist of smooth color transitions between points on a drawing surface. SVG provides for three types of gradients:

Once a gradient is defined, a graphics element can be filled or stroked with the gradient by setting the fill or stroke properties to reference the gradient.

Color transitions for linear and radial gradients are defined by a series of color stops along a gradient vector. A gradient normal defines how the colors in a vector are painted to the surface. For a linear gradient, a normal is a line perpendicular to the vector. For a radial gradient, a normal is a circle intersecting the vector at a right angle. Each gradient normal is painted with one color determined by the vector.

Image of linear and radial gradients with vectors and normals indicated.

Linear and radial gradients with the gradient vector indicated. The vector consists of three stops shown by small circles. One gradient normal is shown for each gradient.

For linear and radial gradients, the color value between two stops along the gradient vector is the linear interpolation, per channel, of the color for each stop, weighted by the distance from each stop.

V = C0 + ( C1 - C0 ) ( D - O0 O1 - O0 )
    $V = C0.rgba + (C1.rgba - C0.rgba) * ((D - C0.offset) / (C1.offset - C0.offset));
  

Where, for each channel:

When a graphics element references a gradient, conceptually the graphics element should take a copy of the gradient vector with gradient normals and treat it as part of its own geometry. Any transformations applied to the graphics element geometry also apply to the copied gradient vector and gradient normals. Any gradient transforms that are specified on the reference gradient are applied before any graphics element transformations are applied to the gradient.

Color transitions for mesh gradients are defined by an array of color stops. The mapping of colors to the drawing surface in this case is done by geometric data located in the stops. This is discussed in detail in the mesh gradients section.

14.3.1. Definitions

gradient element
A gradient element is one that defines a gradient paint server. This specification defines the following gradient elements: linearGradient, meshgradient and radialGradient.

14.3.2. Linear gradients

Linear gradients are defined by a linearGradient element.

linearGradient
Categories:
Gradient element, never-rendered element, paint server element
Content model:
Any number of the following elements, in any order:animate, animateTransform, script, set, stop, style
Attributes:
DOM Interfaces:

14.3.2.1. Attributes

Note that the x1,y1, x2 and y2 attributes on a linearGradient are not presentation attributes; the used value is not affected by CSS styles. The gradientTransform attribute is a presentation attribute for the transform property.

gradientUnits

Defines the coordinate system for attributes x1, y1, x2 and y2.

Value
userSpaceOnUse | objectBoundingBox
initial value
objectBoundingBox
Animatable
yes
userSpaceOnUse

If gradientUnits="userSpaceOnUse", x1, y1, x2, and 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. Percentages represent values relative to the current SVG viewport.

objectBoundingBox

If gradientUnits="objectBoundingBox", the user coordinate system for attributes x1, y1, x2 and 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. Percentages represent values relative to the bounding box for the object.

When gradientUnits="objectBoundingBox" and gradientTransform is the identity matrix, the normal of the linear gradient is 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 gradient normal which is initially perpendicular to the gradient vector within object bounding box space may render non-perpendicular relative to the gradient vector in user space. If the gradient vector is parallel to one of the axes of the bounding box, the gradient normal will remain perpendicular. This transformation is due to application of the non-uniform scaling transformation from bounding box space to local coordinate system.

gradientTransform

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 local coordinate system.

Value
<transform-list>
initial value
identity transform
Animatable
yes
x1

x1, y1, x2 and 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 and y2 can be either numbers or percentages.

Value
<length>
initial value
0%
Animatable
yes
y1

See x1.

Value
<length>
initial value
0%
Animatable
yes
x2

See x1.

Value
<length>
initial value
100%
Animatable
yes
y2

See x1.

Value
<length>
initial value
0%
Animatable
yes
spreadMethod

Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle.

Value
pad | reflect | repeat
initial value
pad
Animatable
yes
pad
Use the terminal colors of the gradient to fill the remainder of the target region.
reflect
Reflect the gradient pattern start-to-end, end-to-start, start-to-end, etc. continuously until the target rectangle is filled.
repeat
Repeat the gradient pattern start-to-end, start-to-end, start-to-end, etc. continuously until the target region is filled.
Image of the three possible values for 'spreadMethod'.

Illustration of the three possible values for spreadMethod, from left to right: pad, reflect, repeat. The gradient vector spans from 40% to 60% of the bounding box width.

href

A URL reference to a template gradient element; to be valid, the reference must be to a different linearGradient or a radialGradient element.

Refer to the process for using paint servers as templates, and to the common handling defined for URL reference attributes and deprecated XLink attributes.

The specified attributes that will be copied from the template are:

Value
URL [URL]
initial value
empty
Animatable
yes

14.3.2.2. Notes on linear gradients

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.

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

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     viewBox="0 0 300 200" >

  <title>Example lingrag01</title>
  <desc>Fill a rectangle using a linear-gradient paint server.</desc>

  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#A8F" />
      <stop offset="95%" stop-color="#FDC" />
    </linearGradient>
  </defs>

  <!-- The rectangle is filled using a linear-gradient paint server -->
  <rect fill="url(#MyGradient)"
	stroke="black"
	stroke-width="2"
	x="25" y="25" width="250" height="150"/>
</svg>
Example lingrad01 — Fill a rectangle by referencing a linear gradient paint server

Example lingrad01

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

14.3.3. Radial gradients

Radial gradients are defined by a radialGradient element.

radialGradient
Categories:
Gradient element, never-rendered element, paint server element
Content model:
Any number of the following elements, in any order:animate, animateTransform, script, set, stop, style
Attributes:
DOM Interfaces:

14.3.3.1. Attributes

Note that the cx,cy, and r attributes on a radialGradient are not presentation attributes; the used value is not affected by CSS styles. The gradientTransform attribute is a presentation attribute for the transform property.

gradientUnits = "userSpaceOnUse | objectBoundingBox"

Defines the coordinate system for attributes cx, cy, r, fx, fy, and fr.

initial value
objectBoundingBox
Animatable
yes
userSpaceOnUse

If gradientUnits="userSpaceOnUse", cx, cy, r, fx, fy, and fr 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. Percentages represent values relative to the current SVG viewport.

objectBoundingBox

If gradientUnits="objectBoundingBox", the user coordinate system for attributes cx, cy, r, fx, fy, and fr 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. Percentages represent values relative to the bounding box for the object.

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 local coordinate system.

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 local coordinate system.

initial value
identity transform
Animatable
yes
cx = "<length>"

cx, cy and r define the end circle for the radial gradient. The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this end circle.

initial value
50%
Animatable
yes
cy = "<length>"

See cx.

initial value
50%
Animatable
yes
r = "<length>"

See cx.

A negative value is an error (see Error processing).

initial value
50%
Animatable
yes
fx = "<length>"

fx, fy, and fr define the start circle for the radial gradient. The gradient will be drawn such that the 0% gradient stop is mapped to the perimeter of this start circle.

initial value
see below
Animatable
yes

If attribute fx is not specified, fx will coincide with the presentational value of cx for the element whether the value for 'cx' was inherited or not. If the element references an element that specifies a value for 'fx', then the value of 'fx' is inherited from the referenced element.

Diagram of various radial gradient attributes.

This diagram shows how the geometric attributes are defined for the case where fr is 50% of r. The small circle marks the center of the outermost circle (cx,cy), while the cross marks the center of the innermost circle (fx,fy). The dashed lines show two gradient vectors. Vectors connect corresponding points on the inner and outer most circles. The region outside the outer circle is painted with the last stop-color while the region inside the inner circle is painted with the first stop-color.

fy = "<length>"

See fx.

initial value
see below
Animatable
yes

If attribute fy is not specified, fy will coincide with the presentational value of cy for the element whether the value for 'cy' was inherited or not. If the element references an element that specifies a value for 'fy', then the value of 'fy' is inherited from the referenced element.

fr = "<length>"

New in SVG 2. Added to align with Canvas.

fr is the radius of the focal circle. See fx.

A negative value is an error (see Error processing).

initial value
0%, see below
Animatable
yes

If the attribute is not specified, the effect is as if a value of '0%' were specified. If the element references an element that specifies a value for 'fr', then the value of 'fr' is inherited from the referenced element.

SVG 2 Requirement: Allow specifying focal circle radius in radial gradients.
Resolution: Add an ‘fr’ attribute to ‘radialGradient’> for SVG 2.
Purpose: To align with Canvas. The zero-offset stop would be along the circle defined by the ‘fx’, ‘fy’ and ‘fr’ attributes.
Owner: Erik (ACTION-3098)
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.

initial value
pad
Animatable
yes
href = [URL]

A URL reference to a template gradient element; to be valid, the reference must be to a linearGradient element or a different radialGradient element.

Refer to the process for using paint servers as templates, and to the common handling defined for URL reference attributes and deprecated XLink attributes.

The specified attributes that will be copied from the template are:

Refer to the common handling defined for URL reference attributes and deprecated XLink attributes.

initial value
empty
Animatable
yes
SVG 2 Requirement: Clarify radial gradients with focal point on the circle.
Resolution: When the focal point is on the circle edge, with repeat, then the distance between the first and last stop for the repeating colors is 0 and the paint should generate a color that is the average of all the gradient stops.
Purpose: To improve interoperability of radial gradients.
Owner: Erik (ACTION-3097)
Note: SVG 1.1 does not define what to do when the focal point is on the circle edge, with 'repeat'. The distance between the first and last stop for the repeating colors is 0. It was resolved that the paint should generate a color that is the weighted average (by offset) of all the gradient stops.

14.3.3.2. Notes on radial gradients

Changed in SVG 2. SVG 1.1 required that the focal point, if outside the end circle, be moved to be on the end circle. The change was made to align with Canvas.

Allowing the focal point to lie outside the end circle was resolved at the Rigi Kaltbad working group meeting.

If the start circle defined by fx, fy and fr lies outside the end circle defined by cx, cy, and r, effectively a cone is created, touched by the two circles. Areas outside the cone stay untouched by the gradient (transparent black).

If the start circle fully overlaps with the end circle, no gradient is drawn. The area stays untouched (transparent black).

Image of a radial gradient with the focal (start circle) outside
	  the start circle.

A radial gradient with the focal (start) circle outside the end circle. The focal circle is the smaller circle on the right. The gradient has spreadMethod="reflect".

Image of two radial gradients, one with the focus just inside the circumference
    and one with the focus on the circumference.

Two radial gradients with spreadMethod="repeat". On the left, the focal point is just inside the right side of the circle defined by by cx, cy, and r. On the right, the focal point is on the circle. In this case, the area painted to the right of the circumference has a fill equal to the weighted average of the colors in the gradient vector.

The treatment of the area to the right of the gradient in the right-hand side of the above figure is different from that of Canvas where the area would be transparent black. The difference is to maintain compatibility with SVG 1.1.

The color space for the weighted average is the same as in which the gradient is interpolated. See Rigi Kaltbad working group meeting.

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

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 300 200" >
  <title>Example radgrad01</title>
  <desc>Fill a rectangle by referencing a radial gradient paint server.</desc>

  <defs>
    <radialGradient id="MyGradient"
		    gradientUnits="userSpaceOnUse"
		    cx="150" cy="100"
		    r="100">
      <stop offset="0%"   stop-color="#A8F" />
      <stop offset="50%"  stop-color="#FDC" />
      <stop offset="100%" stop-color="#A8F" />
    </radialGradient>
  </defs>

  <!-- The rectangle is filled using a radial gradient paint server -->
  <rect fill="url(#MyGradient)"
	stroke="black"
	stroke-width="2"
	x="25" y="25" width="250" height="150"/>
</svg>
Example radgrad01 — Fill a rectangle by referencing a radial gradient paint server

Example radgrad01

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

14.3.4. Mesh gradients

Mesh gradients are defined by a meshgradient element.

SVG 2 Requirement: Support photorealistic gradients.
Resolution: Mesh gradients are accepted by the WG for SVG 2.
Purpose: To allow more complex gradients such as those found in nature.
Owner: Tav (ACTION-3121)

Resolution: Rename stop-path to 'd' or 'path' (Coons patch syntax).

Seattle 2011 F2F day 3

Resolution: We will allow just C/c/L/l in mesh path data. We will leave out tensor control points. We will not allow multiple colors at mesh intersections, just use zero size patches instead.

Boston 2011 F2F

Resolution: We will have a type="smooth-bicubic" or similar on <mesh>. (Note: In the resolution, the attribute is incorrectly placed on <patch>; see the minutes.)

Sydney 2015 F2F

New in SVG 2. Added to allow complex shadings. This is needed, for example, in creating life-like drawings or in interpolating data points on a two-dimensional grid.

The mesh gradients in SVG are based on an array of Coons Patches. A Coons Patch is a shading defined by colors place at the corners of an area enclosed by four Bézier curves. The interpolation of the corner colors into the patch can either be bilinear or bicubic.

Image of single mesh patch.

A single Coons-Mesh patch.

A Coons Patch is equivalent to a bi-cubic Ferguson patch where the distance between a cubic Bézier end point and its nearest control point is one-third the length of the corresponding Ferguson tangent line.

14.3.4.1. Mesh Structure

A mesh gradient consists of patches placed in an array. There are two reasons for using an array. The first is that an array of meshes is a natural result for most content creation processes (start with a path and then subdivide its area into rows and columns of patches). The second is that the data can be compacted by sharing sides and corners. The array structure is conceptual only. The actual mesh can be distorted in any way possible. The mesh gradient syntax is designed so that it is easy to simulate other types of gradients such as conical gradients or triangle meshes as shown in the examples below.

The structure of a mesh gradient:

<mesh x="100" y="100">
  <meshrow>
    <meshpatch>
      <stop .../>
        Up to four stops in first patch. See details below.
    </meshpatch>
    <meshpatch>
      Any number of meshpatches in row.
    </meshpatch>
  </meshrow>
  <meshrow>
    Any number of meshrows, each with the same number of meshpatches as in the first row.
  </meshrow>
</mesh>

The first meshpatch in the first meshrow contains four stop elements. These elements correspond conceptually, in order, to the top, right, bottom, and left edges of the first patch. The following patches in the first row contains three stop elements, corresponding to the top, right, and bottom edges of the patch. The left edge of one of these patches is taken from the (reversed) right edge of the previous patch. The first patch of following rows contains three stop elements, corresponding to the right, bottom, and left edges. The top edge is taken from the (reversed) bottom edge of the first patch in the row above. The remaining patches contain two stop elements, corresponding to the right and bottom edges of the patch. The top edge is taken from the patch directly above in the array of patches while the left edge is taken from the previous patch in the same row.

Each stop element contains a path attribute which consists of a single 'c', 'C', 'l', or 'L' path command. The initial point for the path command is taken from the last point of the previous edge of the patch (which for the first stop in a patch is defined in the patch to the left or top), except for the first patch in the first row where the initial point is given by the x and y attributes in the meshgradient element. The path command in the last stop element of a meshpatch has one less point than normal as this "missing" point necessary to close the path is already defined.

For each stop element there is a color and opacity that correspond to the patch corner at the initial point of the stop's edge. This color and opacity are defined inside the stop by the stop-color and stop-opacity properties except for the first stop in all patches other than the first patch in the first row where the stop color and opacity are already defined by a previous patch.

Here is an annotated example of a two by two mesh gradient:

<meshgradient x="50" y="50" id="example"> <!-- x, y used for initial point in first patch. -->
  <meshrow> <!-- No attributes, used only to define begin/end of row. -->
	<meshpatch>
	  <stop path="c  25,-25  75, 25  100,0" stop-color="lightblue" />
	  <stop path="c  25, 25 -25, 75  0,100" stop-color="purple" />
	  <stop path="c -25, 25 -75,-25 -100,0" stop-color="red" />
	  <stop path="c -25,-25, 25,-75"        stop-color="purple" /> <!-- Last point not needed (closed path). -->
	</meshpatch>
	<meshpatch>
	  <stop path="c  25,-25  75, 25  100,0" /> <!-- stop-color from previous patch. -->
	  <stop path="c  25, 25 -25, 75  0,100" stop-color="lightblue" />
	  <stop path="c -25, 25 -75,-25"        stop-color="purple" /> <!-- Last point not needed (closed path). -->
	  <!-- Last path (left side) taken from right side of previous path (with points reversed). -->
	</meshpatch>
  </meshrow>
  <meshrow> <!-- New row. -->
	<meshpatch>
	  <!-- First path (top side) taken from bottom path of patch above. -->
	  <stop path="c  25, 25 -25, 75  0,100" /> <!-- stop-color from patch above. -->
	  <stop path="c -25, 25 -75,-25 -100,0" stop-color="purple" />
	  <stop path="c -25,-25, 25,-75"        stop-color="lightblue" /> <!-- Last point not needed (closed path). -->
	</meshpatch>
	<meshpatch>
	  <!-- First path (top side) taken from bottom path of patch above (with points reversed). -->
	  <stop path="c  25, 25 -25, 75  0,100" /> <!-- stop-color from patch above. -->
	  <stop path="c -25, 25 -75,-25"        stop-color="lightblue" /> <!-- Last point not needed (closed path). -->
	  <!-- Last path (left side) taken from right side of previous path (with points reversed). -->
	</meshpatch>
  </meshrow>
</meshgradient>
  

The above mesh gradient is rendered as:

Rendering of a two by two mesh.

The rendering for the above two by two mesh example. The overlaid paths show the order in which the patch edges are defined.

Coons patch meshes can simulate other types of gradients. Here is an example of a conic gradient:

Rendering of a one by four mesh where each mesh covers
          a conic section.

The rendering for a one row, four patch mesh that simulates a conic gradient. The bottom edge of each patch is of zero length.

14.3.4.2. Painting a Mesh Patch

The corner colors are mapped to the patch area with a two step process. First the colors are placed at the corners of a unit square and the area inside the square is then colored using either bilinear interpolation or bicubic interpolation. Second, the points inside the square are mapped to points inside the patch using the following formula:

S = S C + S D S B
    $S = S_C + S_D - S_B$
  

where

S C ( u , v ) = ( 1 v ) × C 1 ( u ) + v × C 2 ( u ) , S D ( u , v ) = ( 1 u ) × D 1 ( v ) + u × D 2 ( v ) , S B ( u , v ) = ( 1 v ) × [ ( 1 u ) × C 1 ( 0 ) + u × C 1 ( 1 ) ] + v × [ ( 1 u ) × C 2 ( 0 ) + u × C 2 ( 1 ) ] .
    $$
    \begin{align}
    S_C(u,v) &= (1-v)×C_1(u) + v×C_2(u),\\
    S_D(u,v) &= (1-u)×D_1(v) + u×D_2(v),\\
    S_B(u,v) &= (1-v)×[(1-u)×C_1(0) + u×C_1(1)]\\
    &\qquad {}+  v×[(1-u)×C_2(0) + u×C_2(1)].
    \end{align}
    $$
  

C1 , C2 , D1 , and D2 are the curves at the top, bottom, left, and right of the patch, respectively; u and v are the coordinates inside the unit square. The subtraction term ensures that the boundary conditions are met.

Come up with better explanation of the mapping with diagram.

One method of rendering a patch is to "divide and conquer." Check if the four corner colors of the patch are the same within a specified tolerance. If so, paint the patch with the average color using the normal path filling routine. If not, divide the patch into four smaller patches and repeat the color tolerance check. Repeat the process as many times as necessary.

Another way to render a patch is to first divide the patch vertically or horizontally into a series of smaller patches that are each less than one pixel high or wide. Then each resulting patch can be rendered as a path.

Bilinear interpolation of the corner colors depends only on the values of the corner colors. The color profile along two opposite edges is first computed and then corresponding points along those edges are interpolated to fill in the interior. The color profile across a patch boundary may not be smooth, leading to an optical phenomena known as Mach banding.

Bicubic interpolation requires knowing not only the value of the corner colors but also their derivatives. The derivatives are chosen to ensure a smooth transition across patch boundaries and that there are no color value minima or maxima in the patch interior (i.e. a monotone cubic interpolation). Only the derivatives in x and y (where the x and y are the directions along the rows and columns of the conceptual mesh grid) are used (the cross derivatives are set to zero).

To calculate the derivatives: Let ck be the color value at the point pk, where k=0, ... ,n.

  1. First compute the secant lines:
    Δ k = c k + 1 c k p k + 1 p k
    	\Delta_k = {{c_{k+1}-c_k}\over{\lvert p_{k+1}-p_k\rvert}}
          
    If pk = pk+1 , set Δ k = 0 .
  2. The provisional derivative at pk is then
    δ k = Δ k 1 + Δ k 2
    	$ \delta_k = {\Delta_{k-1} + \Delta_k\over 2}  $
          
    for k=1, ... , n1. The derivatives for k=0 and k=n are calculated later (see below).
  3. If Δ k 1 and Δ k are of opposite sign then set δ k = 0 . (This is a local minima or maxima.) Skip the remaining steps.
  4. If δ k > 3 × Δ k 1 then set δ k = 3 × Δ k 1 . This step and the following step ensure that the interpolation is monotonic.
  5. If δ k > 3 × Δ k then set δ k = 3 × Δ k .
  6. Find the end point derivatives: If n>2 then:
    δ 0 = 2 × Δ 0 δ 1
    	$ \delta_1 = 2\times\Delta_1 - \delta_2  $
          
    δ n = 2 × Δ n 1 δ n 1
    	$ \delta_n = 2\times\Delta_{n-1} - \delta_{n-1}  $
          
    else δ 1 = δ n = Δ 0 .

The typical method for dealing with the start or end of a bicubic interpolation is to add an extra point before and an extra point after the given points. The value of the point before (after) is assigned either the value of the first (last) point or a value so that the secant before (after) is the same as the secant after (before) the first (last) point. The method described here does not rely on the addition of points but instead fits a quadratic curve to the color values and the already determined derivative at the other edge of the patch. This produces an interpolation that does not have an inflection point inside the patch.

Bicubic interpolation will produce smooth patch boundaries when a mesh is laid out on a rectangular grid and where the patch edges are linear. If the grid is distorted or the patch edges are not lines (i.e. they are Bézier curves), it is still possible to produce non-smooth transitions across patch boundaries.

Mesh gradients are defined by a meshgradient element.

Note that in case-sensitive contexts (XML parsing and scripting), the name of the element is all lowercase, unlike the older elements linearGradient and radialGradient.

The capitalization of meshgradient posed a conflict of priorities. While inconsistency with the older elements is unfortunate, mixed-case names require special treatment in HTML contexts. Feedback from implementers and authors on the practicality of mixed-case versus all-lowercase names is welcomed during the implementation period.

meshgradient
Categories:
Gradient element, never-rendered element, paint server element
Content model:
Any number of the following elements, in any order:animate, animateTransform, meshrow, script, set
Attributes:
DOM Interfaces:

14.3.4.3. Attributes

Note that the x and y attributes on a meshgradient are not presentation attributes; the used value is not affected by CSS styles. The transform attribute is a presentation attribute.

gradientUnits

Defines the coordinate system for attributes x and y.

Value
userSpaceOnUse | objectBoundingBox
initial value
objectBoundingBox
Animatable
yes
userSpaceOnUse

If gradientUnits="userSpaceOnUse", x and y 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) or when the mesh is rendered on its own (i.e. not as a paint server) and then applying the transform specified by attribute transform. Percentages represent values relative to the current SVG viewport.

objectBoundingBox

Path data to be interpreted as fraction of bounding box (between 0 and 1) agreed to during the 16 July 2015 Weekly Teleconference.

If gradientUnits="objectBoundingBox", the user coordinate system for attributes x and y, and for mesh path data 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 transform. For the x and y attributes, percentages represent values relative to the bounding box for the object. For mesh path data, coordinates represent fractions of the bounding box.

When a mesh is rendered on its own (i.e., not as a paint server) the current SVG viewport is used in place of the bounding box.

transform

Contains the definition of an optional additional transformation from the mesh coordinate system onto the target coordinate system (i.e., 'userSpaceOnUse'). 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.

Value
<transform-list>
initial value
identity transform
Animatable
yes
x

x and y define the starting point of the mesh grid.

Value
<length>
initial value
0%
Animatable
yes
y

See x.

Value
<length>
initial value
0%
Animatable
yes
href

A URL reference to a template element, which must be a different meshgradient element to be valid.

Refer to the process for using paint servers as templates, and to the common handling defined for URL reference attributes and deprecated XLink attributes.

The specified attributes that will be copied from the template are:

Value
URL [URL]
initial value
empty
Animatable
yes
type

Determines the type of interpolation to use when painting a patch.

Value
bilinear | bicubic
initial value
bilinear
Animatable
no

Mesh rows are defined by a meshrow element.

meshrow
Categories:
None
Content model:
Any number of the following elements, in any order:meshpatch, script, style
Attributes:
DOM Interfaces:

Mesh patches are defined by a meshpatch element.

meshpatch
Categories:
None
Content model:
Any number of descriptive elements, script and from two to four stop elements.
Attributes:
DOM Interfaces:

14.3.5. Gradient stops

The vector (linear and radial gradients) or array (mesh gradients) of colors to use in a gradient is defined by the stop elements that are child elements to a linearGradient, radialGradient, or meshpatch element.

In SVG 1.1, the above read: "The ramp of colors..." but "ramp" is used nowhere else in this section.

stop
Categories:
None
Content model:
Any number of the following elements, in any order:
    animate, script, set, style
    Attributes:
    DOM Interfaces:

    14.3.5.1. Attributes

    offset

    Indicates were the gradient stop is placed. For linear gradients, the offset attribute represents a location along the gradient vector. For radial gradients, it represents a fractional distance from the edge of the innermost/smallest circle to the edge of the outermost/largest circle. This attribute does not apply to mesh gradients.

    Value
    <number> | <percentage>
    initial value
    0
    Animatable
    yes
    <number>
    A number usually ranging from 0 to 1.
    <percentage>
    A percentage usually ranging from 0% to 100%.
    path

    Gives the path for one side of a mesh gradient patch. This attribute applies only to mesh gradients.

    Value
    mesh path data
    initial value
    see notes below
    Animatable
    yes

    Mesh path data consists of a single 'l', 'L', 'c', or 'C' path command (as defined for the d property). See the mesh section above for how the path data is interpreted.

    14.3.5.2. Properties

    stop-color

    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.

    With respect to gradients, SVG treats the 'transparent' keyword differently than CSS. SVG does not calculate gradients in pre-multiplied space, so 'transparent' really means transparent black. Specifying a stop-color with the value 'transparent' is equivalent to specifying a stop-color with the value 'black' and a stop-opacity with the value '0'.

    Value
    currentColor | <color> <icccolor>
    Initial
    black
    Applies to
    stop elements
    Inherited
    no
    Percentages
    N/A
    Media
    visual
    Animatable
    yes
    stop-opacity

    The stop-opacity property defines the opacity of a given gradient stop. The opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color. For stop-color value types of that don't include explicit opacity information, the opacity of that component must be treated as 1.

    Value
    <number> | <percentage>
    Initial
    1
    Applies to
    stop elements
    Inherited
    no
    Percentages
    N/A
    Media
    visual
    Animatable
    yes
    <number>
    The opacity of the stop-color. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) must be clamped to this range.
    <percentage>
    The opacity of the stop-color expressed as a percentage of the range 0 to 1.

    14.3.5.3. Notes on gradient stops

    14.4. 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 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 (xy) and its bottom/right at (x + widthy + 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*widthy + n* height) for each possible integer value for m and n.

    pattern
    Categories:
    Container element, never-rendered element, paint server element
    Content model:
    Any number of the following elements, in any order:a, audio, canvas, clipPath, cursor, filter, foreignObject, iframe, image, marker, mask, script, style, switch, text, video, view
    Attributes:
    DOM Interfaces:

    14.4.1. Attributes

    Note that the x,y, width and height attributes on a pattern are not presentation attributes; the used value is not affected by CSS styles. The patternTransform attribute is a presentation attribute for the transform property.

    patternUnits

    Defines the coordinate system for attributes x, y, width and height.

    Value
    userSpaceOnUse | objectBoundingBox
    initial value
    objectBoundingBox
    Animatable
    yes
    userSpaceOnUse

    If patternUnits="userSpaceOnUse", x, y, width and 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. Percentages represent values relative to the current SVG viewport.

    objectBoundingBox

    If patternUnits="objectBoundingBox", the user coordinate system for attributes x, y, width and 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. Percentages represent values relative to the bounding box for the object.

    patternContentUnits

    Defines the coordinate system for the contents of the pattern. Note that this attribute has no effect if attribute viewBox is specified.

    Value
    userSpaceOnUse | objectBoundingBox
    initial value
    userSpaceOnUse
    Animatable
    yes
    userSpaceOnUse

    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.

    objectBoundingBox

    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.

    patternTransform

    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 local coordinate system.

    Value
    <transform-list>
    initial value
    identity transform
    Animatable
    yes
    x

    x, y, width and 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.

    Value
    <length>
    initial value
    0
    Animatable
    yes
    y

    See x.

    Value
    <length>
    initial value
    0
    Animatable
    yes
    width

    See x.

    Value
    <length>
    initial value
    0
    Animatable
    yes

    A negative value is an error (see Error processing). A value of zero disables rendering of the element (i.e., no paint is applied).

    height

    See x.

    Value
    <length>
    initial value
    0
    Animatable
    yes

    A negative value is an error (see Error processing). A value of zero disables rendering of the element (i.e., no paint is applied).

    href

    A URL reference to a template element, which must be a different pattern element to be valid.

    Refer to the process for using paint servers as templates, and to the common handling defined for URL reference attributes and deprecated XLink attributes.

    The specified attributes that will be copied from the template are:

    Value
    URL [URL]
    initial value
    empty
    Animatable
    yes

    14.4.2. Notes on patterns

    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.

    Note that if the overflow property is set to to visible the rendering behavior for the pattern outside the bounds of the pattern is currently undefined. A future version of SVG may require the overflow to be shown. SVG implementers are encouraged to render the overflow as this is the behavior expected by authors. If overflow is rendered, the pattern tiles should be rendered left to right in rows and the rows from top to bottom.

    See GitHub Issue 129

    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 (xy), 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.

    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 slightly 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.

    <?xml version="1.0" standalone="no"?>
    <svg xmlns="http://www.w3.org/2000/svg"
         version="1.1"
         viewBox="0 0 300 200" >
    
      <title>Example pattern01</title>
      <desc>Fill an ellipse using a pattern paint server.</desc>
    
      <defs>
        <pattern id="TrianglePattern"
    	     patternUnits="userSpaceOnUse"
                 x="0" y="0" width="50" height="50"
                 viewBox="0 0 10 10" >
          <path d="M 0 0 L 7 0 L 3.5 7 z"
    	    fill="plum"
    	    stroke="blue" />
        </pattern> 
      </defs>
    
      <!-- The ellipse is filled using a triangle pattern paint server -->
      <ellipse fill="url(#TrianglePattern)"
    	   stroke="black"
    	   stroke-width="2"
               cx="150" cy="100" rx="125" ry="75" />
    </svg>
    Example pattern01 — fill a rectangle by referencing a pattern paint server

    Example pattern01

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

    14.5. Hatches

    Hatches are new in SVG 2. They were added to allow the kinds of patterns required for mapping, engraving, etc. where continuous lines are needed.

    SVG 2 Requirement: Support hatches.
    Resolution: SVG 2 should support hatchings without the artifacts that patterns currently impose.
    Purpose: To allow the kinds of patterns required for mapping, engraving, etc. where continuous lines are required.
    Owner: Tav (no action)
    Status: Done

    A hatch is used to fill or stroke an object using one or more pre-defined paths that are repeated at fixed intervals in a specified direction to cover the areas to be painted. Hatches are defined using a hatch 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 hatch. Paths are defined by hatchpath elements.

    Attributes x, y, pitch, rotate, and hatchUnits define an infinitely long reference strip on the infinite canvas. The strip has one edge at (xy) and its other edge at a distance of pitch in the direction defined by rotate. This one-dimension tiling theoretically extends a series of such strips in the direction of 'rotate' to infinity (positive and negative), with strips starting at (x + m*pitch*cos(rotate), y + m*pitch*sin(rotate) for each possible integer value of m.

    A diagram showing the layout of a series of strips.

    Three adjacent strips separated by dashed lines showing their relationship to each other for a given pitch and rotate. The reference line determines the origin of hatchpaths.

    hatch
    Categories:
    Never-rendered element, paint server element
    Content model:
    Any number of the following elements, in any order:hatchpath, script, style
    Attributes:
    DOM Interfaces:

    14.5.1. Attributes

    Note that the x and y attributes on a hatch are not presentation attributes; the used value is not affected by CSS styles. The transform attribute is a presentation attribute.

    hatchUnits

    Defines the coordinate system for attributes x, y, pitch and rotate.

    Value
    userSpaceOnUse | objectBoundingBox
    initial value
    objectBoundingBox
    Animatable
    yes
    userSpaceOnUse

    If hatchUnits="userSpaceOnUse", x, y, pitch, and rotate represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the hatch element is referenced (i.e., the user coordinate system for the element referencing the hatch element via a fill or stroke property) and then applying the transform specified by attribute transform. Percentages represent values relative to the current SVG viewport.

    objectBoundingBox

    If hatchUnits="objectBoundingBox", the user coordinate system for attributes x, y, pitch, and rotate is established using the bounding box of the element to which the hatch is applied (see Object bounding box units) and then applying the transform specified by attribute transform. Percentages represent values relative to the bounding box for the object.

    hatchContentUnits

    Defines the coordinate system for the contents of the hatch.

    Value
    userSpaceOnUse | objectBoundingBox
    initial value
    userSpaceOnUse
    Animatable
    yes
    userSpaceOnUse

    If hatchContentUnits="userSpaceOnUse", the user coordinate system for the contents of the hatch element is the coordinate system that results from taking the current user coordinate system in place at the time when the hatch element is referenced (i.e., the user coordinate system for the element referencing the hatch element via a fill or stroke property) and then applying the transform specified by attribute transform.

    objectBoundingBox

    If hatchContentUnits="objectBoundingBox", the user coordinate system for the contents of the hatch element is established using the bounding box of the element to which the hatch is applied (see Object bounding box units) and then applying the transform specified by attribute transform.

    transform

    Contains the definition of an optional additional transformation from the hatch coordinate system onto the target coordinate system (i.e., 'userSpaceOnUse' or 'objectBoundingBox'). This allows for things such as skewing the hatch strips. 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 local coordinate system.

    Value
    <transform-list>
    initial value
    identity transform
    Animatable
    yes
    x

    x, y, pitch and rotate indicate how the hatch strips are placed and spaced. These attributes represent coordinates and values in the coordinate space specified by the combination of attributes hatchUnits and transform.

    Value
    <length>
    initial value
    0
    Animatable
    yes
    y

    See x.

    Value
    <length>
    initial value
    0
    Animatable
    yes
    pitch

    See x.

    Value
    <length>
    initial value
    0
    Animatable
    yes

    A negative value is an error (see Error processing). A value of zero disables rendering of the element (i.e., no paint is applied).

    rotate

    See x.

    Value
    <angle>
    initial value
    0
    Animatable
    yes

    Changed name from 'angle' to 'rotate' at Tokyo F2F.

    href

    A URL reference to a template element, which must be a different hatch element to be valid.

    Refer to the process for using paint servers as templates, and to the common handling defined for URL reference attributes and deprecated XLink attributes.

    The specified attributes that will be copied from the template are:

    Value
    URL [URL]
    initial value
    empty
    Animatable
    yes

    14.5.2. Notes on hatches

    SVG's user agent style sheet sets the overflow property for hatch elements to hidden, which causes an infinite strip clipping path to be created at the bounds of the hatch strip. Unless the overflow property is overridden, any graphics within the hatch which goes outside of the hatch strip will be clipped. Note that if the overflow property is set to visible the area outside must be rendered (NB this is different from a pattern element). Strips with higher x (larger m) values must be rendered after strips with lower x (lower m) values.

    The contents of the hatch are relative to a new coordinate system. The new coordinate system has its origin at (xy), where x is established by the x attribute on the hatch element, and y is established by the y attribute on the hatch element. The coordinate system is rotated around the origin by the angle given by the rotate attribute.

    The viewBox and preserveAspectRatio attributes are not useful and have been removed (as compared to the pattern element).

    Event listeners attached to the contents of a hatch element are not processed; only the rendering aspects of hatch elements are processed.

    The following illustrates a very simple hatch fill:

    <hatch hatchUnits="userSpaceOnUse" pitch="5" rotate="135">
      <hatchpath stroke="#a080ff" stroke-width="2"/>
    </hatch>
    

    14.5.3. Hatch paths

    Hatch paths are defined by a hatchpath element.

    hatchpath
    Categories:
    None
    Content model:
    Any number of the following elements, in any order:script, style
    Attributes:
    DOM Interfaces:

    14.5.3.1. Attributes

    d

    Defines a single path in the hatch.

    Note that the d attribute is not a presentation attribute for the d property.

    Value
    Path data
    initial value
    An infinite line, see below
    Animatable
    yes
    offset

    Defines the point along the reference line where a path begins.

    Value
    <length>
    initial value
    0
    Animatable
    yes

    14.5.3.2. Notes on hatch paths

    Hatch paths are defined with the same Path data used in the d property. The path is defined relative to the origin of each strip translated in the x direction by the offset (the y direction is aligned along the infinite axis of the strip).

    A diagram showing the coordinate system for the 'd' attribute.

    The coordinate system for path data relative to a strip.

    If a d attribute is not provided, the path defaults to an infinitely long line aligned with the y-axis of the reference strip and passing through a point offset distance in the x direction from the strip origin (see above).

    If a d attribute is given, the hatch path is constructed by repeating the d data, each time with an offset along the y-axis determined by the y value of the last path data point. (The offset must be positive, a negative or zero offset value results in the hatch path not being rendered.) A hatch path need not start with a "moveto" path instruction. If missing, the first path instruction uses for its current point a value of (x,0) where x is the x value of the last data point given in the path. If the first path command is not a "moveto" and the last not a "closepath", the last point of each repeating section is joined to the first point of the next repeating section with the current value of stroke-linejoin.

    A hatch path can have any of the stroke style properties applied to it, however only solid color paint servers are allowed for the stroke property.

    Limiting 'stroke' to solid paint servers was resolved at the Tokyo F2F.

    <hatch  hatchUnits="userSpaceOnUse" pitch="6" overflow="visible">
        <hatchpath stroke-width="1" d="C 0,4 8,6 8,10 8,14 0,16 0,20"/>
    </hatch>
    A hatch example with squiggly lines filling a rectangle.

    A hatch fill with a continuous squiggly hatchpath.

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

    <hatch  hatchUnits="userSpaceOnUse" pitch="20">
        <hatchpath stroke="#a080ff" stroke-width="2" d="L 0,0 10,50"/>
    </hatch>
    A hatch example with a zigzag line.

    A hatch fill with a zigzag hatchpath. The d path data describes two line segments, the first starting at (10, 0). The repeating sections are joined.

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

    <hatch  hatchUnits="userSpaceOnUse" pitch="20">
        <hatchpath stroke="#a080ff" stroke-width="2" d="M 0,0 10,50"/>
    </hatch>
    A hatch example with diagonal lines segments filling a rectangle.

    A hatch fill with diagonal line segments. The repeating sections are not joined.

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

    <hatch  hatchUnits="userSpaceOnUse" pitch="20">
        <hatchpath stroke="#a080ff" stroke-width="2"/>
        <hatchpath stroke="#a080ff" stroke-width="2" offset="5" stroke-dasharray="10 4 2 4"/>
    </hatch>
    A hatch example with two alternating lines, one dashed.

    A hatch fill with two hatchpaths, one dashed.

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

    14.6. DOM interfaces

    14.6.1. Interface SVGSolidcolorElement

    An SVGSolidcolorElement object represents an solidcolor element in the DOM.

    [Exposed=Window]
    interface SVGSolidcolorElement : SVGElement {
    };

    14.6.2. Interface SVGGradientElement

    The SVGGradientElement interface is used as a base interface for gradient paint server element interfaces.

    [Exposed=Window]
    interface SVGGradientElement : SVGElement {
    
      // 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;
    
      [SameObject] readonly attribute SVGAnimatedEnumeration gradientUnits;
      [SameObject] readonly attribute SVGAnimatedTransformList gradientTransform;
      [SameObject] readonly attribute SVGAnimatedEnumeration spreadMethod;
    };
    
    SVGGradientElement includes SVGURIReference;
    

    The numeric spread method type constants defined on SVGGradientElement are used to represent the keyword values that the ‘spreadMethod’ attribute can take. Their meanings are as follows:

    ConstantMeaning
    SVG_SPREADMETHOD_PADThe pad keyword.
    SVG_SPREADMETHOD_REFLECTThe reflect keyword.
    SVG_SPREADMETHOD_REPEATThe repeat keyword.
    SVG_SPREADMETHOD_UNKNOWNSome other value.

    The gradientUnits IDL attribute reflects the ‘gradientUnits’ content attribute. The numeric type values for ‘gradientUnits’ attributes on gradient elements are as follows:

    ValueNumeric type value
    userSpaceOnUse SVG_UNIT_TYPE_USERSPACEONUSE
    objectBoundingBox SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

    The gradientTransform IDL attribute reflects the computed value of the transform property and either the ‘transform’ presentation attribute, for meshgradient elements, or the 'gradientTransform' presentation attribute for linearGradient and radialGradient elements.

    The spreadMethod IDL attribute reflects the ‘spreadMethod’ content attribute. The numeric type values for ‘spreadMethod’ attributes on gradient elements are as described above in the numeric spread type constant table.

    14.6.3. Interface SVGLinearGradientElement

    An SVGLinearGradientElement object represents an linearGradient in the DOM.

    [Exposed=Window]
    interface SVGLinearGradientElement : SVGGradientElement {
      [SameObject] readonly attribute SVGAnimatedLength x1;
      [SameObject] readonly attribute SVGAnimatedLength y1;
      [SameObject] readonly attribute SVGAnimatedLength x2;
      [SameObject] readonly attribute SVGAnimatedLength y2;
    };

    The x1, y1, x2 and y2 IDL attributes reflect the x1, y1, x2 and y2 content attributes, respectively

    14.6.4. Interface SVGRadialGradientElement

    An SVGRadialGradientElement object represents an radialGradient in the DOM.

    [Exposed=Window]
    interface SVGRadialGradientElement : SVGGradientElement {
      [SameObject] readonly attribute SVGAnimatedLength cx;
      [SameObject] readonly attribute SVGAnimatedLength cy;
      [SameObject] readonly attribute SVGAnimatedLength r;
      [SameObject] readonly attribute SVGAnimatedLength fx;
      [SameObject] readonly attribute SVGAnimatedLength fy;
      [SameObject] readonly attribute SVGAnimatedLength fr;
    };

    The cx, cy, r, fx, fy and fr IDL attributes reflect the cx, cy, r, fx, fy and fr content attributes, respectively

    14.6.5. Interface SVGMeshGradientElement

    The SVGMeshGradientElement interface corresponds to the mesh element.
    [Exposed=Window]
    interface SVGMeshGradientElement : SVGGradientElement {
    };

    Note that the SVGMeshGradientElement does not have any reflecting IDL attributes for its x, y, ‘transform’, href and type attributes.

    14.6.6. Interface SVGMeshrowElement

    An SVGMeshrowElement object represents a meshrow element in the DOM.

    [Exposed=Window]
    interface SVGMeshrowElement : SVGElement {
    };

    14.6.7. Interface SVGMeshpatchElement

    An SVGMeshpatchElement object represents a meshpatch element in the DOM.

    [Exposed=Window]
    interface SVGMeshpatchElement : SVGElement {
    };

    14.6.8. Interface SVGStopElement

    An SVGStopElement object represents a stop element in the DOM.

    [Exposed=Window]
    interface SVGStopElement : SVGElement {
      [SameObject] readonly attribute SVGAnimatedNumber offset;
    };

    The offset IDL attribute reflects the offset content attribute.

    Note that SVGStopElement does not have a reflecting IDL attribute for its path attribute.

    14.6.9. Interface SVGPatternElement

    An SVGPatternElement object represents a pattern element in the DOM.

    [Exposed=Window]
    interface SVGPatternElement : SVGElement {
      [SameObject] readonly attribute SVGAnimatedEnumeration patternUnits;
      [SameObject] readonly attribute SVGAnimatedEnumeration patternContentUnits;
      [SameObject] readonly attribute SVGAnimatedTransformList patternTransform;
      [SameObject] readonly attribute SVGAnimatedLength x;
      [SameObject] readonly attribute SVGAnimatedLength y;
      [SameObject] readonly attribute SVGAnimatedLength width;
      [SameObject] readonly attribute SVGAnimatedLength height;
    };
    
    SVGPatternElement includes SVGFitToViewBox;
    SVGPatternElement includes SVGURIReference;
    

    The patternUnits and patternContentUnits IDL attributes reflect the patternUnits and patternContentUnits content attributes, respectively. The numeric type values for patternUnits and patternContentUnits are as follows:

    ValueNumeric type value
    userSpaceOnUse SVG_UNIT_TYPE_USERSPACEONUSE
    objectBoundingBox SVG_UNIT_TYPE_OBJECTBOUNDINGBOX

    The patternTransform IDL attribute reflects the computed value of the transform property and the ‘patternTransform’ presentation attribute.

    The x, y, width and height IDL attributes reflect the x, y, width and height content attributes, respectively.

    14.6.10. Interface SVGHatchElement

    [Exposed=Window]
    interface SVGHatchElement : SVGElement {
    };

    Note that SVGHatchElement does not have any reflecting IDL attributes for its x, y, pitch, rotate, hatchUnits, hatchContentUnits, ‘transform’ or href attributes.

    14.6.11. Interface SVGHatchpathElement

    [Exposed=Window]
    interface SVGHatchpathElement : SVGElement {
    };

    Note that SVGHatchpathElement does not have any reflecting IDL attributes for its d or offset attributes.