W3C home > Mailing lists > Public > public-svg-wg@w3.org > October to December 2012

svg2: Specify more how radial gradients and focal radius are supposed...

From: SVG Working Group repository <cam@mcc.id.au>
Date: Sun, 14 Oct 2012 05:11:42 -0700
Message-Id: <hg.9c07cc49defd.1350216702.3034738116371802840@ps58493.dreamhostps.com>
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>&lt;coordinate&gt;</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>&lt;coordinate&gt;</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>&lt;length&gt;</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>&lt;coordinate&gt;</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>&lt;length&gt;</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>&lt;length&gt;</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

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:20:16 UTC