--- a/master/images/masking/opacity01.svg Sat May 26 22:04:22 2012 -0700
+++ b/master/images/masking/opacity01.svg Sun May 27 17:08:00 2012 +1000
@@ -1,45 +1,39 @@
-<?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="3.5cm" viewBox="0 0 1200 350"
- xmlns="http://www.w3.org/2000/svg" version="1.1">
- <desc>Example opacity01 - opacity property</desc>
-
- <rect x="1" y="1" width="1198" height="348"
- fill="none" stroke="blue" />
+<svg xmlns="http://www.w3.org/2000/svg"
+ width="600" height="175" viewBox="0 0 1200 350">
<!-- Background blue rectangle -->
- <rect x="100" y="100" width="1000" height="150" fill="#0000ff" />
+ <rect x="100" y="100" width="1000" height="150" fill="blue"/>
<!-- Red circles going from opaque to nearly transparent -->
- <circle cx="200" cy="100" r="50" fill="red" opacity="1" />
- <circle cx="400" cy="100" r="50" fill="red" opacity=".8" />
- <circle cx="600" cy="100" r="50" fill="red" opacity=".6" />
- <circle cx="800" cy="100" r="50" fill="red" opacity=".4" />
- <circle cx="1000" cy="100" r="50" fill="red" opacity=".2" />
+ <circle cx="200" cy="100" r="50" fill="red" opacity="1"/>
+ <circle cx="400" cy="100" r="50" fill="red" opacity=".8"/>
+ <circle cx="600" cy="100" r="50" fill="red" opacity=".6"/>
+ <circle cx="800" cy="100" r="50" fill="red" opacity=".4"/>
+ <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"/>
<!-- Opaque group, opaque circles -->
- <g opacity="1" >
- <circle cx="182.5" cy="250" r="50" fill="red" opacity="1" />
- <circle cx="217.5" cy="250" r="50" fill="green" opacity="1" />
+ <g opacity="1">
+ <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"/>
+ <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"/>
</g>
<!-- Group opacity: .5, opacity circles -->
- <g opacity=".5" >
- <circle cx="382.5" cy="250" r="50" fill="red" opacity="1" />
- <circle cx="417.5" cy="250" r="50" fill="green" opacity="1" />
+ <g opacity=".5">
+ <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"/>
+ <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"/>
</g>
<!-- Opaque group, semi-transparent green over red -->
- <g opacity="1" >
- <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5" />
- <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5" />
+ <g opacity="1">
+ <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"/>
+ <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"/>
</g>
<!-- Opaque group, semi-transparent red over green -->
- <g opacity="1" >
- <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5" />
- <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5" />
+ <g opacity="1">
+ <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"/>
+ <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"/>
</g>
<!-- Group opacity .5, semi-transparent green over red -->
- <g opacity=".5" >
- <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5" />
- <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5" />
+ <g opacity=".5">
+ <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"/>
+ <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"/>
</g>
</svg>
-
--- a/master/masking.html Sat May 26 22:04:22 2012 -0700
+++ b/master/masking.html Sun May 27 17:08:00 2012 +1000
@@ -102,52 +102,49 @@
<h3 id="OverflowAndClipProperties">The <span class="property">'overflow'</span>
and <span class="property">'clip'</span> properties</h3>
- <div class="propdef">
- <dl>
- <dt id="OverflowProperty"><span class="propdef-title property">'overflow'</span></dt>
- <dd>
- <table summary="overflow property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td>visible | hidden | scroll | auto | <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>see prose</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a
- href="coords.html#ElementsThatEstablishViewports">elements
- which establish a new viewport</a>, <a>'pattern'</a> elements
- and <a>'marker element'</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 class="issue">This property definition table need to be replaced
+with a link to css3-box.</p>
+
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="OverflowProperty">overflow</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>visible | hidden | scroll | auto</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>visible</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a href="coords.html#ElementsThatEstablishViewports">elements
+ which establish a new viewport</a>, <a>'pattern'</a> elements
+ and <a>'marker element'</a> elements</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
<p>The <a>'overflow'</a> property has the same parameter values and has the
same meaning <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visufx.html#overflow">as defined in CSS2</a>
@@ -215,51 +212,49 @@
<p>For related information, see <a href="masking.html#AutoClipAtViewportNotViewBox">Clip
to viewport vs. clip to <span class="attr-name">'viewBox'</span></a>.</p>
- <div class="propdef">
- <dl>
- <dt id="ClipProperty"><span class="propdef-title property">'clip'</span></dt>
- <dd>
- <table summary="clip property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td><shape> | auto | <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>auto</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a
- href="coords.html#ElementsThatEstablishViewports">elements
- which establish a new viewport</a>, <a>'pattern'</a> elements
- and <a>'marker element'</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 class="issue">This property definition table need to be replaced
+with a link to CSS 2.1</p>
+
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="ClipProperty">clip</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><shape> | auto</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>auto</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a href="coords.html#ElementsThatEstablishViewports">elements
+ which establish a new viewport</a>, <a>'pattern'</a> elements
+ and <a>'marker element'</a> elements</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
<p>The <a>'clip'</a> property has the same parameter values
<a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/visufx.html#clipping">as defined in CSS2</a>
@@ -397,50 +392,45 @@
<a>'clipPath'</a> element or any of its ancestors is set to
<span class="prop-value">none</span>.</p>
- <div class="propdef">
- <dl>
- <dt id="ClipPathProperty"><span class="propdef-title property">'clip-path'</span></dt>
- <dd>
- <table summary="clip-path property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td><a href="types.html#DataTypeFuncIRI"><funciri></a>
- | none | <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>none</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a>container elements</a>, <a>graphics elements</a>
- and <a>'clipPath'</a></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>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="ClipPathProperty">clip-path</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><funciri></a> | none</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>none</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>container elements</a>, <a>graphics elements</a>
+ and <a>'clipPath'</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified, but with <a><funciri></a> values made absolute</td>
+ </tr>
+ <tr>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
<dl>
<dt><span class="prop-value"><a href="types.html#DataTypeFuncIRI"><funciri></a></span></dt>
@@ -451,49 +441,44 @@
property must be treated as if it hadn't been specified.</dd>
</dl>
- <div class="propdef">
- <dl>
- <dt id="ClipRuleProperty"><span class="propdef-title property">'clip-rule'</span></dt>
- <dd>
- <table summary="clip-rule property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td>nonzero | evenodd | <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>nonzero</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td>graphics elements within a <a>'clipPath'</a>
- element</td>
- </tr>
- <tr valign="baseline">
- <td><em>Inherited:</em> </td>
- <td>yes</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>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="ClipRuleProperty">clip-rule</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>nonzero | evenodd</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>nonzero</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td>graphics elements within a <a>'clipPath'</a> element</td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>yes</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified</td>
+ </tr>
+ <tr>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
<dl>
<dt><span class="prop-value">nonzero</span></dt>
@@ -806,48 +791,44 @@
<p>The following is a description of the <a>'mask property'</a> property.</p>
- <div class="propdef">
- <dl>
- <dt id="MaskProperty"><span class="propdef-title property">'mask'</span></dt>
- <dd>
- <table summary="mask property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td><a href="types.html#DataTypeFuncIRI"><funciri></a> | none | <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>none</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a>container elements</a> and <a>graphics elements</a></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>
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="MaskProperty">mask</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><funciri> | none</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>none</td>
+ </tr>
+ <tr>
+ <th>Applies to:</th>
+ <td><a>container elements</a> and <a>graphics elements</a></td>
+ </tr>
+ <tr>
+ <th>Inherited:</th>
+ <td>no</td>
+ </tr>
+ <tr>
+ <th>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>as specified, but with <a><funciri></a> values made absolute</td>
+ </tr>
+ <tr>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
<dl>
<dt><span class="prop-value"><a href="types.html#DataTypeFuncIRI"><funciri></a></span></dt>
@@ -855,12 +836,28 @@
as the mask.</dd>
</dl>
+<p class="issue">Even though this says "another graphical object",
+text in an earlier section says that <a>'mask property'</a> can
+only reference a <a>'mask element'</a> element.</p>
+
</edit:with>
+<div class="ready-for-wg-review">
<h2 id="ObjectAndGroupOpacityProperties">Object and group opacity: the
-<span class="property">'opacity'</span> property</h2>
+effect of the <span class="property">'opacity'</span> property</h2>
-<p>There are several opacity properties within SVG:</p>
+<p class="note">See the CSS Color Module Level 3 for the definition
+of <a>'opacity'</a>. [<a href="refs.html#ref-CSS3COLOR">CSS3COLOR</a>]</p>
+
+<p>The <a>'opacity'</a> property specifies how opaque a given
+graphical element or container element will be when it is
+painted to the canvas. When applied to a container element,
+this is known as <em>group opacity</em>, and when applied to
+an individual rendering element, it is known as <em>object
+opacity</em>. The principle for these two operations however
+is the same.</p>
+
+<p>There are several other opacity-related properties in SVG:</p>
<ul>
<li><a>'fill-opacity'</a>, which specifies the opacity of a fill
@@ -870,113 +867,70 @@
operation;</li>
<li><a>'solid-opacity'</a>, which specifies the opacity of a solid color
- paint server;</li>
+ paint server; and</li>
- <li><a>'stop-opacity'</a>, which specifies the opacity of a gradient stop; and</li>
-
- <li><a>'opacity'</a>, which specifies object/group opacity and which is
- described in this section.</li>
+ <li><a>'stop-opacity'</a>, which specifies the opacity of a gradient stop.</li>
</ul>
-<p>Except for object/group opacity (described just below), all other opacity
-properties are involved in intermediate rendering operations. Object/group
-opacity can be thought of conceptually as a postprocessing operation.
-Conceptually, after the object/group is rendered into an RGBA offscreen image,
-the object/group opacity setting specifies how to blend the offscreen image
-into the current background.</p>
+<p>These four opacity properties are involved in intermediate rendering operations.
+Object and group opacity however can be thought of as a post-processing
+operation. Conceptually, the object or group to which <a>'opacity'</a> applies
+is rendered into an RGBA offscreen image. The offscreen image as whole is then blended
+into the canvas with the specified <a>'opacity'</a> value used uniformly
+across the offscreen image.</p>
- <div class="propdef">
- <dl>
- <dt id="OpacityProperty"><span class="propdef-title property">'opacity'</span></dt>
- <dd>
- <table summary="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>container elements</a> (except <a>'mask element'</a>) and
- <a>graphics elements</a></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>An <a>'opacity'</a> value of 0 means fully transparent and 1 means fully
+opaque. Opacity values are clamped to the range [0, 1];
+see <a href="implnote.html#RangeClamping">Clamping values which are restricted
+to a particular range</a> for details.</p>
-<dl>
- <dt><span class="prop-value"><opacity-value></span></dt>
- <dd>The uniform opacity setting to be applied across an
- entire object, as a <a><number></a>. Any values outside the range 0.0 (fully
- transparent) to 1.0 (fully opaque) will be clamped to this
- range. (See <a href="implnote.html#RangeClamping">Clamping
- values which are restricted to a particular range</a>.) If
- the object is a container element such as a <a>'g'</a>, then
- the effect is as if the contents of the <a>'g'</a> were
- blended against the current background using a mask where the
- value of each pixel of the mask is <opacity-value>.
- (See <a href="masking.html#SimpleAlphaBlending">Simple alpha
- compositing</a>.)</dd>
-</dl>
-
-<p id="ExampleOpacity01"><span class="example-ref">Example opacity01</span>
-illustrates various usage of the <a>'opacity'</a> property on elements and
-groups.</p>
-
-<edit:example href='images/masking/opacity01.svg' name='opacity01' description='opacity property' image='yes' link='yes'/>
+<p>The <a>'opacity'</a> property applies to the following SVG elements:
+<a>'svg'</a>, <a>'g'</a>, <a>'symbol'</a>, <a>'marker element'</a>,
+<a>'a'</a>, <a>'switch'</a>, <a>graphics elements</a> and
+<a>text content child elements</a>.</p>
-<p>In the example above, the top row of circles have differing opacities,
-ranging from 1.0 to 0.2. The bottom row illustrates five <a>'g'</a> elements,
-each of which contains overlapping red and green circles, as follows:</p>
-
-<ul>
- <li>The first group shows the opaque case for reference. The group has
- opacity of 1, as do the circles.</li>
-
- <li>The second group shows group opacity when the elements in the group are
- opaque.</li>
+<div class="example">
+ <p>The following example illustrates various usage of the <a>'opacity'</a>
+ property on objects and groups.</p>
- <li>The third and fourth group show that opacity is not commutative. In the
- third group (which has opacity of 1), a semi-transparent green circle is
- drawn on top of a semi-transparent red circle, whereas in the fourth group a
- semi-transparent red circle is drawn on top of a semi-transparent green
- circle. Note that area where the two circles intersect display different
- colors. The third group shows more green color in the intersection area,
- whereas the fourth group shows more red color.</li>
+ <edit:include href='images/masking/opacity01.svg'/>
- <li>The fifth group shows the multiplicative effect of opacity settings.
- Both the circles and the group itself have opacity settings of .5. The
- result is that the portion of the red circle which does not overlap with the
- green circle (i.e., the top/right of the red circle) will blend into the
- blue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, after
- blending into the blue rectangle, results in a blended color which is 25%
- red and 75% blue.</li>
-</ul>
+ <div class='figure'>
+ <img class='bordered' src='images/masking/opacity01.svg'/>
+ <p class='caption'>Each group of red and green circles is first rendered
+ to an offscreen image before being blended with the background
+ blue rectangle as a whole, with the given <a>'opacity'</a> values.</p>
+ </div>
+
+ <p>In the example, the top row of circles have differing opacities,
+ ranging from 1.0 to 0.2. The bottom row illustrates five <a>'g'</a> elements,
+ each of which contains overlapping red and green circles, as follows:</p>
+
+ <ul>
+ <li>The first group shows the opaque case for reference. The group has
+ opacity of 1, as do the circles.</li>
+
+ <li>The second group shows group opacity when the elements in the group are
+ opaque.</li>
+
+ <li>The third and fourth group show that opacity is not commutative. In the
+ third group (which has opacity of 1), a semi-transparent green circle is
+ drawn on top of a semi-transparent red circle, whereas in the fourth group a
+ semi-transparent red circle is drawn on top of a semi-transparent green
+ circle. Note that area where the two circles intersect display different
+ colors. The third group shows more green color in the intersection area,
+ whereas the fourth group shows more red color.</li>
+
+ <li>The fifth group shows the multiplicative effect of opacity settings.
+ Both the circles and the group itself have opacity settings of .5. The
+ result is that the portion of the red circle which does not overlap with the
+ green circle (i.e., the top/right of the red circle) will blend into the
+ blue rectangle with accumulative opacity of .25 (i.e., .5*.5), which, after
+ blending into the blue rectangle, results in a blended color which is 25%
+ red and 75% blue.</li>
+ </ul>
+</div>
+</div>
<h2 id="DOMInterfaces">DOM interfaces</h2>