--- a/master/definitions.xml Mon Nov 14 15:20:05 2011 +0100
+++ b/master/definitions.xml Mon Nov 14 15:24:41 2011 +0100
@@ -716,6 +716,44 @@
</element>
<element
+ name='meshGradient'
+ href='pservers.html#MeshGradientElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ elements='animate, animateTransform, set, meshRow'
+ attributecategories='core, presentation, style, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGMeshGradientElement'>
+ <attribute name='x' href='pservers.html#MeshGradientElementCXAttribute' animatable='yes'/>
+ <attribute name='y' href='pservers.html#MeshGradientElementCYAttribute' animatable='yes'/>
+ <attribute name='gradientUnits' href='pservers.html#MeshGradientElementGradientUnitsAttribute' animatable='yes'/>
+ <attribute name='gradientTransform' href='pservers.html#MeshGradientElementGradientTransformAttribute' animatable='yes'/>
+ <attribute name='xlink:href' href='pservers.html#MeshGradientElementHrefAttribute' animatable='yes'/>
+ </element>
+
+ <element
+ name='meshPatch'
+ href='pservers.html#MeshPatchElement'
+ elementcategories='descriptive'
+ elements='stop'
+ attributecategories='core, presentation, style, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGMeshPatchElement'>
+ <x:contentmodel xmlns='http://www.w3.org/1999/xhtml'>Any number of <a>descriptive elements</a> and from one to four <a>'stop'</a> elements, in any order.</x:contentmodel>
+ </element>
+
+ <element
+ name='meshRow'
+ href='pservers.html#MeshRowElement'
+ contentmodel='anyof'
+ elementcategories='descriptive'
+ elements='meshPatch'
+ attributecategories='core, presentation, style, xlink'
+ attributes='externalResourcesRequired'
+ interfaces='SVGMeshRowElement'>
+ </element>
+
+ <element
name='metadata'
href='metadata.html#MetadataElement'
contentmodel='any'
@@ -810,6 +848,7 @@
<attribute name='r' href='pservers.html#RadialGradientElementRAttribute' animatable='yes'/>
<attribute name='fx' href='pservers.html#RadialGradientElementFXAttribute' animatable='yes'/>
<attribute name='fy' href='pservers.html#RadialGradientElementFYAttribute' animatable='yes'/>
+ <attribute name='fr' href='pservers.html#RadialGradientElementFRAttribute' animatable='yes'/>
<attribute name='gradientUnits' href='pservers.html#RadialGradientElementGradientUnitsAttribute' animatable='yes'/>
<attribute name='gradientTransform' href='pservers.html#RadialGradientElementGradientTransformAttribute' animatable='yes'/>
<attribute name='spreadMethod' href='pservers.html#RadialGradientElementSpreadMethodAttribute' animatable='yes'/>
@@ -855,6 +894,15 @@
</element>
<element
+ name='solidColor'
+ href='pservers.html#SolidColorElement'
+ contentmodel='anyof'
+ elements='animate, animateColor, set'
+ attributecategories='core, presentation, style'
+ interfaces='SVGSolidColorElement'>
+ </element>
+
+ <element
name='stop'
href='pservers.html#StopElement'
contentmodel='anyof'
@@ -1013,7 +1061,7 @@
<elementcategory name='container' href='intro.html#TermContainerElement' elements='svg, g, defs, symbol, mask, pattern, marker, a, switch, glyph, missing-glyph'/>
<elementcategory name='descriptive' href='intro.html#TermDescriptiveElement' elements='desc, title, metadata'/>
<elementcategory name='filter primitive' href='intro.html#TermFilterPrimitiveElement' elements='feBlend, feFlood, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence'/>
- <elementcategory name='gradient' href='intro.html#TermGradientElement' elements='linearGradient, radialGradient'/>
+ <elementcategory name='gradient' href='intro.html#TermGradientElement' elements='linearGradient, radialGradient, meshGradient'/>
<elementcategory name='graphics' href='intro.html#TermGraphicsElement' elements='path, text, rect, circle, ellipse, line, polyline, polygon, image, use'/>
<elementcategory name='graphics referencing' href='intro.html#TermGraphicsReferencingElement' elements='use, image'/>
<elementcategory name='light source' href='intro.html#TermLightSourceElement' elements='feDistantLight, fePointLight, feSpotLight'/>
@@ -1094,7 +1142,7 @@
<attributecategory
name='presentation'
href='intro.html#TermPresentationAttribute'
- presentationattributes='alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, unicode-bidi, visibility, word-spacing, writing-mode'/>
+ presentationattributes='alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, unicode-bidi, visibility, word-spacing, writing-mode'/>
<attributecategory
name='document event'
@@ -1249,6 +1297,8 @@
<property name='overflow' href='masking.html#OverflowProperty'/>
<property name='pointer-events' href='interact.html#PointerEventsProperty'/>
<property name='shape-rendering' href='painting.html#ShapeRenderingProperty'/>
+ <property name='solid-color' href='pservers.html#SolidColorProperty'/>
+ <property name='solid-opacity' href='pservers.html#SolidOpacityProperty'/>
<property name='stop-color' href='pservers.html#StopColorProperty'/>
<property name='stop-opacity' href='pservers.html#StopOpacityProperty'/>
<property name='stroke' href='painting.html#StrokeProperty'/>
@@ -1374,6 +1424,9 @@
<interface name='SVGColorProfileRule' href='color.html#InterfaceSVGColorProfileRule'/>
<interface name='SVGLinearGradientElement' href='pservers.html#InterfaceSVGLinearGradientElement'/>
<interface name='SVGRadialGradientElement' href='pservers.html#InterfaceSVGRadialGradientElement'/>
+ <interface name='SVGMeshGradientElement' href='pservers.html#InterfaceSVGMeshGradientElement'/>
+ <interface name='SVGMeshRowElement' href='pservers.html#InterfaceSVGMeshRowElement'/>
+ <interface name='SVGMeshPatchElement' href='pservers.html#InterfaceSVGMeshPatchElement'/>
<interface name='SVGStopElement' href='pservers.html#InterfaceSVGStopElement'/>
<interface name='SVGPatternElement' href='pservers.html#InterfaceSVGPatternElement'/>
<interface name='SVGCursorElement' href='interact.html#InterfaceSVGCursorElement'/>
--- a/master/pservers.html Mon Nov 14 15:20:05 2011 +0100
+++ b/master/pservers.html Mon Nov 14 15:24:41 2011 +0100
@@ -2,7 +2,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional+edit//EN" "xhtml1-transitional+edit.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:edit="http://xmlns.grorg.org/SVGT12NG/">
<head>
- <title>Gradients and Patterns</title>
+ <title>Paint Servers: Solid Colors, Gradients, and Patterns</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" title="Default" type="text/css" media="screen" href="style/default_svg.css"/>
<link rel="alternate stylesheet" title="No issues/annotations" type="text/css" media="screen" href="style/default_no_issues.css"/>
@@ -12,66 +12,252 @@
</head>
<body>
-<h1>Gradients and Patterns</h1>
+<p class="issue">Build script needs to be altered before DOCTYPE can be changed.</p>
+
+<h1>Paint Servers: Solid Colors, Gradients, and Patterns</h1>
<h2 id="Introduction">Introduction</h2>
-<p>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:</p>
+<p>This section covers <strong>Paint Servers</strong>, a method which
+allows the <a>'fill'</a> or <a>'stroke'</a> of an object to be defined
+by a resource found elsewhere. It allows resources to be reused
+throughout a document. See the section
+<a href="painting.html">Painting: Filling and Stroking</a> for a
+general discussion of filling and stroking objects.</p>
+
+<!-- Fill and stroke are already defined in painting.html. No need to
+redefine them here." -->
+
+<p>SVG defines three types of paint servers:</p>
<ul>
- <li><a href="color.html">color</a> (using <color>)</li>
-
- <li><a href="#Gradients">gradients</a> (linear or radial)</li>
-
- <li><a href="#Patterns">patterns</a> (vector or image, possibly tiled)</li>
+ <li><a href="#SolidColors">Solid colors</a>,</li>
+ <li><a href="#Gradients">Gradients</a>,</li>
+ <li><a href="#Patterns">Patterns</a>.</li>
</ul>
-<p>SVG uses the general notion of a <strong>paint server</strong>.
-Gradients and patterns are just specific types of built-in paint
-servers.</p>
+<p class="issue">SVG1.1 refers to
+"<a href="http://www.w3.org/TR/SVG/pservers.html#Introduction">built-in</a>"
+paint servers. Is there any other kind?</p>
-<p>Paint servers are referenced using an
-<a href="linking.html#IRIReference">IRI reference</a> on a <a>'fill'</a> or
-<a>'stroke'</a> property.</p>
+<div class="figure">
+ <img
+ alt="Image of three types of paint servers."
+ src="images/pservers/pservers_example.png"/>
+ <p class="caption">Three types of paint servers. From left to right:
+ A solid color ("MyLightPurple").
+ A linear gradient.
+ A pattern.
+ </p>
+</div>
+
+<p>Paint servers are used by including an
+<a href="linking.html#IRIReference">IRI reference</a> in
+a <a>'fill'</a> or <a>'stroke'</a> property (i.e. fill="#MyLightPurple").</p>
+
+
+<h2 id="SolidColors">Solid Colors</h2>
+
+<p class="note">Solid Colors are new in SVG 2 (ported from SVG1.2Tiny).</p>
+
+<p class="annotation">Solid colors approved by resolution xxxx.</p>
+
+<p>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 the chapter <a href="color.html">Color</a> for a more general
+discussion of color in SVG.)</p>
+
+<edit:with element='solidColor'>
+
+ <p id="SolidColorElement">Solid colors are defined by a
+ <a>'solidColor'</a> element.</p>
+
+ <edit:elementsummary name='solidColor'/>
+
+ <p>
+ The <a>'solid-color'</a> property specifies the color of the <a>'solidColor'</a>.
+ </p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="SolidColorProperty"><span class="propdef-title prop-name">'solid-color'</span></dt>
+ <dd>
+ <table summary="solid-color property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td>currentColor |<br />
+ <a href="types.html#DataTypeColor"><color></a>
+ <a href="types.html#DataTypeICCColor"><icccolor></a>
+ |<br />
+ <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>black</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'solid-color'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+ <p>
+ The <a>'solid-opacity'</a> property defines the opacity of the <a>'solidColor'</a>.
+ </p>
+
+ <div class="propdef">
+ <dl>
+ <dt id="StopOpacityProperty"><span class="propdef-title prop-name">'stop-opacity'</span></dt>
+ <dd>
+ <table summary="stop-opacity property" class="propinfo"
+ cellspacing="0" cellpadding="0">
+ <tr valign="baseline">
+ <td><em>Value:</em> </td>
+ <td><opacity-value> | <a class="noxref"
+ href="http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit">
+ <span
+ class="value-inst-inherit noxref">inherit</span></a></td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Initial:</em> </td>
+ <td>1</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Applies to:</em> </td>
+ <td><a>'solid-color'</a> elements</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Inherited:</em> </td>
+ <td>no</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Percentages:</em> </td>
+ <td>N/A</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em>Media:</em> </td>
+ <td>visual</td>
+ </tr>
+ <tr valign="baseline">
+ <td><em><a
+ href="animate.html#Animatable">Animatable</a>:</em> </td>
+ <td>yes</td>
+ </tr>
+ </table>
+ </dd>
+ </dl>
+ </div>
+
+</edit:with>
<h2 id="Gradients">Gradients</h2>
<h3 id="GradientsIntroduction">Introduction</h3>
-<p>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:
-<a href="pservers.html#LinearGradients"><strong>linear
-gradients</strong></a> and <a
-href="pservers.html#RadialGradients"><strong>radial
-gradients</strong></a>.</p>
+<p>
+ Gradients consist of smooth color transitions between points on a
+ drawing surface. SVG provides for three types of gradients:
+</p>
-<p>Once defined, gradients are then referenced using <a>'fill'</a> or
-<a>'stroke'</a> properties on a given
-<a href="intro.html#TermGraphicsElement">graphics element</a> to indicate that
-the given element shall be filled or stroked with the referenced gradient.</p>
+<ul>
+ <li><a href="#LinearGradients">linear gradients</a>,</li>
+ <li><a href="#RadialGradients">radial gradients</a>,</li>
+ <li><a href="#MeshGradients">mesh gradients</a>.</li>
+</ul>
<p>
-The angle of the color transitions along the gradient vector is defined by the
-gradient normal. Before any transforms are applied to the gradient or its
-referencing <a href="intro.html#TermGraphicsElement">graphics element</a>, the
-gradient normal is perpendicular with the gradient vector. If a
-<a href="intro.html#TermGraphicsElement">graphics element</a> references a
-gradient, conceptually the <a href="intro.html#TermGraphicsElement">graphics
-element</a> should take a copy of the gradient vector and gradient normal and
-treat it as part of its own geometry. Any transformations applied to the
-<a href="intro.html#TermGraphicsElement">graphics element</a> geometry also
-apply to the copied gradient vector and gradient normal. Any gradient transforms
-that are specified on the reference gradient are applied before any
-<a href="intro.html#TermGraphicsElement">graphics element</a> transformations
-are applied to the gradient.
+ Once a gradient is defined, a
+ <a href="intro.html#TermGraphicsElement">graphics element</a> can be
+ filled or stroked with the gradient by setting the <a>'fill'</a>
+ or <a>'stroke'</a> properties to reference the gradient.
</p>
-<img src="images/pservers/gradient_vector_and_normal.png"
- alt="linear and radial gradient vectors and normals" width="1000"
- height="500" />
+<p>
+ Color transitions for linear and radial gradients are defined by a
+ series of color <a href="#GradientStops">stops</a> along a gradient
+ vector. A gradient normal defines how the colors in a vector are
+ painted to the surface. For a linear gradient, the normal
+ corresponds to lines with the same color. It is perpendicular to the
+ vector in an untransformed gradient.
+
+ When a <a href="intro.html#TermGraphicsElement">graphics element</a>
+ references a gradient, conceptually the
+ <a href="intro.html#TermGraphicsElement">graphics element</a>
+ should take a copy of the gradient vector and gradient normal and
+ treat it as part of its own geometry. Any transformations applied to
+ the
+ <a href="intro.html#TermGraphicsElement">graphics element</a>
+ geometry also apply to the copied gradient vector and gradient
+ normal. Any gradient transforms that are specified on the reference
+ gradient are applied before any
+ <a href="intro.html#TermGraphicsElement">graphics element</a>
+ transformations are applied to the gradient.
+</p>
+
+<div class="figure">
+ <img
+ alt="Image of linear and radial gradients with vectors and normals indicated."
+ src="images/pservers/gradient_vector_and_normal.png"/>
+ <p class="caption">Linear and radial gradients with the gradient vector and gradient
+ normal indicated. The vector consists of three stops shown by small circles.
+ </p>
+</div>
+
+<div class="issue">
+ <p>
+ Would it be better to just refer to the normal as the line where color is constant.
+ In this case, it would be a circle for an untransformed radial gradient.
+ </p>
+ <p>
+ Alternative figure:
+ </p>
+<div class="figure">
+ <img
+ alt="Image of linear and radial gradients with vectors and normals indicated."
+ src="images/pservers/gradient_vector_and_normal_alt.png"/>
+ <p class="caption">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.
+ </p>
+</div>
+
+</div>
+
+<p>
+ Color transitions for mesh gradients are defined by an array of
+ color <a href="#GradientStops">stops</a>. 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
+ <a href="#MeshGradients">mesh gradients</a> section.
+</p>
<h3 id="LinearGradients">Linear gradients</h3>
@@ -85,152 +271,235 @@
<div class="adef-list">
<p><em>Attribute definitions:</em></p>
<dl>
- <dt id="LinearGradientElementGradientUnitsAttribute"><span
- class="adef">gradientUnits</span> =
- "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
- <dd>Defines the coordinate system for attributes <a>'x1'</a>,
- <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a>.<br />
- If <span
- class="attr-value">gradientUnits="userSpaceOnUse"</span>,
- <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a> 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 <a>'fill'</a> or <a>'stroke'</a> property) and then
- applying the transform specified by attribute <a>'gradientTransform'</a>.<br />
- If <span
- class="attr-value">gradientUnits="objectBoundingBox"</span>,
- the user coordinate system for attributes
- <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a> is established
- using the bounding box of the element to which the gradient
- is applied (see <a
- href="coords.html#ObjectBoundingBox">Object bounding box
- units</a>) and then applying the transform specified by
- attribute <a>'gradientTransform'</a>.<br />
- When <span class="attr-value">gradientUnits="objectBoundingBox"</span>
- and <a>'gradientTransform'</a> 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 user space.<br />
- If attribute <a>'gradientUnits'</a>
- is not specified, then the effect is as if a value of <span
- class="attr-value">'objectBoundingBox'</span> were
- specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LinearGradientElementGradientTransformAttribute"><span
- class="adef">gradientTransform</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeTransformList"><transform-list></a></span>"</dt>
- <dd>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 <a
- href="coords.html#ObjectBoundingBox">object bounding box
- units</a> to user space.<br />
- If attribute <a>'gradientTransform'</a> is not
- specified, then the effect is as if an identity transform
- were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LinearGradientElementX1Attribute"><span
- class="adef">x1</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd><a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a> define a <em>gradient
- vector</em> for the linear gradient. This <em>gradient
- vector</em> provides starting and ending points onto which
- the <a href="#GradientStops">gradient stops</a> are mapped.
- The values of <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a> can be either
- numbers or percentages.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'0%'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LinearGradientElementY1Attribute"><span
- class="adef">y1</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd>See <a>'x1'</a>.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'0%'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LinearGradientElementX2Attribute"><span
- class="adef">x2</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd>See <a>'x1'</a>.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'100%'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LinearGradientElementY2Attribute"><span
- class="adef">y2</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd>See <a>'x1'</a>.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'0%'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LinearGradientElementSpreadMethodAttribute"><span
- class="adef">spreadMethod</span> = "pad | reflect |
- repeat"</dt>
- <dd>Indicates what happens if the gradient starts or ends
- inside the bounds of the <em>target rectangle</em>.
- Possible values are: <span class='attr-value'>'pad'</span>, which says to use the
- terminal colors of the gradient to fill the remainder of
- the target region, <span class='attr-value'>'reflect'</span>, which says to reflect
- the gradient pattern start-to-end, end-to-start,
- start-to-end, etc. continuously until the <em>target
- rectangle</em> is filled, and <span class='attr-value'>repeat</span>, which says
- to repeat the gradient pattern start-to-end, start-to-end,
- start-to-end, etc. continuously until the target region is
- filled.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'pad'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="LinearGradientElementHrefAttribute"><span
- class="adef">xlink:href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd>An <a href="linking.html#IRIReference">IRI
- reference</a> to a different <a>'linearGradient'</a> or
- <a>'radialGradient'</a> element within
- the current SVG document fragment. Any <a>'linearGradient'</a> 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 <a>'xlink:href'</a>
- 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 <a>'xlink:href'</a>
- attribute, then the current element can inherit those
- attributes or gradient stops.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
+ <dt id="LinearGradientElementGradientUnitsAttribute">
+ <span class="adef">gradientUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"
+ </dt>
+ <dd>
+ <p>
+ Defines the coordinate system for attributes <a>'x1'</a>,
+ <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a>.
+ </p>
+ <p>
+ If <span class="attr-value">gradientUnits="userSpaceOnUse"</span>,
+ <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a>
+ 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 <a>'fill'</a> or <a>'stroke'</a>
+ property) and then applying the transform specified by
+ attribute <a>'gradientTransform'</a>.
+ </p>
+ <p>
+ If <span class="attr-value">gradientUnits="objectBoundingBox"</span>,
+ the user coordinate system for attributes
+ <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a> is
+ established using the bounding box of the element to which
+ the gradient is applied
+ (see <a href="coords.html#ObjectBoundingBox">Object
+ bounding box units</a>) and then applying the transform
+ specified by attribute <a>'gradientTransform'</a>.
+ </p>
+ <p>
+ When <span class="attr-value">gradientUnits="objectBoundingBox"</span>
+ and <a>'gradientTransform'</a> 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 user space.
+ </p>
+ <p>
+ If attribute <a>'gradientUnits'</a> is not specified, then
+ the effect is as if a value of
+ <span class="attr-value">'objectBoundingBox'</span> were
+ specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="LinearGradientElementGradientTransformAttribute">
+ <span class="adef">gradientTransform</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeTransformList"><transform-list></a></span>"
+ </dt>
+ <dd>
+ <p>
+ 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 <a href="coords.html#ObjectBoundingBox">object
+ bounding box units</a> to user space.
+ </p>
+ <p>
+ If attribute <a>'gradientTransform'</a> is not
+ specified, then the effect is as if an identity transform
+ were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="LinearGradientElementX1Attribute">
+ <span class="adef">x1</span> = "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a>
+ define a <em>gradient vector</em> for the linear
+ gradient. This <em>gradient vector</em> provides starting
+ and ending points onto which
+ the <a href="#GradientStops">gradient stops</a> are
+ mapped. The values
+ of <a>'x1'</a>, <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a>
+ can be either numbers or percentages.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0%'</span> were
+ specified.
+ </p>
+ <p class="issue">
+ Could this be written in a less legalese way?
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="LinearGradientElementY1Attribute">
+ <span class="adef">y1</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'x1'</a>.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0%'</span> were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="LinearGradientElementX2Attribute">
+ <span class="adef">x2</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'x1'</a>.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'100%'</span> were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="LinearGradientElementY2Attribute">
+ <span class="adef">y2</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'x1'</a>.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0%'</span> were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="LinearGradientElementSpreadMethodAttribute">
+ <span class="adef">spreadMethod</span> = "pad | reflect | repeat"
+ </dt>
+ <dd>
+ <p>
+ Indicates what happens if the gradient starts or ends
+ inside the bounds of the <em>target rectangle</em>.
+ Possible values are:
+ <span class='attr-value'>'pad'</span>, which says to
+ use the terminal colors of the gradient to fill the
+ remainder of the target
+ region, <span class='attr-value'>'reflect'</span>, which
+ says to reflect the gradient pattern start-to-end,
+ end-to-start, start-to-end, etc. continuously until
+ the <em>target rectangle</em> is filled,
+ and <span class='attr-value'>repeat</span>, which says to
+ repeat the gradient pattern start-to-end, start-to-end,
+ start-to-end, etc. continuously until the target region is
+ filled.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'pad'</span> were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ <div class="figure">
+ <img
+ alt="Image of the three possible values for 'spreadMethod'."
+ src="images/pservers/spread_method.png"/>
+ <p class="caption">
+ Illustration of the three possible values for
+ <span class="adef">spreadMethod</span>, from left to
+ right: pad, reflect, repeat. The gradient vector spans
+ from 40% to 60% of the bounding box width.
+ </p>
+ </div>
+ </dd>
+ <dt id="LinearGradientElementHrefAttribute">
+ <span class="adef">xlink:href</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeIRI"><iri></a></span>"
+ </dt>
+ <dd>
+ <p>
+ An <a href="linking.html#IRIReference">IRI reference</a>
+ to a different <a>'linearGradient'</a> or
+ <a>'radialGradient'</a> element within
+ the current SVG document fragment. Any <a>'linearGradient'</a> 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 <a>'xlink:href'</a>
+ 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 <a>'xlink:href'</a>
+ attribute, then the current element can inherit those
+ attributes or gradient stops.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
</dl>
</div>
@@ -283,178 +552,359 @@
<div class="adef-list">
<p><em>Attribute definitions:</em></p>
<dl>
- <dt id="RadialGradientElementGradientUnitsAttribute"><span
- class="adef">gradientUnits</span> =
- "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
- <dd>Defines the coordinate system for attributes
- <a>'cx'</a>, <a>'cy'</a>, <a>'r'</a>, <a>'fx'</a> and <a>'fy'</a>.<br/>
- If <span
- class="attr-value">gradientUnits="userSpaceOnUse"</span>,
- <a>'cx'</a>, <a>'cy'</a>, <a>'r'</a>, <a>'fx'</a> and <a>'fy'</a>
- 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 <a>'fill'</a> or <a>'stroke'</a> property) and then
- applying the transform specified by attribute <a>'gradientTransform'</a>.<br />
- If <span
- class="attr-value">gradientUnits="objectBoundingBox"</span>,
- the user coordinate system for attributes
- <a>'cx'</a>, <a>'cy'</a>, <a>'r'</a>, <a>'fx'</a> and <a>'fy'</a>
- is established
- using the bounding box of the element to which the gradient
- is applied (see <a
- href="coords.html#ObjectBoundingBox">Object bounding box
- units</a>) and then applying the transform specified by
- attribute <a>'gradientTransform'</a>.<br />
- When <span
- class="attr-value">gradientUnits="objectBoundingBox"</span>
- and <a>'gradientTransform'</a> 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.<br />
- If attribute <a>'gradientUnits'</a>
- is not specified, then the effect is as if a value of <span
- class="attr-value">'objectBoundingBox'</span> were
- specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RadialGradientElementGradientTransformAttribute"><span
- class="adef">gradientTransform</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeTransformList"><transform-list></a></span>"</dt>
- <dd>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 <a
- href="coords.html#ObjectBoundingBox">object bounding box
- units</a> to user space.<br />
- If attribute <a>'gradientTransform'</a> is not
- specified, then the effect is as if an identity transform
- were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RadialGradientElementCXAttribute"><span
- class="adef">cx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd><a>'cx'</a>, <a>'cy'</a> and <a>'r'</a> define the largest (i.e.,
- outermost) circle for the radial gradient. The gradient
- will be drawn such that the 100% <a
- href="#GradientStops">gradient stop</a> is mapped to the
- perimeter of this largest (i.e., outermost) circle.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'50%'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RadialGradientElementCYAttribute"><span
- class="adef">cy</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd>See <a>'cx'</a>.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'50%'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RadialGradientElementRAttribute"><span
- class="adef">r</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>See <a>'cx'</a>.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error processing</a>).
- A value of zero will cause the area to be painted as a
- single color using the color and opacity of the last <a
- href="pservers.html#GradientStops">gradient stop</a>.<br />
- If the attribute is not specified, the effect is as if a
- value of <span class='attr-value'>'50%'</span> were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RadialGradientElementFXAttribute"><span
- class="adef">fx</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd><a>'fx'</a> and <a>'fy'</a> define the focal point for the
- radial gradient. The gradient will be drawn such that the
- 0% <a href="#GradientStops">gradient stop</a> is mapped to
- (fx, fy).<br />
- If attribute <a>'fx'</a> is not specified, <a>'fx'</a> will coincide
- with the presentational value of <a>'cx'</a> 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.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RadialGradientElementFYAttribute"><span
- class="adef">fy</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd>See <a>'fx'</a>.<br />
- If attribute <a>'fy'</a> is not specified, <a>'fy'</a> will coincide
- with the presentational vlaue of <a>'cy'</a> 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.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RadialGradientElementSpreadMethodAttribute"><span
- class="adef">spreadMethod</span> = "pad | reflect |
- repeat"</dt>
- <dd>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 <a>'spreadMethod'</a>
- attribute on <a>'linearGradient'</a> element.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="RadialGradientElementHrefAttribute"><span
- class="adef">xlink:href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd>An <a href="linking.html#IRIReference">IRI
- reference</a> to a different <a>'linearGradient'</a> or
- <a>'radialGradient'</a> element within
- the current SVG document fragment. Any <a>'radialGradient'</a> 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 <a>'xlink:href'</a>
- 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 <a>'xlink:href'</a>
- attribute, then the current element can inherit those
- attributes or gradient stops.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
+ <dt id="RadialGradientElementGradientUnitsAttribute">
+ <span class="adef">gradientUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"
+ </dt>
+ <dd>
+ <p>
+ Defines the coordinate system for attributes
+ <a>'cx'</a>, <a>'cy'</a>, <a>'r'</a>, <a>'fx'</a>, <a>'fy'</a>, and <a>'fr'</a>.
+ </p>
+ <p>
+ If <span class="attr-value">gradientUnits="userSpaceOnUse"</span>,
+ <a>'cx'</a>, <a>'cy'</a>, <a>'r'</a>, <a>'fx'</a>, <a>'fy'</a>,
+ and <a>'fr'</a> 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 <a>'fill'</a> or <a>'stroke'</a> property) and then
+ applying the transform specified by
+ attribute <a>'gradientTransform'</a>.
+ </p>
+ <p>
+ If <span class="attr-value">gradientUnits="objectBoundingBox"</span>,
+ the user coordinate system for attributes
+ <a>'cx'</a>, <a>'cy'</a>, <a>'r'</a>, <a>'fx'</a>, <a>'fr'</a>,
+ and <a>'fr'</a> is established using the bounding box of
+ the element to which the gradient is applied
+ (see <a href="coords.html#ObjectBoundingBox">Object
+ bounding box units</a>) and then applying the transform
+ specified by attribute <a>'gradientTransform'</a>.
+ </p>
+ <p>
+ When <span class="attr-value">gradientUnits="objectBoundingBox"</span>
+ and <a>'gradientTransform'</a> 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.
+ </p>
+ <p>
+ If attribute <a>'gradientUnits'</a>
+ is not specified, then the effect is as if a value
+ of <span class="attr-value">'objectBoundingBox'</span>
+ were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="RadialGradientElementGradientTransformAttribute">
+ <span class="adef">gradientTransform</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeTransformList"><transform-list></a></span>"
+ </dt>
+ <dd>
+ <p>
+ 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 <a href="coords.html#ObjectBoundingBox">object
+ bounding box units</a> to user space.</p><p> If
+ attribute <a>'gradientTransform'</a> is not specified,
+ then the effect is as if an identity transform were
+ specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="RadialGradientElementCXAttribute">
+ <span class="adef">cx</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ <a>'cx'</a>, <a>'cy'</a> and <a>'r'</a> define the largest
+ (i.e., outermost) circle for the radial gradient. The
+ gradient will be drawn such that the
+ 100% <a href="#GradientStops">gradient stop</a> is mapped
+ to the perimeter of this largest circle.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'50%'</span> were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="RadialGradientElementCYAttribute">
+ <span class="adef">cy</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'cx'</a>.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'50%'</span> were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="RadialGradientElementRAttribute">
+ <span class="adef">r</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeLength"><length></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'cx'</a>.
+ </p>
+ <p>
+ A negative value is an error
+ (see <a href="implnote.html#ErrorProcessing">Error
+ processing</a>). A value of zero will cause the area to
+ be painted as a single color using the color and opacity
+ of the last <a href="pservers.html#GradientStops">gradient
+ stop</a>.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'50%'</span> were specified.
+ </p>
+ <p>
+ <span class="anim-target">
+ <a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="RadialGradientElementFXAttribute">
+ <span class="adef">fx</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ <a>'fx'</a>, <a>'fy'</a>, and <a>'fr'</a> define the smallest
+ (i.e., innermost) circle for the radial gradient. The
+ gradient will be drawn such that the
+ 0% <a href="#GradientStops">gradient stop</a> is mapped
+ to the perimeter of this smallest circle.
+ </p>
+ <p>
+ If attribute <a>'fx'</a> is not specified, <a>'fx'</a> will coincide
+ with the presentational value of <a>'cx'</a> 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.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+
+ <div class="figure">
+ <img
+ alt="Diagram of various radial gradient attributes."
+ src="images/pservers/radial_gradient_dimensions.png"/>
+ <p class="caption">This diagram shows how the geometric
+ attributes are defined for the case where <a>'fr'</a> is
+ 50% of <a>'r'</a>. The small circle marks the center of
+ the outermost circle (<a>'cx'</a>,<a>'cy'</a>), while
+ the cross marks the center of the innermost circle
+ (<a>'fx'</a>,<a>'fy'</a>). The dashed lines show two
+ gradient vectors. Vectors connect corresponding
+ points on the inner and outer most circles.
+ </p>
+ </div>
+
+ </dd>
+ <dt id="RadialGradientElementFYAttribute">
+ <span class="adef">fy</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'fx'</a>.
+ </p>
+ <p>
+ If attribute <a>'fy'</a> is not specified, <a>'fy'</a>
+ will coincide with the presentational value of <a>'cy'</a>
+ 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.
+ </p>
+ <p>
+ <span class="anim-target">
+ <a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="RadialGradientElementFRAttribute">
+ <span class="adef">fr</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><length></a></span>"
+ </dt>
+ <dd>
+ <p class="note">New in SVG 2. Added to align with Canvas.</p>
+ <p>
+ See <a>'fx'</a>.
+ </p>
+ <p>
+ <a>'fr'</a> is the radius of the focal circle.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of <span class='attr-value'>'0%'</span> 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.
+ </p>
+ <p>
+ <span class="anim-target">
+ <a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ <div class="annotation">
+ <p>
+ Resolution: Add an 'fr' attribute to <radialGradient>.
+ </p>
+ <p>
+ <a href="http://www.w3.org/2011/07/29-svg-minutes.html#item06">Seattle
+ 2011 F2F Day 3</a>.
+ </p>
+ <p>
+ Action-3098 on ED.
+ </p>
+ <p>
+ Purpose: to align with Canvas. The zero-offset stop would be along
+ the circle defined by the fx, fy, and fr attributes.
+ </p>
+ </div>
+ </dd>
+ <dt id="RadialGradientElementSpreadMethodAttribute">
+ <span class="adef">spreadMethod</span> = "pad | reflect | repeat"
+ </dt>
+ <dd>
+ <p>
+ 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 <a>'spreadMethod'</a>
+ attribute on <a>'linearGradient'</a> element.
+ </p>
+ <p>
+ <span class="anim-target">
+ <a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="RadialGradientElementHrefAttribute">
+ <span class="adef">xlink:href</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeIRI"><iri></a></span>"
+ </dt>
+ <dd>
+ <p>
+ An <a href="linking.html#IRIReference">IRI reference</a>
+ to a different <a>'linearGradient'</a> or
+ <a>'radialGradient'</a> element within the current SVG
+ document fragment. Any <a>'radialGradient'</a> 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 <a>'xlink:href'</a> 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 <a>'xlink:href'</a> attribute, then
+ the current element can inherit those attributes or
+ gradient stops.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
</dl>
</div>
+<div class="annotation">
+ <p>
+ Resolution: Radial gradients with focal point on the circle.
+ </p>
+ <p>
+ Seattle 2011 F2F Day 3.
+ <a href="http://www.w3.org/2011/07/29-svg-minutes.html#item05">Seattle
+ 2011 F2F Day 3</a>.
+ </p>
+ <p>
+ Action-3097 on ED.
+ </p>
+ <p>
+ Purpose: SVG1.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.
+ </p>
+</div>
+
+
<p>Percentages are allowed for attributes <a>'cx'</a>, <a>'cy'</a>,
-<a>'r'</a>, <a>'fx'</a> and <a>'fy'</a>. For
+<a>'r'</a>, <a>'fx'</a>, <a>'fy'</a>, and <a>'fr'</a>. For
<span class="attr-value">gradientUnits="userSpaceOnUse"</span>, percentages
represent values relative to the current viewport. For
<span class="attr-value">gradientUnits="objectBoundingBox"</span>, percentages
represent values relative to the bounding box for the object.</p>
<p>If the point defined by <a>'fx'</a> and <a>'fy'</a> lies outside the
-circle defined by <a>'cx'</a>, <a>'cy'</a> and <a>'r'</a>, then the user
+circle defined by <a>'cx'</a>, <a>'cy'</a>, and <a>'r'</a>, then the user
agent shall set the focal point to the intersection of the line from
(<a>'cx'</a>, <a>'cy'</a>) to (<a>'fx'</a>, <a>'fy'</a>) with the circle
-defined by <a>'cx'</a>, <a>'cy'</a> and <a>'r'</a>.</p>
+defined by <a>'cx'</a>, <a>'cy'</a>, and <a>'r'</a>.</p>
+
+<p class="issue">
+ What happens if the circle defined by 'fx', 'fy', and 'fr' crosses outside
+ of the circle defined by 'cx', 'cy', and 'cr'?
+</p>
+
+<p class="issue">
+ What color space is the weighted average performed (linearRGB/sRGB)?
+</p>
+
+<div class="figure">
+ <img
+ alt="Image of two radial gradients, one with the focus just inside the circumference
+ and one with the focus on the circumference."
+ src="images/pservers/radial_gradient_focus.png"/>
+ <p class="caption">
+ Two radial gradients with
+ <span class="attr-value">spreadMethod="repeat"</span>. On the
+ left, the focus is just inside the right side of the circle
+ defined by by <a>'cx'</a>, <a>'cy'</a>, and <a>'r'</a>. On the
+ right, the focus 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.
+ </p>
+</div>
<p><a href="styling.html#SVGStylingProperties">Properties</a>
inherit into the <a>'radialGradient'</a> element from its ancestors;
@@ -476,7 +926,143 @@
shows how to fill a rectangle by referencing a radial gradient paint
server.</p>
-<edit:example href='images/pservers/radgrad01.svg' name='radgrad01' description='fill a rectangle by referencing a radial gradient paint server' image='yes' link='yes'/>
+<edit:example href='images/pservers/radgrad01.svg' name='radgrad01' description='Fill a rectangle by referencing a radial gradient paint server' image='yes' link='yes'/>
+
+</edit:with>
+
+<h3 id="MeshGradients">Mesh gradients</h3>
+
+<edit:with element='meshGradient'>
+
+ <p class="note">
+ New in SVG 2. Added to allow shadings along curved lines. This is needed,
+ for example, in creating life-like drawings.
+ </p>
+
+ <p>
+ 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.
+ </p>
+
+ <div class="figure">
+ <img
+ alt="Image of single mesh patch."
+ src="images/pservers/mesh_gradient_patch.png"/>
+ <p class="caption">
+ A single Coons-Mesh patch.
+ </p>
+ </div>
+
+ <p>
+ 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 the area inside the square is colored using a bilinear
+ interpolation. Second, the points inside the square are mapped to
+ points inside the patch using the following formula (u, and v are
+ the coordinates inside the unit square):
+ </p>
+ <p>
+ S=S_C+S_D-S_B, where<br/>
+ S_C(u,v) = (1-v)xC_1(u) + v*C_2(u),<br/>
+ S_D(u,v) = (1-u)xD_1(v) + u*D_2(v), and<br/>
+ 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)].
+ </p>
+ <p class="issue">
+ MathML gets stripped out by build script.
+ </p>
+ <math xmlns="http://www.w3.1998/Math/MathML">
+ <mrow>
+ <msup><mi>S</mi></msup><mo>=</mo><mi>S</mi><msub>C</msub><mo>+</mo><mi>S</mi><msub>D</msub>
+ </mrow>
+ </math>
+ <p class="issue">
+ Come up with better explanation of the mapping with diagram.
+ </p>
+ <p class="note">
+ On 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.
+ </p>
+
+ <p>
+ For a mesh, the individual patches are 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.
+ </p>
+
+ <p>
+ The structure of a mesh gradient is as follows:
+ </p>
+
+ <div class="example">
+ <pre>
+<meshGradient 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>
+</meshGradient>
+ </pre>
+ </div>
+ <div class="annotation">
+ <p>
+ Resolution: Mesh gradients are accepted by the WG for SVG 2.
+ </p>
+ <p>
+ <a href="http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Resolutions#Mesh_gradients_are_accepted_by_the_WG_for_SVG_2.0">Seattle 2011 F2F day 3</a>
+ </p>
+ </div>
+
+ <div class="annotation">
+ <p>
+ Resolution: Rename stop-path to 'd' or 'path' (Coons patch syntax).
+ </p>
+ <p>
+ <a href="http://www.w3.org/Graphics/SVG/WG/wiki/SVG2_Resolutions#Rename_stop-path_to_.27d.27_or_.27path.27_.28Coons_patch_syntax.29">Seattle 2011 F2F day 3</a>
+ </p>
+ </div>
+
+ <div class="annotation">
+ <p>
+ 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.
+ </p>
+ <p>
+ <a href="http://lists.w3.org/Archives/Public/www-svg/2011Oct/0046.html">Boston 2011 F2F</a>
+ </p>
+ </div>
+
+
+ <p id="MeshGradientElement">Mesh gradients are defined by a
+ <a>'meshGradient'</a> element.</p>
+
+
+ <edit:elementsummary name='meshGradient'/>
+
+ <edit:elementsummary name='meshRow'/>
+
+ <edit:elementsummary name='meshPatch'/>
+
</edit:with>
@@ -484,41 +1070,58 @@
<edit:with element='stop'>
-<p id="StopElement">The ramp of colors to use on a gradient is defined
-by the <a>'stop'</a> elements that are child elements to either the
-<a>'linearGradient'</a> element or the <a>'radialGradient'</a>
-element.</p>
+ <p id="StopElement">
+ The vector (linear and radial gradients) or array (mesh gradients)
+ of colors to use in a gradient is defined by the <a>'stop'</a>
+ elements that are child elements to a
+ <a>'linearGradient'</a>, <a>'radialGradient'</a>,
+ or <a>'meshPatch'</a> element.
+ </p>
+ <p class="annotation">
+ In SVG 1.1, the above read: "The ramp of colors..." but "ramp" is
+ used nowhere else in this section.
+ </p>
<edit:elementsummary name='stop'/>
<div class="adef-list">
<p><em>Attribute definitions:</em></p>
<dl>
- <dt id="StopElementOffsetAttribute"><span
- class="adef">offset</span> = "<em><a
- href="types.html#DataTypeNumber"><number></a> | <a
- href="types.html#DataTypePercentage"><percentage></a></em>"</dt>
- <dd>The <a>'offset'</a> attribute is
- either a <a
- href="types.html#DataTypeNumber"><number></a>
- (usually ranging from 0 to 1) or a <a
- href="types.html#DataTypePercentage"><percentage></a>
- (usually ranging from 0% to 100%) which indicates where the
- gradient stop is placed. For linear gradients, the <a>'offset'</a> attribute represents a
- location along the <em>gradient vector</em>. For radial
- gradients, it represents a percentage distance from (fx,fy)
- to the edge of the outermost/largest circle.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
+ <dt id="StopElementOffsetAttribute">
+ <span class="adef">offset</span> =
+ "<em><a href="types.html#DataTypeNumber"><number></a> |
+ <a href="types.html#DataTypePercentage"><percentage></a></em>"
+ </dt>
+ <dd>
+ <p>
+ The <a>'offset'</a> attribute is either
+ a <a href="types.html#DataTypeNumber"><number></a>
+ (usually ranging from 0 to 1) or
+ a <a href="types.html#DataTypePercentage"><percentage></a>
+ (usually ranging from 0% to 100%) which indicates where
+ the gradient stop is placed. For linear gradients,
+ the <a>'offset'</a> attribute represents a location along
+ the <em>gradient vector</em>. For radial gradients, it
+ represents a percentage 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.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
</dl>
</div>
-<p>The <a>'stop-color'</a> property indicates what color to use at that
-gradient stop. The keyword <span class="attr-value">currentColor</span> and
-ICC colors can be specified in the same manner as within a
-<a href="painting.html#SpecifyingPaint"><paint></a> specification for
-the <a>'fill'</a> and <a>'stroke'</a> properties.</p>
+ <p>
+ The <a>'stop-color'</a> property indicates what color to use at that
+ gradient stop. The keyword <span class="attr-value">currentColor</span> and
+ ICC colors can be specified in the same manner as within a
+ <a href="painting.html#SpecifyingPaint"><paint></a> specification for
+ the <a>'fill'</a> and <a>'stroke'</a> properties.
+ </p>
<div class="propdef">
<dl>
@@ -619,17 +1222,20 @@
<li>Gradient offset values less than 0 (or less than 0%) are
rounded up to 0%. Gradient offset values greater than 1 (or
greater than 100%) are rounded down to 100%.</li>
+
<li>It is necessary that at least two stops defined to have a
gradient effect. If no stops are defined, then painting shall
occur as if 'none' were specified as the paint style. If one
stop is defined, then paint with the solid color fill using
the color defined for that gradient stop.</li>
+
<li>Each gradient offset value is required to be equal to or
greater than the previous gradient stop's offset value. If a
given gradient stop's offset value is not equal to or greater
than all previous offset values, then the offset value is
adjusted to be equal to the largest of all previous offset
values.</li>
+
<li>
If two gradient stops have the same offset value, then the
latter gradient stop controls the color value at the
@@ -651,6 +1257,7 @@
then abruptly shifts from red to blue, and then goes
smoothly from blue to black.
</li>
+
</ul>
</edit:with>
@@ -659,191 +1266,265 @@
<edit:with element='pattern'>
-<p id="PatternElement">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 <em>x</em> and <em>y</em> to cover the areas to be
-painted. Patterns are defined using a <a>'pattern'</a> element and then
-referenced by properties <a>'fill'</a> and <a>'stroke'</a> on a given
-<a href="intro.html#TermGraphicsElement">graphics element</a> to indicate
-that the given element shall be filled or stroked with the referenced
-pattern.</p>
-
-<p>Attributes <a>'x'</a>, <a>'y'</a>, <a>'width'</a>, <a>'height'</a>
-and <a>'patternUnits'</a> define a reference rectangle somewhere
-on the infinite canvas. The reference rectangle has its
-top/left at (<var>x</var>, <var>y</var>) and its bottom/right at
-(<var>x</var> + <var>width</var>, <var>y</var> + <var>height</var>). The tiling
-theoretically extends a series of such rectangles to infinity
-in X and Y (positive and negative), with rectangles starting at
-(<var>x</var> + m*<var>width</var>, <var>y</var> + n*
-<var>height</var>) for each possible integer value for <em>m</em> and
-<em>n</em>.</p>
+ <p id="PatternElement">
+ A pattern is used to <a>'fill'</a> or <a>'stroke'</a> an object
+ using a pre-defined graphic object which can be replicated
+ ("tiled") at fixed intervals in <em>x</em> and <em>y</em> to cover
+ the areas to be painted. Patterns are defined using
+ a <a>'pattern'</a> element and then referenced by
+ properties <a>'fill'</a> and <a>'stroke'</a> on a
+ given <a href="intro.html#TermGraphicsElement">graphics
+ element</a> to indicate that the given element shall be filled or
+ stroked with the pattern.
+ </p>
+ <p>
+ Attributes <a>'x'</a>, <a>'y'</a>, <a>'width'</a>, <a>'height'</a>
+ and <a>'patternUnits'</a> define a reference rectangle somewhere
+ on the infinite canvas. The reference rectangle has its top/left
+ at (<var>x</var>, <var>y</var>) and its bottom/right at
+ (<var>x</var> + <var>width</var>, <var>y</var> + <var>height</var>).
+ The tiling theoretically extends a series of such rectangles to
+ infinity in X and Y (positive and negative), with rectangles
+ starting at
+ (<var>x</var> + m*<var>width</var>, <var>y</var> + n*
+ <var>height</var>) for each possible integer value for <em>m</em>
+ and <em>n</em>.
+ </p>
<edit:elementsummary name='pattern'/>
<div class="adef-list">
<p><em>Attribute definitions:</em></p>
<dl>
- <dt id="PatternElementPatternUnitsAttribute"><span
- class="adef">patternUnits</span> = "<em>userSpaceOnUse</em>
- | <em>objectBoundingBox</em>"</dt>
- <dd>Defines the coordinate system for attributes
- <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>.<br />
- If <span
- class="attr-value">patternUnits="userSpaceOnUse"</span>,
- <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>
- represent values in the coordinate system that results from
- taking the current user coordinate system in place at the
- time when the <a>'pattern'</a>
- element is referenced (i.e., the user coordinate system for
- the element referencing the <a>'pattern'</a> element via a
- <a>'fill'</a> or <a>'stroke'</a> property) and then
- applying the transform specified by attribute <a>'patternTransform'</a>.<br />
- If <span
- class="attr-value">patternUnits="objectBoundingBox"</span>,
- the user coordinate system for attributes
- <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>
- is established
- using the bounding box of the element to which the pattern
- is applied (see <a
- href="coords.html#ObjectBoundingBox">Object bounding box
- units</a>) and then applying the transform specified by
- attribute <a>'patternTransform'</a>.<br />
- If attribute <a>'patternUnits'</a>
- is not specified, then the effect is as if a value of <span
- class="attr-value">'objectBoundingBox'</span> were
- specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="PatternElementPatternContentUnitsAttribute"><span
- class="adef">patternContentUnits</span> =
- "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"</dt>
- <dd>Defines the coordinate system for the contents of the
- <a>'pattern'</a>. Note that this
- attribute has no effect if attribute <a>'viewBox'</a> is specified.<br />
- If <span class="attr-value">patternContentUnits="userSpaceOnUse"</span>,
- the user coordinate system for the contents of the <a>'pattern'</a>
- element is the coordinate system that results from taking
- the current user coordinate system in place at the time
- when the <a>'pattern'</a> element is referenced (i.e., the
- user coordinate system for the element referencing the
- <a>'pattern'</a> element via a <a>'fill'</a> or <a>'stroke'</a>
- property) and then applying the transform specified by attribute
- <a>'patternTransform'</a>.<br />
- If <span
- class="attr-value">patternContentUnits="objectBoundingBox"</span>,
- the user coordinate system for the contents of the <a>'pattern'</a> element is
- established using the bounding box of the element to which
- the pattern is applied (see <a
- href="coords.html#ObjectBoundingBox">Object bounding box
- units</a>) and then applying the transform specified by
- attribute <a>'patternTransform'</a>.<br />
- If attribute <a>'patternContentUnits'</a> is not
- specified, then the effect is as if a value of
- <span class="attr-value">'userSpaceOnUse'</span> were
- specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="PatternElementPatternTransformAttribute"><span
- class="adef">patternTransform</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeTransformList"><transform-list></a></span>"</dt>
- <dd>Contains the definition of an optional additional
- transformation from the pattern coordinate system onto the
- target coordinate system (i.e., <span class='attr-value'>'userSpaceOnUse'</span> or
- <span class='attr-value'>'objectBoundingBox'</span>). 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 <a
- href="coords.html#ObjectBoundingBox">object bounding box
- units</a> to user space.<br />
- If attribute <a>'patternTransform'</a> is not specified,
- then the effect is as if an identity transform were
- specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="PatternElementXAttribute"><span
- class="adef">x</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd><a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> 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 <a>'patternUnits'</a>
- and <a>'patternTransform'</a>.<br />
- If the attribute is not specified, the effect is as if a
- value of zero were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="PatternElementYAttribute"><span
- class="adef">y</span> = "<span class="attr-value"><a
- href="types.html#DataTypeCoordinate"><coordinate></a></span>"</dt>
- <dd>See <a>'x'</a>.<br />
- If the attribute is not specified, the effect is as if a
- value of zero were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="PatternElementWidthAttribute"><span
- class="adef">width</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>See <a>'x'</a>.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error processing</a>).
- A value of zero disables rendering of the element (i.e., no
- paint is applied).<br />
- If the attribute is not specified, the effect is as if a
- value of zero were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="PatternElementHeightAttribute"><span
- class="adef">height</span> = "<span class="attr-value"><a
- href="types.html#DataTypeLength"><length></a></span>"</dt>
- <dd>See <a>'x'</a>.<br />
- A negative value is an error (see <a
- href="implnote.html#ErrorProcessing">Error processing</a>).
- A value of zero disables rendering of the element (i.e., no
- paint is applied).<br />
- If the attribute is not specified, the effect is as if a
- value of zero were specified.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
- <dt id="PatternElementHrefAttribute"><span
- class="adef">xlink:href</span> = "<span
- class="attr-value"><a
- href="types.html#DataTypeIRI"><iri></a></span>"</dt>
- <dd>An <a href="linking.html#IRIReference">IRI
- reference</a> to a different <a>'pattern'</a> 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 <a>'xlink:href'</a>
- 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 <a>'xlink:href'</a> attribute, then the current
- element can inherit those attributes or children.<br />
- <span class="anim-target"><a
- href="animate.html#Animatable">Animatable</a>:
- yes.</span></dd>
+ <dt id="PatternElementPatternUnitsAttribute">
+ <span class="adef">patternUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"
+ </dt>
+ <dd>
+ <p>
+ Defines the coordinate system for attributes
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>.
+ </p>
+ <p>
+ If <span class="attr-value">patternUnits="userSpaceOnUse"</span>,
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>
+ represent values in the coordinate system that results
+ from taking the current user coordinate system in place at
+ the time when the <a>'pattern'</a> element is referenced
+ (i.e., the user coordinate system for the element
+ referencing the <a>'pattern'</a> element via a
+ <a>'fill'</a> or <a>'stroke'</a> property) and then
+ applying the transform specified by attribute <a>'patternTransform'</a>.
+ </p>
+ <p>
+ If <span class="attr-value">patternUnits="objectBoundingBox"</span>,
+ the user coordinate system for attributes
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>
+ is established using the bounding box of the element to
+ which the pattern is applied
+ (see <a href="coords.html#ObjectBoundingBox">Object
+ bounding box units</a>) and then applying the transform
+ specified by attribute <a>'patternTransform'</a>.
+ </p>
+ <p>
+ If attribute <a>'patternUnits'</a>
+ is not specified, then the effect is as if a value of
+ <span class="attr-value">'objectBoundingBox'</span> were
+ specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="PatternElementPatternContentUnitsAttribute">
+ <span class="adef">patternContentUnits</span> =
+ "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"
+ </dt>
+ <dd>
+ <p>
+ Defines the coordinate system for the contents of the
+ <a>'pattern'</a>. Note that this
+ attribute has no effect if attribute <a>'viewBox'</a> is specified.</p><p>
+ If <span class="attr-value">patternContentUnits="userSpaceOnUse"</span>,
+ the user coordinate system for the contents of the <a>'pattern'</a>
+ element is the coordinate system that results from taking
+ the current user coordinate system in place at the time
+ when the <a>'pattern'</a> element is referenced (i.e., the
+ user coordinate system for the element referencing the
+ <a>'pattern'</a> element via a <a>'fill'</a> or <a>'stroke'</a>
+ property) and then applying the transform specified by attribute
+ <a>'patternTransform'</a>.
+ </p>
+ <p>
+ If <span
+ class="attr-value">patternContentUnits="objectBoundingBox"</span>,
+ the user coordinate system for the contents of the <a>'pattern'</a> element is
+ established using the bounding box of the element to which
+ the pattern is applied (see <a
+ href="coords.html#ObjectBoundingBox">Object bounding box
+ units</a>) and then applying the transform specified by
+ attribute <a>'patternTransform'</a>.
+ </p>
+ <p>
+ If attribute <a>'patternContentUnits'</a> is not
+ specified, then the effect is as if a value of
+ <span class="attr-value">'userSpaceOnUse'</span> were
+ specified.
+ </p>
+ <p>
+ <span class="anim-target"><a
+ href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="PatternElementPatternTransformAttribute">
+ <span class="adef">patternTransform</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeTransformList"><transform-list></a></span>"
+ </dt>
+ <dd>
+ <p>
+ Contains the definition of an optional additional
+ transformation from the pattern coordinate system onto the
+ target coordinate system (i.e., <span class='attr-value'>'userSpaceOnUse'</span> or
+ <span class='attr-value'>'objectBoundingBox'</span>). 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 <a href="coords.html#ObjectBoundingBox">object bounding box
+ units</a> to user space.
+ </p>
+ <p>
+ If attribute <a>'patternTransform'</a> is not specified,
+ then the effect is as if an identity transform were
+ specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span>
+ </p>
+ </dd>
+ <dt id="PatternElementXAttribute">
+ <span class="adef">x</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a> 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 <a>'patternUnits'</a>
+ and <a>'patternTransform'</a>.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of zero were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="PatternElementYAttribute">
+ <span class="adef">y</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeCoordinate"><coordinate></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'x'</a>.
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of zero were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="PatternElementWidthAttribute">
+ <span class="adef">width</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeLength"><length></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'x'</a>.
+ </p>
+ <p>
+ A negative value is an error (see <a href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element (i.e., no
+ paint is applied).
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of zero were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="PatternElementHeightAttribute">
+ <span class="adef">height</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeLength"><length></a></span>"
+ </dt>
+ <dd>
+ <p>
+ See <a>'x'</a>.
+ </p>
+ <p>
+ A negative value is an error (see <a href="implnote.html#ErrorProcessing">Error processing</a>).
+ A value of zero disables rendering of the element (i.e., no
+ paint is applied).
+ </p>
+ <p>
+ If the attribute is not specified, the effect is as if a
+ value of zero were specified.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
+ <dt id="PatternElementHrefAttribute">
+ <span class="adef">xlink:href</span> =
+ "<span class="attr-value"><a href="types.html#DataTypeIRI"><iri></a></span>"
+ </dt>
+ <dd>
+ <p>
+ An <a href="linking.html#IRIReference">IRI
+ reference</a> to a different <a>'pattern'</a> 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 <a>'xlink:href'</a>
+ 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 <a>'xlink:href'</a> attribute, then the current
+ element can inherit those attributes or children.
+ </p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>:
+ yes.</span>
+ </p>
+ </dd>
<dt id="PatternElementPreserveAspectRatioAttribute">
- <span class="adef">preserveAspectRatio</span> = "<span class='attr-value'><a href="coords.html#PreserveAspectRatioAttribute">[defer] <align> [<meetOrSlice>]</a></span>"
+ <span class="adef">preserveAspectRatio</span> =
+ "<span class='attr-value'><a href="coords.html#PreserveAspectRatioAttribute">[defer] <align> [<meetOrSlice>]</a></span>"
</dt>
<dd>
<p>
See <a>'preserveAspectRatio'</a>.
</p>
<p>
- If the attribute is not specified, then the effect is as if a value of <span class="attr-value">xMidYMid meet</span> were specified.
+ If the attribute is not specified, then the effect is as
+ if a value of <span class="attr-value">xMidYMid
+ meet</span> were specified.
</p>
- <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
+ <p>
+ <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span>
+ </p>
</dd>
</dl>
</div>
@@ -870,11 +1551,13 @@
<a>'pattern'</a> element, and <var>y</var> is established by the <a>'y'</a>
attribute on the <a>'pattern'</a> element. Thus, in the following example:</p>
+<div class="example">
<pre>
<pattern x="10" y="10" width="20" height="20">
<rect x="5" y="5" width="10" height="10"/>
</pattern>
</pre>
+</div>
<p>the rectangle has its top/left located 5 units to the right and 5
units down from the origin of the pattern tile.</p>
@@ -905,7 +1588,7 @@
<p id="ExamplePattern01"><span class="example-ref">Example pattern01</span>
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.
+the blue stroke of each triangle has been slightly clipped at the top and the left.
This is due to SVG's <a href="styling.html#UAStyleSheet">user agent style sheet</a>
setting the <a>'overflow'</a> property for <a>'pattern'</a> elements to
<span class="prop-value">hidden</span>, which causes the pattern to be clipped
@@ -933,6 +1616,12 @@
<edit:interface name='::svg::SVGRadialGradientElement'/>
</edit:with>
+<h3 id="InterfaceSVGMeshGradientElement">Interface SVGMeshGradientElement</h3>
+
+<edit:with element='meshGradient'>
+<edit:interface name='::svg::SVGMeshGradientElement'/>
+</edit:with>
+
<h3 id="InterfaceSVGStopElement">Interface SVGStopElement</h3>
<edit:with element='stop'>