--- a/master/pservers.html Thu May 17 12:30:33 2012 +1000
+++ b/master/pservers.html Thu May 17 13:08:45 2012 +1000
@@ -26,7 +26,7 @@
</p>
<!-- Fill and stroke are already defined in painting.html. No need to
-redefine them here." -->
+redefine them here. -->
<p>
SVG defines three types of paint servers:
@@ -45,41 +45,21 @@
</p>
<div class="annotation">
- <p>
- SVG2 Requirement: Support hatching without the artifacts that patterns currently impose.
- </p>
- <p>
- Resolution: SVG2 should support hatching without the artifacts that patterns currently impose.
- </p>
- <p>
- <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>
- Purpose: Hatchings (required for mapping, engraving, etc.) approved:
- </p>
- <p>
- Owner: Tav
- </p>
+ <p>SVG2 Requirement: Support hatching without the artifacts that patterns currently impose.</p>
+ <p>Resolution: SVG2 should support hatching without the artifacts that patterns currently impose.</p>
+ <p><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>Purpose: Hatchings (required for mapping, engraving, etc.) approved.</p>
+ <p>Owner: Tav</p>
</div>
<div class="annotation">
- <p>
- SVG2 Requirement: SVG 2 shall support filling and stroking from arbitrary elements.
- </p>
- <p>
- Resolution: Same as requirement.
- </p>
- <p>
- <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>
- Purpose: To allow arbitrary fill (video elements, etc.) as additional paint servers.
- </p>
- <p>
- Owner: Alex?
- </p>
+ <p>SVG2 Requirement: SVG 2 shall support filling and stroking from arbitrary elements.</p>
+ <p>Resolution: Same as requirement.</p>
+ <p><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>Purpose: To allow arbitrary fill (video elements, etc.) as additional paint servers.</p>
+ <p>Owner: Alex?</p>
</div>
<p class="issue">
@@ -102,73 +82,56 @@
</div>
<p>
- Paint servers are used by including an
- <a href="linking.html#IRIReference">IRI reference</a> in
+ Paint servers are used by including an <a>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="note">Solid Colors are new in SVG 2 (ported from SVG 1.2 Tiny).</p>
<div class="annotation">
- <p>
- SVG2 Requirement: Add the solidColor element and its properties.
- </p>
- <p>
- Resolution: Will add solidColor element to SVG2.
- </p>
- <p>
- <a href="http://www.w3.org/2012/01/26-svg-minutes.html">WG teleconference: 26 Jan 2012</a>.
- </p>
- <p>
- Purpose: To provide an easy mechanism for creating named colors
- and palettes. Also useful for animation.
- </p>
- <p>
- Owner: Tav.
- </p>
+ <p>SVG2 Requirement: Add the solidColor element and its properties.</p>
+ <p>Resolution: Will add solidColor element to SVG2.</p>
+ <p><a href="http://www.w3.org/2012/01/26-svg-minutes.html">WG teleconference: 26 Jan 2012</a>.</p>
+ <p>Purpose: To provide an easy mechanism for creating named colors and
+ palettes. Also useful for animation.</p>
+ <p>Owner: Tav.</p>
</div>
-<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>
+<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'/>
+<edit:elementsummary name='solidColor'/>
- <h3 id="SolidColorProperties">Properties</h3>
+<h3 id="SolidColorProperties">Properties</h3>
<dl class="propdef-list-svg2">
@@ -234,9 +197,9 @@
</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:example href='images/pservers/solidcolor.svg' name='solidcolor.svg'
+ description='fill objects using a solidColor paint server'
+ image='yes' link='yes'/>
</edit:with>
@@ -244,10 +207,8 @@
<h3 id="GradientsIntroduction">Introduction</h3>
-<p>
- Gradients consist of smooth color transitions between points on a
- drawing surface. SVG provides for three types of gradients:
-</p>
+<p>Gradients consist of smooth color transitions between points on a
+drawing surface. SVG provides for three types of gradients:</p>
<ul>
<li><a href="#LinearGradients">linear gradients</a>,</li>
@@ -255,84 +216,68 @@
<li><a href="#MeshGradients">mesh gradients</a>.</li>
</ul>
-<p>
- Once a gradient is defined, a
- <a>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>
+<p>Once a gradient is defined, a <a>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>
-<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.
+<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>graphics element</a>
- references a gradient, conceptually the
- <a>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>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>graphics element</a>
- transformations are applied to the gradient.
-</p>
+When a <a>graphics element</a> references a gradient, conceptually the
+<a>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>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>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>
+
+ <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>
+ <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>
+
+ <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>
+<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>
<edit:with element='linearGradient'>
- <p id="LinearGradientElement">
- Linear gradients are defined by a <a>'linearGradient'</a> element.
- </p>
+<p id="LinearGradientElement">Linear gradients are defined by a
+<a>'linearGradient'</a> element.</p>
- <edit:elementsummary name='linearGradient'/>
+<edit:elementsummary name='linearGradient'/>
- <h4 id="LinearGradientAttributes">Attributes</h4>
+<h4 id="LinearGradientAttributes">Attributes</h4>
<dl class="attrdef-list-svg2">
@@ -565,7 +510,7 @@
</dt>
<dd>
<p>
- An <a href="linking.html#IRIReference">IRI reference</a> to a
+ An <a>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
@@ -590,42 +535,35 @@
</dd>
</dl>
- <h4 id="LinearGradientNotes">Notes on linear gradients</h4>
+<h4 id="LinearGradientNotes">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>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 id="ExampleLinGrad01">
- <span class="example-ref">Example lingrad01</span>
- shows how to fill a rectangle by referencing a linear gradient paint
- server.
- </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>
- <edit:example href='images/pservers/lingrad01.svg' name='lingrad01'
- description='Fill a rectangle by referencing a linear gradient paint server'
- image='yes' link='yes'/>
+<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>
@@ -633,13 +571,12 @@
<edit:with element='radialGradient'>
- <p id="RadialGradientElement">
- Radial gradients are defined by a <a>'radialGradient'</a> element.
- </p>
+<p id="RadialGradientElement">Radial gradients are defined by a
+<a>'radialGradient'</a> element.</p>
- <edit:elementsummary name='radialGradient'/>
+<edit:elementsummary name='radialGradient'/>
- <h4 id="RadialGradientAttributes">Attributes</h4>
+<h4 id="RadialGradientAttributes">Attributes</h4>
<dl class="attrdef-list-svg2">
@@ -913,26 +850,13 @@
</p>
<div class="annotation">
- <p>
- Requirement: Add an 'fr' attribute to <radialGradient>.
- </p>
- <p>
- Resolution: Same as requirement.
- </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>
- <p>
- Owner: Erik.
- </p>
+ <p>Requirement: Add an 'fr' attribute to <radialGradient>.</p>
+ <p>Resolution: Same as requirement.</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>
+ <p>Owner: Erik.</p>
</div>
</dd>
@@ -961,7 +885,7 @@
</dt>
<dd>
<p>
- An <a href="linking.html#IRIReference">IRI reference</a>
+ An <a>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
@@ -986,94 +910,74 @@
</dd>
</dl>
- <div class="annotation">
- <p>
- SVG2 Requirement: Clarify radial gradients with focal point on the circle.
- </p>
- <p>
- Resolution: The spec. should say that when the focal point is on the circle edge, with repeat, then the distance between the first and last stop for the repeating colors is 0 and the paint should generate a color that is the average of all the gradient stops.
- </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>.
- 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>
- <p>
- Owner: Erik.
- </p>
- </div>
-
- <h4 id="RadialGradientNotes">Notes on radial gradients</h4>
-
- <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="annotation">
+ <p>SVG2 Requirement: Clarify radial gradients with focal point on the circle.</p>
+ <p>Resolution: The spec. should say that when the focal point is on the
+ circle edge, with repeat, then the distance between the first and last stop
+ for the repeating colors is 0 and the paint should generate a color that is
+ the average of all the gradient stops.</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>.
+ 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>
+ <p>Owner: Erik.</p>
+</div>
- <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>
+<h4 id="RadialGradientNotes">Notes on radial gradients</h4>
- <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>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 id="ExampleRadGrad01">
- <span class="example-ref">Example radgrad01</span>
- shows how to fill a rectangle by referencing a radial gradient paint
- server.
- </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>
- <edit:example href='images/pservers/radgrad01.svg' name='radgrad01'
- description='Fill a rectangle by referencing a radial gradient paint
- server' image='yes' link='yes'/>
+<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><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:with>
@@ -1081,103 +985,84 @@
<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 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 class="annotation">
- A Coons Patch is equivalent to a bi-cubic Ferguson patch where the
- distance between a cubic Bézier end point and its nearest control
- point is one-third the length of the corresponding Ferguson
- tangent line.
- </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 class="annotation">A Coons Patch is equivalent to a bi-cubic Ferguson patch
+where the distance between a cubic Bézier end point and its nearest control
+point is one-third the length of the corresponding Ferguson tangent line.</p>
- <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>
- <div class="note">
- <pre>
- S = S<sub>C</sub> + S<sub>D</sub> − S<sub>B</sub>, where
- S<sub>C</sub>(u,v) = (1−v)×C<sub>1</sub>(u) + v×C<sub>2</sub>(u),
- S<sub>D</sub>(u,v) = (1−u)×D<sub>1</sub>(v) + u×D<sub>2</sub>(v), and
- S<sub>B</sub>(u,v) = (1−v)×[(1-u)×C<sub>1</sub>(0) + u×C<sub>1</sub>(1)]
- + v×[(1−u)×C<sub>2</sub>(0) + u×C<sub>2</sub>(1)].
+<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>
+
+<div class="note">
+<pre>
+S = S<sub>C</sub> + S<sub>D</sub> − S<sub>B</sub>, where
+S<sub>C</sub>(u,v) = (1−v)×C<sub>1</sub>(u) + v×C<sub>2</sub>(u),
+S<sub>D</sub>(u,v) = (1−u)×D<sub>1</sub>(v) + u×D<sub>2</sub>(v), and
+S<sub>B</sub>(u,v) = (1−v)×[(1-u)×C<sub>1</sub>(0) + u×C<sub>1</sub>(1)]
+ + v×[(1−u)×C<sub>2</sub>(0) + u×C<sub>2</sub>(1)].
</pre>
- </div>
- <p class="issue">
- MathML gets stripped out by build script.
- </p>
- <pre><![CDATA[
- <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>]]>
- </pre>
-
- <p class="issue">
- Come up with better explanation of the mapping with diagram. The
- subtraction term in the above formula ensures that the boundary
- conditions are met.
- </p>
+</div>
- <div class="note">
- <p>
- One method of rendering a patch is to "divide and conquer." Check
- if the four corner colors of the patch are the same within a
- specified tolerance. If so, paint the patch with the average color
- using the normal path filling routine. If not, divide the patch
- into four smaller patches and repeat the color tolerance
- check. Repeat the process as many times as necessary.
- </p>
- <p>
- Another way to render a patch is to first divide the patch
- vertically or horizontally into a series of smaller patches that
- are each less than one pixel high or wide. Then each resulting
- patch can be rendered as a path.
- </p>
- </div>
+<p class="issue">MathML gets stripped out by build script.</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>
+<pre><![CDATA[
+<math xmlns="http://www.w3.org/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>]]></pre>
- <p>
- The structure of a mesh gradient is as follows:
- </p>
+<p class="issue">Come up with better explanation of the mapping with diagram.
+The subtraction term in the above formula ensures that the boundary conditions
+are met.</p>
- <div class="example">
- <pre>
+<div class="note">
+ <p>One method of rendering a patch is to "divide and conquer." Check
+ if the four corner colors of the patch are the same within a
+ specified tolerance. If so, paint the patch with the average color
+ using the normal path filling routine. If not, divide the patch
+ into four smaller patches and repeat the color tolerance
+ check. Repeat the process as many times as necessary.</p>
+
+ <p>Another way to render a patch is to first divide the patch
+ vertically or horizontally into a series of smaller patches that
+ are each less than one pixel high or wide. Then each resulting
+ patch can be rendered as a path.</p>
+</div>
+
+<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>
@@ -1192,68 +1077,50 @@
Any number of meshRows, each with the same number of meshPatches as in the first row.
</meshRow>
</meshGradient>
- </pre>
- </div>
+</pre>
+</div>
- <div class="annotation">
- <p>
- SVG2 Requirement: Support Coons patches.
- </p>
- <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>
- <p>
- Purpose: To allow more complex gradients such as those found in nature.
- </p>
- <p>
- Owner: Tav.
- </p>
- </div>
+<div class="annotation">
+ <p>SVG2 Requirement: Support Coons patches.</p>
+ <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>
+ <p>Purpose: To allow more complex gradients such as those found in nature.</p>
+ <p>Owner: Tav.</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: 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>
+<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'/>
+<p id="MeshGradientElement">Mesh gradients are defined by a <a>'meshGradient'</a>
+element.</p>
+
+<edit:elementsummary name='meshGradient'/>
</edit:with>
<edit:with element='meshRow'>
- <p id="MeshRowElement">
- Mesh rows are defined by a <a>'meshRow'</a> element.
- </p>
- <edit:elementsummary name='meshRow'/>
+<p id="MeshRowElement">Mesh rows are defined by a <a>'meshRow'</a> element.</p>
+
+<edit:elementsummary name='meshRow'/>
</edit:with>
+
<edit:with element='meshPatch'>
- <p id="MeshPatchElement">
- Mesh patches are defined by a <a>'meshPatch'</a> element.
- </p>
- <edit:elementsummary name='meshPatch'/>
+<p id="MeshPatchElement">Mesh patches are defined by a <a>'meshPatch'</a>
+element.</p>
+
+<edit:elementsummary name='meshPatch'/>
</edit:with>
@@ -1261,21 +1128,18 @@
<edit:with element='stop'>
- <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>
+<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>
- <edit:elementsummary name='stop'/>
+<p class="annotation">In SVG 1.1, the above read: "The ramp of
+colors..." but "ramp" is used nowhere else in this section.</p>
- <h4 id="GradientStopAttributes">Attributes</h4>
+<edit:elementsummary name='stop'/>
+
+<h4 id="GradientStopAttributes">Attributes</h4>
<dl class="attrdef-list-svg2">
@@ -1340,7 +1204,7 @@
</dl>
- <h4 id="StopColorProperties">Properties</h4>
+<h4 id="StopColorProperties">Properties</h4>
<dl class="propdef-list-svg2">
@@ -1406,53 +1270,52 @@
</dl><!-- propdef-list -->
- <h4 id="StopNotes">Notes on gradient stops</h4>
+<h4 id="StopNotes">Notes on gradient stops</h4>
- <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:
+<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>
- <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>
-<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>
+ <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>
- </ul>
+ <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>
+ <p>If two gradient stops have the same offset value, then the
+ latter gradient stop controls the color value at the
+ overlap point. In particular:</p>
+
+ <pre><![CDATA[
+<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>
+
+ <p>will have approximately the same effect as:</p>
+
+ <pre><![CDATA[
+<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>
+
+ <p>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.</p>
+ </li>
+</ul>
</edit:with>
@@ -1460,33 +1323,28 @@
<edit:with element='pattern'>
- <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>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>
+<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>graphics element</a> to indicate that the
+given element shall be filled or stroked with the pattern.</p>
- <edit:elementsummary name='pattern'/>
+<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>
- <h3 id="PatternElementAttributes">Attributes</h3>
+<edit:elementsummary name='pattern'/>
+
+<h3 id="PatternElementAttributes">Attributes</h3>
<dl class="attrdef-list-svg2">
@@ -1756,90 +1614,78 @@
</dd>
</dl>
- <h3 id="PatternNotes">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>
+<h3 id="PatternNotes">Notes on patterns</h3>
- <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>
+<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>
- <edit:example href='images/pservers/pattern01.svg' name='pattern01'
- description='fill a rectangle by referencing a pattern paint server' image='yes' link='yes'/>
+<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><![CDATA[
+<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>