- From: SVG Working Group repository <cam@mcc.id.au>
- Date: Sun, 14 Oct 2012 05:11:42 -0700
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/9c07cc49defd
branches:
changeset: 393:9c07cc49defd
user: Dirk Schulze <dschulze@adobe.com>
date: Sun Oct 14 05:10:41 2012 -0700
description:
Specify more how radial gradients and focal radius are supposed to work.
diffstat:
master/pservers.html | 39 +++++++++++++++++++++------------------
1 files changed, 21 insertions(+), 18 deletions(-)
diffs (164 lines):
diff --git a/master/pservers.html b/master/pservers.html
--- a/master/pservers.html
+++ b/master/pservers.html
@@ -598,16 +598,17 @@ is set to <span class="prop-value">none<
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>
+<div class="ready-for-wider-review">
<h3 id="RadialGradients">Radial gradients</h3>
<edit:with element='radialGradient'>
<p id="RadialGradientElement">Radial gradients are defined by a
<a>'radialGradient'</a> element.</p>
<edit:elementsummary name='radialGradient'/>
@@ -724,21 +725,20 @@ shows how to fill a rectangle by referen
<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
+ <a>'cx'</a>, <a>'cy'</a> and <a>'r'</a> define the end 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.
+ to the perimeter of this end 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>
@@ -770,19 +770,17 @@ shows how to fill a rectangle by referen
<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>.
+ processing</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>
@@ -790,21 +788,20 @@ shows how to fill a rectangle by referen
<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.
+ <a>'fx'</a>, <a>'fy'</a>, and <a>'fr'</a> define the start 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 start 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>
@@ -866,16 +863,22 @@ shows how to fill a rectangle by referen
<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>
+ <p>
+ A negative value is an error
+ (see <a href="implnote.html#ErrorProcessing">Error
+ processing</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
@@ -985,24 +988,23 @@ shows how to fill a rectangle by referen
resolved that the paint should generate a color that is the
weighted average (by offset) of all the gradient stops.</td>
</tr>
</table>
</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>If the start circle defined by <a>'fx'</a>, <a>'fy'</a> and <a>'fr'</a> lies
+outside the end circle defined by <a>'cx'</a>, <a>'cy'</a>, and <a>'r'</a>, effectively
+a cone is created, touched by the two circles. Areas outside the cone stay untouched by
+the gradient (transparent black).</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>If the start circle fully overlaps with the end circle, no
+gradient is drawn. The area stays untouched (transparent black).</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."
@@ -1037,16 +1039,17 @@ the <a>'radialGradient'</a> element or a
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>
+</div>
<h3 id="MeshGradients">Mesh gradients</h3>
<edit:with element='meshGradient'>
<p class="note">New in SVG 2. Added to allow shadings along curved lines. This
is needed, for example, in creating life-like drawings.</p>
Received on Sunday, 14 October 2012 12:12:59 UTC