--- a/master/pservers.html Mon Nov 21 14:36:17 2011 +0100
+++ b/master/pservers.html Mon Nov 21 14:49:57 2011 +0100
@@ -12,23 +12,25 @@
</head>
<body>
-<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>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>
+<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>
+<p>
+ SVG defines three types of paint servers:
+</p>
<ul>
<li><a href="#SolidColors">Solid colors</a>,</li>
@@ -36,9 +38,33 @@
<li><a href="#Patterns">Patterns</a>.</li>
</ul>
-<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 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 class="issue">
+ Hatch fills (required for mapping, engraving, etc.) approved. Is
+ this to be implemented as a paint server?
+ <a href="http://www.w3.org/2011/10/28-svg-irc#T18-17-51">Pre-TPAC
+ meeting</a>.
+ Issue <a href="http://www.w3.org/Graphics/SVG/WG/track/issues/2372">2372</a>.
+</p>
+
+<p class="issue">
+ Arbitrary fill (video elements, etc.) approved as additional paint server at
+ <a href="http://www.w3.org/2011/10/28-svg-irc#T18-32-52">Pre-TPAC meeting</a>.
+ Issue <a href="http://www.w3.org/Graphics/SVG/WG/track/issues/2371">2371</a>.
+</p>
+
+<p class="issue">
+ It seems that all paint servers (except perhaps, mesh gradients,
+ when rendered directly) inherit from their ancestors and do not
+ inherit from the element referencing the paint server. Rather than
+ repeating this for each type of paint server, can the text be moved
+ into the introduction section for paint servers?
+</p>
<div class="figure">
<img
@@ -51,9 +77,11 @@
</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>
+<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>
@@ -62,119 +90,112 @@
<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.
+<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>
+ (See the chapter <a href="color.html">Color</a> for a more general
+ discussion of color in SVG.)
+</p>
+<p>
+ <a href="styling.html#SVGStylingProperties">Properties</a> inherit
+ into the <a>'solidColor'</a> element from its ancestors;
+ properties do <em>not</em> inherit from the element referencing
+ the <a>'solidColor'</a> element.
+</p>
+<p>
+ <a>'solidColor'</a> elements are never rendered directly;
+ their only usage is as something that can be referenced using the
+ <a>'fill'</a> and <a>'stroke'</a> properties. The <a>'display'</a>
+ property does not apply to the <a>'solidColor'</a> element; thus,
+ <a>'solidColor'</a> elements are not directly rendered even if
+ the <a>'display'</a> property is set to a value other than
+ <span class="prop-value">none</span>, and <a>'solidColor'</a>
+ elements are available for referencing even when the <a>'display'</a>
+ property on the <a>'solidColor'</a> element or any of its ancestors
+ is set to <span class="prop-value">none</span>.
+</p>
<edit:with element='solidColor'>
- <p id="SolidColorElement">Solid colors are defined by a
- <a>'solidColor'</a> element.</p>
+ <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>
+ <h3 id="SolidColorProperties">Properties</h3>
- <div class="propdef">
- <dl>
- <dt id="SolidColorProperty"><span class="propdef-title prop-name">'solid-color'</span></dt>
+ <dl class="propdef-list-svg2">
+
+ <dt id="SolidColorProperty"><span class="propdef-title prop-name">'solid-color'</span></dt>
+ <dd>
+
+ <p>
+ The <a>'solid-color'</a> property specifies the color of
+ the <a>'solidColor'</a>. 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>
+
+ <dl class="propdef-svg2">
+ <dt>Value</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>
+ currentColor |
+ <a><color></a> <a><icccolor></a> |
+ <a class="noxref">inherit</a>
+ </dd>
+ <dt>Initial</dt> <dd>black</dd>
+ <dt>Applies to</dt> <dd><a>'solid-color'</a> elements</dd>
+ <dt>Inherited</dt> <dd>no</dd>
+ <dt>Percentages</dt> <dd>N/A</dd>
+ <dt>Media</dt> <dd>visual</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
</dl>
- </div>
+ </dd>
- <p>
- The <a>'solid-opacity'</a> property defines the opacity of the <a>'solidColor'</a>.
- </p>
+ <dt id="SolidOpacityProperty"><span class="propdef-title prop-name">'solid-opacity'</span></dt>
+ <dd>
- <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>
+ <p>
+ The <a>'solid-opacity'</a> property defines the opacity of
+ the <a>'solidColor'</a>.
+ </p>
+
+ <dl class="propdef-svg2">
+ <dt>Value</dt> <dd><opacity-value> | <a class="noxref">inherit</a></dd>
+ <dt>Initial</dt> <dd>1</dd>
+ <dt>Applies to</dt> <dd><a>'solid-color'</a> elements</dd>
+ <dt>Inherited</dt> <dd>no</dd>
+ <dt>Percentages</dt> <dd>N/A</dd>
+ <dt>Media</dt> <dd>visual</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
</dl>
- </div>
+
+ <dl class="propdef-values">
+ <dt><opacity-value></dt>
+ <dd>
+ The opacity of the 'solidColor'. Any values outside the
+ range 0.0 (fully transparent) to 1.0 (fully opaque) must be
+ clamped to this range. The value of 'solid-opacity' is
+ independent of the opacity used to render the paint via
+ <a>'fill'</a> or <a>'stroke'</a>.
+ </dd>
+ </dl>
+
+ </dd>
+
+ </dl><!-- propdef-list -->
+
+ <edit:example href='images/pservers/solidcolor.svg' name='solidcolor.svg'
+ description='fill objects using a solidColor paint server'
+ image='yes' link='yes'/>
</edit:with>
@@ -226,7 +247,8 @@
<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
+ <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>
@@ -239,16 +261,16 @@
<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 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>
@@ -263,280 +285,306 @@
<edit:with element='linearGradient'>
-<p id="LinearGradientElement">Linear gradients are defined by a
-<a>'linearGradient'</a> element.</p>
-
-<edit:elementsummary name='linearGradient'/>
+ <p id="LinearGradientElement">
+ Linear gradients are defined by a <a>'linearGradient'</a> element.
+ </p>
- <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>
+ <edit:elementsummary name='linearGradient'/>
+
+ <h4 id="LinearGradientAttributes">Attributes</h4>
+
+ <dl class="attrdef-list-svg2">
+
+ <dt id="LinearGradientElementGradientUnitsAttribute"><span class="adef">gradientUnits</span></dt>
+ <dd>
+
+ <p>
+ Defines the coordinate system for attributes <a>'x1'</a>,
+ <a>'y1'</a>, <a>'x2'</a> and <a>'y2'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+
+ <dt>Value</dt> <dd>userSpaceOnUse | objectBoundingBox</dd>
+ <dt><a>Lacuna value</a></dt> <dd>objectBoundingBox</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+
+ </dl>
+
+ <dl class="attrdef-values">
+
+ <dt>userSpaceOnUse</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>
+
+ <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>.
+ attribute <a>'gradientTransform'</a>. Percentages
+ represent values relative to the current viewport.
</p>
+ </dd>
+
+ <dt>objectBoundingBox</dt>
+ <dd>
<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
+
+ <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>.
+ Percentages represent values relative to the bounding box
+ for the object.
</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>
+ 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>
</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>
+
+ </dl><!-- Attribute values -->
+
+ </dd>
+
+ <dt id="LinearGradientElementGradientTransformAttribute">
+ <span class="adef">gradientTransform</span>
+ </dt>
+ <dd>
+
+ <p>
+ Contains the definition of an optional additional
+ transformation from the gradient 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 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>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><transform-list></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>identity transform</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="LinearGradientElementX1Attribute"><span class="adef">x1</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>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><coordinate></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0%</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="LinearGradientElementY1Attribute"><span class="adef">y1</span></dt>
+ <dd>
+
+ <p>
+ See <a>'x1'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><coordinate></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0%</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="LinearGradientElementX2Attribute"><span class="adef">x2</span></dt>
+ <dd>
+
+ <p>
+ See <a>'x1'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><coordinate></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>100%</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+ </dd>
+
+ <dt id="LinearGradientElementY2Attribute"><span class="adef">y2</span></dt>
+ <dd>
+
+ <p>
+ See <a>'x1'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><coordinate></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>100%</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+ <p class="issue">SVG 1.1 2nd edition has lacuna value="0%".</p>
+ </dd>
+
+ <dt id="LinearGradientElementSpreadMethodAttribute">
+ <span class="adef">spreadMethod</span>
+ </dt>
+ <dd>
+ <p>
+ Indicates what happens if the gradient starts or ends
+ inside the bounds of the <em>target rectangle</em>.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd>pad | reflect | repeat</dd>
+ <dt><a>Lacuna value</a></dt> <dd>pad</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ <dl class="attrdef-values">
+
+ <dt>pad</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>
+ Use the terminal colors of the gradient to fill the
+ remainder of the target region.
</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>
-<p>Percentages are allowed for <a>'x1'</a>,
-<a>'y1'</a>, <a>'x2'</a> and <a>'y2'</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 <a>'x1'</a> = <a>'x2'</a> and <a>'y1'</a> =
-<a>'y2'</a>, then the area to be painted will be painted as
-a single color using the color and opacity of the last
-<a href="pservers.html#GradientStops">gradient stop</a>.</p>
+ <dt>reflect</dt>
+ <dd>
+ Reflect the gradient pattern start-to-end, end-to-start,
+ start-to-end, etc. continuously until the <em>target
+ rectangle</em> is filled.
+ </dd>
-<p><a href="styling.html#SVGStylingProperties">Properties</a> inherit
-into the <a>'linearGradient'</a> element from its ancestors;
-properties do <em>not</em> inherit from the element referencing the
-<a>'linearGradient'</a> element.</p>
+ <dt>repeat</dt>
+ <dd>
+ Repeat the gradient pattern start-to-end, start-to-end,
+ start-to-end, etc. continuously until the target region is
+ filled.
+ </dd>
-<p><a>'linearGradient'</a> elements are never rendered directly;
-their only usage is as something that can be referenced using the
-<a>'fill'</a> and <a>'stroke'</a> properties. The <a>'display'</a>
-property does not apply to the <a>'linearGradient'</a> element; thus,
-<a>'linearGradient'</a> elements are not directly rendered even if
-the <a>'display'</a> property is set to a value other than
-<span class="prop-value">none</span>, and <a>'linearGradient'</a>
-elements are available for referencing even when the <a>'display'</a>
-property on the <a>'linearGradient'</a> element or any of its ancestors
-is set to <span class="prop-value">none</span>.</p>
+ </dl>
-<p id="ExampleLinGrad01"><span class="example-ref">Example lingrad01</span>
-shows how to fill a rectangle by referencing a linear gradient paint
-server.</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>
-<edit:example href='images/pservers/lingrad01.svg' name='lingrad01' description='fill a rectangle using a linear gradient paint server' image='yes' link='yes'/>
+ <dt id="LinearGradientElementHrefAttribute">
+ <span class="adef">xlink:href</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>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><iri></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>empty</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+ </dl>
+
+ <h4 id="LinearGradientNotes">Some notes on linear gradients</h4>
+
+ <p>
+ If <a>'x1'</a> = <a>'x2'</a> and <a>'y1'</a> =
+ <a>'y2'</a>, then the area to be painted will be painted as a
+ single color using the color and opacity of the last
+ <a href="pservers.html#GradientStops">gradient stop</a>.
+ </p>
+ <p>
+ <a href="styling.html#SVGStylingProperties">Properties</a> inherit
+ into the <a>'linearGradient'</a> element from its ancestors;
+ properties do <em>not</em> inherit from the element referencing
+ the <a>'linearGradient'</a> element.
+ </p>
+ <p>
+ <a>'linearGradient'</a> elements are never rendered directly;
+ their only usage is as something that can be referenced using the
+ <a>'fill'</a> and <a>'stroke'</a> properties. The <a>'display'</a>
+ property does not apply to the <a>'linearGradient'</a> element; thus,
+ <a>'linearGradient'</a> elements are not directly rendered even if
+ the <a>'display'</a> property is set to a value other than
+ <span class="prop-value">none</span>, and <a>'linearGradient'</a>
+ elements are available for referencing even when the <a>'display'</a>
+ property on the <a>'linearGradient'</a> element or any of its ancestors
+ is set to <span class="prop-value">none</span>.
+ </p>
+
+ <p id="ExampleLinGrad01">
+ <span class="example-ref">Example lingrad01</span>
+ shows how to fill a rectangle by referencing a linear gradient paint
+ server.
+ </p>
+
+ <edit:example href='images/pservers/lingrad01.svg' name='lingrad01'
+ description='Fill a rectangle by referencing a linear gradient paint server'
+ image='yes' link='yes'/>
</edit:with>
@@ -544,44 +592,72 @@
<edit:with element='radialGradient'>
-<p id="RadialGradientElement">Radial gradients are defined by a
-<a>'radialGradient'</a> element.</p>
-
-<edit:elementsummary name='radialGradient'/>
+ <p id="RadialGradientElement">
+ Radial gradients are defined by a <a>'radialGradient'</a> element.
+ </p>
- <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>
+ <edit:elementsummary name='radialGradient'/>
+
+ <h4 id="RadialGradientAttributes">Attributes</h4>
+
+ <dl class="attrdef-list-svg2">
+
+ <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>
+
+ <dl class="attrdef-svg2">
+
+<!-- <dt>Value</dt> <dd>userSpaceOnUse | objectBoundingBox</dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>objectBoundingBox</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+
+ </dl>
+
+ <dl class="attrdef-values">
+
+ <dt>userSpaceOnUse</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>.
+ 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>. Percentages
+ represent values relative to the current viewport.
</p>
+ </dd>
+
+ <dt>objectBoundingBox</dt>
+ <dd>
<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
+ 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>.
+ Percentages represent values relative to the bounding box
+ for the object.
</p>
<p>
When <span class="attr-value">gradientUnits="objectBoundingBox"</span>
@@ -597,336 +673,359 @@
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>
+ </dl><!-- Attribute values -->
- </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>
+ </dd>
+
+ <dt id="RadialGradientElementGradientTransformAttribute">
+ <span class="adef">gradientTransform</span> =
+ "<span class="attr-value"><a><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., <span class='attr-value'>'userSpaceOnUse'</span> or
+ <span class='attr-value'>'objectBoundingBox'</span>).
+
+ 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>
+
+ <dl class="attrdef-svg2">
+<!-- <dt>Value</dt> <dd><a><transform-list></a></dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>identity transform</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
</dl>
- </div>
-<div class="annotation">
+ </dd>
+
+ <dt id="RadialGradientElementCXAttribute">
+ <span class="adef">cx</span> =
+ "<span class="attr-value"><a><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>
+
+ <dl class="attrdef-svg2">
+<!-- <dt>Value</dt> <dd><a><coordinate></a></dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>50%</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="RadialGradientElementCYAttribute">
+ <span class="adef">cy</span> =
+ "<span class="attr-value"><a><coordinate></a></span>"
+ </dt>
+ <dd>
+
+ <p>
+ See <a>'cx'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+<!-- <dt>Value</dt> <dd><a><coordinate></a></dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>50%</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="RadialGradientElementRAttribute">
+ <span class="adef">r</span> =
+ "<span class="attr-value"><a><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>
+
+ <dl class="attrdef-svg2">
+<!-- <dt>Value</dt> <dd><a><length></a></dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>50%</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="RadialGradientElementFXAttribute">
+ <span class="adef">fx</span> =
+ "<span class="attr-value"><a><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>
+
+ <dl class="attrdef-svg2">
+<!-- <dt>Value</dt> <dd><a><length></a></dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>see below</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ <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>
+
+ <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><coordinate></a></span>"
+ </dt>
+ <dd>
+
+ <p>
+ See <a>'fx'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+<!-- <dt>Value</dt> <dd><a><length></a></dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>see below</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ <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>
+ </dd>
+
+ <dt id="RadialGradientElementFRAttribute">
+ <span class="adef">fr</span> =
+ "<span class="attr-value"><a><length></a></span>"
+ </dt>
+ <dd>
+
+ <p class="note">New in SVG 2. Added to align with Canvas.</p>
+
+ <p>
+ <a>'fr'</a> is the radius of the focal circle. See <a>'fx'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+<!-- <dt>Value</dt> <dd><a><length></a></dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>0%, see below</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ <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>
+
+ <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>'linearGradient/spreadMethod'</a>
+ attribute on <a>'linearGradient'</a> element.
+ </p>
+
+ <dl class="attrdef-svg2">
+<!-- <dt>Value</dt> <dd>pad | reflect | repeat</dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>pad</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+ </dd>
+
+ <dt id="RadialGradientElementHrefAttribute">
+ <span class="adef">xlink:href</span> =
+ "<span class="attr-value"><a><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>
+
+ <dl class="attrdef-svg2">
+<!-- <dt>Value</dt> <dd><a><iri></a></dd> -->
+ <dt><a>Lacuna value</a></dt> <dd>empty</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+ </dl>
+
+ <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>
+
+ <h4 id="RadialGradientNotes">Some notes on radial gradients</h4>
+
<p>
- Resolution: Radial gradients with focal point on the circle.
+ 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
+ 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>
+
+ <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;
+ properties do <em>not</em> inherit from the element referencing the
+ <a>'radialGradient'</a> element.
</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.
+ <a>'radialGradient'</a> elements are never rendered directly;
+ their only usage is as something that can be referenced using the
+ <a>'fill'</a> and <a>'stroke'</a> properties. The <a>'display'</a>
+ property does not apply to the <a>'radialGradient'</a> element; thus,
+ <a>'radialGradient'</a> elements are not directly rendered even if
+ the <a>'display'</a> property is set to a value other than
+ <span class="prop-value">none</span>, and <a>'radialGradient'</a> elements
+ are available for referencing even when the <a>'display'</a> property on
+ the <a>'radialGradient'</a> element or any of its ancestors is set to
+ <span class="prop-value">none</span>.
</p>
-</div>
-
-
-<p>Percentages are allowed for attributes <a>'cx'</a>, <a>'cy'</a>,
-<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
-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>
-
-<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 id="ExampleRadGrad01">
+ <span class="example-ref">Example radgrad01</span>
+ shows how to fill a rectangle by referencing a radial gradient paint
+ server.
</p>
-</div>
-<p><a href="styling.html#SVGStylingProperties">Properties</a>
-inherit into the <a>'radialGradient'</a> element from its ancestors;
-properties do <em>not</em> inherit from the element referencing the
-<a>'radialGradient'</a> element.</p>
-
-<p><a>'radialGradient'</a> elements are never rendered directly;
-their only usage is as something that can be referenced using the
-<a>'fill'</a> and <a>'stroke'</a> properties. The <a>'display'</a>
-property does not apply to the <a>'radialGradient'</a> element; thus,
-<a>'radialGradient'</a> elements are not directly rendered even if
-the <a>'display'</a> property is set to a value other than
-<span class="prop-value">none</span>, and <a>'radialGradient'</a> elements
-are available for referencing even when the <a>'display'</a> property on
-the <a>'radialGradient'</a> element or any of its ancestors is set to
-<span class="prop-value">none</span>.</p>
-
-<p id="ExampleRadGrad01"><span class="example-ref">Example radgrad01</span>
-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>
@@ -1059,11 +1158,16 @@
<edit:elementsummary name='meshGradient'/>
+</edit:with>
+<edit:with element='meshRow'>
+
<edit:elementsummary name='meshRow'/>
+</edit:with>
+<edit:with element='meshPatch'>
+
<edit:elementsummary name='meshPatch'/>
-
</edit:with>
<h3 id="GradientStops">Gradient stops</h3>
@@ -1082,183 +1186,160 @@
used nowhere else in this section.
</p>
-<edit:elementsummary name='stop'/>
+ <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>
+ <h4 id="GradientStopAttributes">Attributes</h4>
+
+ <dl class="attrdef-list-svg2">
+
+ <dt id="StopElementOffsetAttribute">
+ <span class="adef">offset</span>
+ </dt>
+ <dd>
+
+ <p>
+ Indicates were 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 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.
+ </p>
+
+ <dl class="attrdef-svg2">
+
+ <dt>Value</dt> <dd><a><number></a> | <a><percentage></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>see notes below</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+
+ </dl>
+
+ <dl class="attrdef-values">
+
+ <dt><a><number></a></dt>
+ <dd>A number usually ranging from 0 to 1.</dd>
+
+ <dt><a><percentage></a></dt>
+ <dd>A percentage usually ranging from 0% to 100%.</dd>
+
+ </dl>
+
+ </dd>
+ </dl>
+
+ <h4 id="StopColorProperties">Properties</h4>
+
+ <dl class="propdef-list-svg2">
+
+ <dt id="StopColorProperty"><span class="propdef-title prop-name">'stop-color'</span></dt>
+ <dd>
+
+ <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>
+
+ <dl class="propdef-svg2">
+ <dt>Value</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>
+ currentColor |
+ <a><color></a> <a><icccolor></a> |
+ <a class="noxref">inherit</a>
+ </dd>
+ <dt>Initial</dt> <dd>black</dd>
+ <dt>Applies to</dt> <dd><a>'stop'</a> elements</dd>
+ <dt>Inherited</dt> <dd>no</dd>
+ <dt>Percentages</dt> <dd>N/A</dd>
+ <dt>Media</dt> <dd>visual</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+ </dd>
+
+ <dt id="StopOpacityProperty"><span class="propdef-title prop-name">'stop-opacity'</span></dt>
+ <dd>
+
+ <p>
+ The <a>'stop-opacity'</a> property defines the opacity of
+ a given gradient stop.
+ </p>
+
+ <dl class="propdef-svg2">
+ <dt>Value</dt> <dd><opacity-value> | <a class="noxref">inherit</a></dd>
+ <dt>Initial</dt> <dd>1</dd>
+ <dt>Applies to</dt> <dd><a>'stop'</a> elements</dd>
+ <dt>Inherited</dt> <dd>no</dd>
+ <dt>Percentages</dt> <dd>N/A</dd>
+ <dt>Media</dt> <dd>visual</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ <dl class="propdef-values">
+ <dt><opacity-value></dt>
+ <dd>
+ The opacity of the 'stopColor'. Any values outside the
+ range 0.0 (fully transparent) to 1.0 (fully opaque) must be
+ clamped to this range. The value of 'stop-opacity' is
+ independent of the opacity used to render the paint via
+ <a>'fill'</a> or <a>'stroke'</a>.
</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>
-
- <div class="propdef">
- <dl>
- <dt id="StopColorProperty"><span class="propdef-title prop-name">'stop-color'</span></dt>
- <dd>
- <table summary="stop-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>'stop'</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>'stop-opacity'</a> property defines the opacity of a given
-gradient stop.</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>'stop'</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>
+ </dd>
-<p>Some notes on gradients:</p>
-
-<ul>
- <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>
+ </dl><!-- propdef-list -->
- <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>
+ <h4 id="StopNotes">Some notes on gradient stops</h4>
- <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>
+ <ul>
+ <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
+ overlap point. In particular:
- <li>
- If two gradient stops have the same offset value, then the
- latter gradient stop controls the color value at the
- overlap point. In particular:
-<pre>
+ <pre>
<stop offset="0" stop-color="white"/>
<stop offset=".2" stop-color="red"/>
<stop offset=".2" stop-color="blue"/>
<stop offset="1" stop-color="black"/>
</pre>
- will have approximately the same effect as:
-<pre>
+ will have approximately the same effect as:
+ <pre>
<stop offset="0" stop-color="white"/>
<stop offset=".1999999999" stop-color="red"/>
<stop offset=".2" stop-color="blue"/>
<stop offset="1" stop-color="black"/>
</pre>
- which is a gradient that goes smoothly from white to red,
- then abruptly shifts from red to blue, and then goes
- smoothly from blue to black.
- </li>
+ which is a gradient that goes smoothly from white to red,
+ then abruptly shifts from red to blue, and then goes
+ smoothly from blue to black.
+ </li>
-</ul>
+ </ul>
</edit:with>
@@ -1273,9 +1354,8 @@
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.
+ given <a>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>
@@ -1291,310 +1371,362 @@
and <em>n</em>.
</p>
-<edit:elementsummary name='pattern'/>
+ <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>
+ <h3 id="PatternElementAttributes">Attributes</h3>
+
+ <dl class="attrdef-list-svg2">
+
+ <dt id="PatternElementPatternUnitsAttribute"><span class="adef">patternUnits</span></dt>
+ <dd>
+
+ <p>
+ Defines the coordinate system for attributes
+ <a>'x'</a>, <a>'y'</a>, <a>'width'</a> and <a>'height'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+
+ <dt>Value</dt> <dd>userSpaceOnUse | objectBoundingBox</dd>
+ <dt><a>Lacuna value</a></dt> <dd>objectBoundingBox</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+
+ </dl>
+
+ <dl class="attrdef-values">
+
+ <dt>userSpaceOnUse</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>.
+ applying the transform specified by attribute
+ <a>'patternTransform'</a>. Percentages
+ represent values relative to the current viewport.
</p>
+ </dd>
+
+ <dt>objectBoundingBox</dt>
+ <dd>
<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>
+ Percentages represent values relative to the bounding box
+ for the object.
</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>
+
+ </dl><!-- Attribute values -->
+
+ </dd>
+
+ <dt id="PatternElementPatternContentUnitsAttribute">
+ <span class="adef">patternContentUnits</span>
+ </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>
+
+ <dl class="attrdef-svg2">
+
+ <dt>Value</dt> <dd>userSpaceOnUse | objectBoundingBox</dd>
+ <dt><a>Lacuna value</a></dt> <dd>userSpaceOnUse</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+
+ </dl>
+
+ <dl class="attrdef-values">
+
+ <dt>userSpaceOnUse</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>
+ 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>
</dd>
- <dt id="PatternElementPreserveAspectRatioAttribute">
- <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.
- </p>
- <p>
- <span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span>
- </p>
- </dd>
- </dl>
- </div>
-
-<p>SVG's <a href="styling.html#UAStyleSheet">user agent style sheet</a> sets
-the <a>'overflow'</a> property for <a>'pattern'</a> elements to
-<span class="prop-value">hidden</span>, which causes a rectangular clipping
-path to be created at the bounds of the pattern tile. Unless the
-<a>'overflow'</a> property is overridden, any graphics within the pattern
-which goes outside of the pattern rectangle will be clipped. Note that if
-the <a>'overflow'</a> property is set to <span class="prop-value">visible</span>
-the rendering behavior for the pattern is undefined.
-<a href="pservers.html#ExamplePattern01">Example pattern01</a> below shows the
-effect of clipping to the pattern tile.</p>
-
-<p>The contents of the <a>'pattern'</a> are relative to a new coordinate
-system. If there is a <a>'viewBox'</a> attribute, then the new coordinate
-system is fitted into the region defined by the <a>'x'</a>, <a>'y'</a>,
-<a>'width'</a>, <a>'height'</a> and <a>'patternUnits'</a> attributes on the
-<a>'pattern'</a> element using the standard rules for <a>'viewBox'</a> and
-<a>'preserveAspectRatio'</a>. If there is no <a>'viewBox'</a> attribute, then
-the new coordinate system has its origin at (<var>x</var>, <var>y</var>),
-where <var>x</var> is established by the <a>'x'</a> attribute on the
-<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>
-
-<p>The <a>'viewBox'</a> attribute introduces a supplemental transformation
-which is applied on top of any transformations necessary to create a new
-pattern coordinate system due to attributes <a>'x'</a>, <a>'y'</a>,
-<a>'width'</a>, <a>'height'</a> and <a>'patternUnits'</a>.</p>
-
-<p><a href="styling.html#SVGStylingProperties">Properties</a> inherit into the
-<a>'pattern'</a> element from its ancestors; properties do <em>not</em>
-inherit from the element referencing the <a>'pattern'</a> element.</p>
+ <dt>objectBoundingBox</dt>
+ <dd>
+ <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>
+ </dd>
-<p><a>'pattern'</a> elements are never rendered directly; their only usage is
-as something that can be referenced using the <a>'fill'</a> and
-<a>'stroke'</a> properties. The <a>'display'</a> property does not apply to
-the <a>'pattern'</a> element; thus, <a>'pattern'</a> elements are not directly
-rendered even if the <a>'display'</a> property is set to a value other than
-<span class="prop-value">none</span>, and <a>'pattern'</a> elements are
-available for referencing even when the <a>'display'</a> property on the
-<a>'pattern'</a> element or any of its ancestors is set to
-<span class="prop-value">none</span>.</p>
+ </dl><!-- Attribute values -->
-<p><a href="script.html#EventAttributes">Event attributes</a> and
-<a href="svgdom.html#EventListeners">event listeners</a> attached to the
-contents of a <a>'pattern'</a> element are not processed; only the rendering
-aspects of <a>'pattern'</a> elements are processed.</p>
+ </dd>
-<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 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
-to the bounds of the pattern tile.</p>
+ <dt id="PatternElementPatternTransformAttribute">
+ <span class="adef">patternTransform</span>
+ </dt>
+ <dd>
-<edit:example href='images/pservers/pattern01.svg' name='pattern01' description='fill a rectangle by referencing a pattern paint server' image='yes' link='yes'/>
+ <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>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><transform-list></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>identity transform</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="PatternElementXAttribute"><span class="adef">x</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>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><coordinate></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="PatternElementYAttribute"><span class="adef">y</span></dt>
+ <dd>
+
+ <p>
+ See <a>'x'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><coordinate></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="PatternElementWidthAttribute"><span class="adef">width</span></dt>
+ <dd>
+
+ <p>
+ See <a>'x'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><coordinate></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ <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>
+
+ </dd>
+
+ <dt id="PatternElementHeightAttribute"><span class="adef">height</span></dt>
+ <dd>
+
+ <p>
+ See <a>'x'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><coordinate></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>0</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ <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>
+
+ </dd>
+
+ <dt id="PatternElementHrefAttribute"><span class="adef">xlink:href</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>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt> <dd><a><iri></a></dd>
+ <dt><a>Lacuna value</a></dt> <dd>empty</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+
+ <dt id="PatternElementPreserveAspectRatioAttribute"><span class="adef">preserveAspectRatio</span></dt>
+ <dd>
+
+ <p>
+ See <a>'preserveAspectRatio'</a>.
+ </p>
+
+ <dl class="attrdef-svg2">
+ <dt>Value</dt>
+ <dd>
+ <a href="coords.html#PreserveAspectRatioAttribute">[defer] <align>
+ [<meetOrSlice>]</a>
+ </dd>
+ <dt><a>Lacuna value</a></dt> <dd>xMidYMid meet</dd>
+ <dt><a>Animatable</a></dt> <dd>yes</dd>
+ </dl>
+
+ </dd>
+ </dl>
+
+ <h3 id="PatternNotes">Some notes on patterns</h3>
+
+ <p>
+ SVG's <a href="styling.html#UAStyleSheet">user agent style sheet</a> sets
+ the <a>'overflow'</a> property for <a>'pattern'</a> elements to
+ <span class="prop-value">hidden</span>, which causes a rectangular clipping
+ path to be created at the bounds of the pattern tile. Unless the
+ <a>'overflow'</a> property is overridden, any graphics within the pattern
+ which goes outside of the pattern rectangle will be clipped. Note that if
+ the <a>'overflow'</a> property is set to <span class="prop-value">visible</span>
+ the rendering behavior for the pattern is undefined.
+ <a href="pservers.html#ExamplePattern01">Example pattern01</a> below shows the
+ effect of clipping to the pattern tile.
+ </p>
+ <p>
+ The contents of the <a>'pattern'</a> are relative to a new coordinate
+ system. If there is a <a>'viewBox'</a> attribute, then the new coordinate
+ system is fitted into the region defined by the <a>'x'</a>, <a>'y'</a>,
+ <a>'width'</a>, <a>'height'</a> and <a>'patternUnits'</a> attributes on the
+ <a>'pattern'</a> element using the standard rules for <a>'viewBox'</a> and
+ <a>'preserveAspectRatio'</a>. If there is no <a>'viewBox'</a> attribute, then
+ the new coordinate system has its origin at (<var>x</var>, <var>y</var>),
+ where <var>x</var> is established by the <a>'x'</a> attribute on the
+ <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>
+ <p>
+ The <a>'viewBox'</a> attribute introduces a supplemental transformation
+ which is applied on top of any transformations necessary to create a new
+ pattern coordinate system due to attributes <a>'x'</a>, <a>'y'</a>,
+ <a>'width'</a>, <a>'height'</a> and <a>'patternUnits'</a>.
+ </p>
+ <p>
+ <a href="styling.html#SVGStylingProperties">Properties</a> inherit into the
+ <a>'pattern'</a> element from its ancestors; properties do <em>not</em>
+ inherit from the element referencing the <a>'pattern'</a> element.
+ </p>
+ <p>
+ <a>'pattern'</a> elements are never rendered directly; their only
+ usage is as something that can be referenced using the <a>'fill'</a>
+ and
+ <a>'stroke'</a> properties. The <a>'display'</a> property does not
+ apply to the <a>'pattern'</a> element; thus, <a>'pattern'</a> elements
+ are not directly rendered even if the <a>'display'</a> property is set
+ to a value other than
+ <span class="prop-value">none</span>, and <a>'pattern'</a> elements are
+ available for referencing even when the <a>'display'</a> property on the
+ <a>'pattern'</a> element or any of its ancestors is set to
+ <span class="prop-value">none</span>.
+ </p>
+ <p>
+ <a href="script.html#EventAttributes">Event attributes</a> and
+ <a href="svgdom.html#EventListeners">event listeners</a> attached
+ to the contents of a <a>'pattern'</a> element are not processed;
+ only the rendering aspects of <a>'pattern'</a> elements are
+ processed.
+ </p>
+ <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 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
+ to the bounds of the pattern tile.
+ </p>
+
+ <edit:example href='images/pservers/pattern01.svg' name='pattern01'
+ description='fill a rectangle by referencing a pattern paint server' image='yes' link='yes'/>
</edit:with>
@@ -1607,31 +1739,31 @@
<h3 id="InterfaceSVGLinearGradientElement">Interface SVGLinearGradientElement</h3>
<edit:with element='linearGradient'>
-<edit:interface name='::svg::SVGLinearGradientElement'/>
+ <edit:interface name='::svg::SVGLinearGradientElement'/>
</edit:with>
<h3 id="InterfaceSVGRadialGradientElement">Interface SVGRadialGradientElement</h3>
<edit:with element='radialGradient'>
-<edit:interface name='::svg::SVGRadialGradientElement'/>
+ <edit:interface name='::svg::SVGRadialGradientElement'/>
</edit:with>
<h3 id="InterfaceSVGMeshGradientElement">Interface SVGMeshGradientElement</h3>
<edit:with element='meshGradient'>
-<edit:interface name='::svg::SVGMeshGradientElement'/>
+ <edit:interface name='::svg::SVGMeshGradientElement'/>
</edit:with>
<h3 id="InterfaceSVGStopElement">Interface SVGStopElement</h3>
<edit:with element='stop'>
-<edit:interface name='::svg::SVGStopElement'/>
+ <edit:interface name='::svg::SVGStopElement'/>
</edit:with>
<h3 id="InterfaceSVGPatternElement">Interface SVGPatternElement</h3>
<edit:with element='pattern'>
-<edit:interface name='::svg::SVGPatternElement'/>
+ <edit:interface name='::svg::SVGPatternElement'/>
</edit:with>
</body>