Some cleanup of more stroke properties.
authorCameron McCormack <cam@mcc.id.au>
Sun, 20 May 2012 18:44:40 +1000
changeset 111 ecc0c800da41
parent 110 b55baea9fd73
child 112 d80b0bde44e7
Some cleanup of more stroke properties.
master/definitions.xml
master/painting.html
master/style/default_svg.css
--- a/master/definitions.xml	Sun May 20 15:42:40 2012 +1000
+++ b/master/definitions.xml	Sun May 20 18:44:40 2012 +1000
@@ -1499,6 +1499,7 @@
   <symbol name='anything' href='types.html#DataTypeAnything'/>
   <symbol name='color' href='types.html#DataTypeColor'/>
   <symbol name='coordinate' href='types.html#DataTypeCoordinate'/>
+  <symbol name='dasharray' href='painting.html#DataTypeDasharray'/>
   <symbol name='frequency' href='types.html#DataTypeFrequency'/>
   <symbol name='icccolor' href='types.html#DataTypeICCColor'/>
   <symbol name='integer' href='types.html#DataTypeInteger'/>
--- a/master/painting.html	Sun May 20 15:42:40 2012 +1000
+++ b/master/painting.html	Sun May 20 18:44:40 2012 +1000
@@ -330,7 +330,7 @@
   </tr>
   <tr>
     <th>Computed&#160;value:</th>
-    <td>As specified, but clamped to the range [0, 1].</td>
+    <td>as specified, but clamped to the range [0, 1]</td>
   </tr>
   <tr>
     <th><a href="animate.html#Animatable">Animatable</a>:</th>
@@ -342,7 +342,7 @@
 opacity of the painting operation used to paint the interior
 the current object. (See <a
 href="render.html#PaintingShapesAndText">Painting shapes and
-text</a>.)  A value of 0 means full transparent, and a
+text</a>.)  A value of 0 means fully transparent, and a
 value of 1 means fully opaque.</p>
 
 <p class="note">See also the <a>'opacity'</a> property, which
@@ -350,6 +350,24 @@
 
 <h2 id="StrokeProperties">Stroke properties</h2>
 
+<div class="annotation">
+ <p>
+   SVG2 Requirement: Have the vector-effect property
+ </p>
+ <p>
+   Resolution: SVG 2 will have the vector-effect property
+ </p>
+ <p>
+   <a href="http://www.w3.org/2012/02/02-svg-minutes.html#item05">SVG Working Group Teleconference 02 Feb 2012</a>.
+ </p>
+ <p>
+   Purpose: To get stroke that doesn't scale when element is transformed. 
+ </p>
+ <p>
+   Owner: Erik
+ </p>
+</div>
+
 <p>The following are the properties which affect how an element is stroked.</p>
 
 <p>In all cases, all stroking properties which are affected by
@@ -614,48 +632,46 @@
 
 </div>
 
-    <div class="propdef">
-      <dl>
-        <dt id="StrokeLinejoinProperty"><span class="propdef-title property">'stroke-linejoin'</span></dt>
-        <dd>
-          <table summary="stroke-linejoin property"
-          class="propinfo" cellspacing="0" cellpadding="0">
-            <tr valign="baseline">
-              <td><em>Value:</em>&nbsp;&nbsp;</td>
-              <td>miter | round | bevel | <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>&nbsp;&nbsp;</td>
-              <td>miter</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Applies to:</em>&nbsp;&nbsp;</td>
-              <td><a>shapes</a> and <a>text content elements</a></td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Inherited:</em>&nbsp;&nbsp;</td>
-              <td>yes</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Percentages:</em>&nbsp;&nbsp;</td>
-              <td>N/A</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Media:</em>&nbsp;&nbsp;</td>
-              <td>visual</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em><a
-              href="animate.html#Animatable">Animatable</a>:</em>&nbsp;&nbsp;</td>
-              <td>yes</td>
-            </tr>
-          </table>
-        </dd>
-      </dl>
-    </div>
+<h3 id="LineJoin">Controlling line joins: the <span class="property">'stroke-linejoin'</span> and <span class="property">'stroke-miterlimit'</span> properties</h3>
+
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="StrokeLinejoinProperty">stroke-linejoin</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td>miter | round | bevel</td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>miter</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>shapes</a> and <a>text content elements</a></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&#160;value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a href="animate.html#Animatable">Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
 
 <p><a>'stroke-linejoin'</a> specifies the shape to be used at the
 corners of paths or basic shapes when they are stroked. For further details see the <a href="implnote.html#PathElementImplementationNotes">path implementation notes</a>.</p>
@@ -672,48 +688,44 @@
 <p><img alt="Image showing stroke-linejoin alternatives" src="images/painting/linejoin.png" width="454" height="133" /></p>
 <p class="view-as-svg"><a href="images/painting/linejoin.svg">View this example as SVG (SVG- and CSS-enabled browsers only)</a></p>
 
-    <div class="propdef">
-      <dl>
-        <dt id="StrokeMiterlimitProperty"><span class="propdef-title property">'stroke-miterlimit'</span></dt>
-        <dd>
-          <table summary="stroke-miterlimit property"
-          class="propinfo" cellspacing="0" cellpadding="0">
-            <tr valign="baseline">
-              <td><em>Value:</em>&nbsp;&nbsp;</td>
-              <td>&lt;miterlimit&gt; | <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>&nbsp;&nbsp;</td>
-              <td>4</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Applies to:</em>&nbsp;&nbsp;</td>
-              <td><a>shapes</a> and <a>text content elements</a></td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Inherited:</em>&nbsp;&nbsp;</td>
-              <td>yes</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Percentages:</em>&nbsp;&nbsp;</td>
-              <td>N/A</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Media:</em>&nbsp;&nbsp;</td>
-              <td>visual</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em><a
-              href="animate.html#Animatable">Animatable</a>:</em>&nbsp;&nbsp;</td>
-              <td>yes</td>
-            </tr>
-          </table>
-        </dd>
-      </dl>
-    </div>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="StrokeMiterlimitProperty">stroke-miterlimit</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;number&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>4</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>shapes</a> and <a>text content elements</a></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&#160;value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a href="animate.html#Animatable">Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
 
 <p>When two line segments meet at a sharp angle and <span
 class='prop-value'>miter</span> joins have been specified for
@@ -724,7 +736,7 @@
 join is converted from a miter to a bevel.</p>
 
 <dl>
-  <dt><span class='prop-value'>&lt;miterlimit&gt;</span></dt>
+  <dt><span class='prop-value'>&lt;number&gt;</span></dt>
   <dd>The limit on the ratio of the miter length to the <a>'stroke-width'</a>.
   The value of <span class='prop-value'>&lt;miterlimit&gt;</span> must be a
   <a>&lt;number&gt;</a> greater than or equal to 1. Any other value is an error (see
@@ -741,7 +753,7 @@
     <mrow>
       <mfrac>
         <mi>miterLength</mi>
-        <mi>stroke-width</mi>
+        <mi style="font-family: sans-serif">‘stroke-width’</mi>
       </mfrac>
       <mo>=</mo>
       <mfrac>
@@ -765,211 +777,196 @@
 than approximately 29 degrees, and a limit of 10.0 converts them for
 theta less than approximately 11.5 degrees.</p>
 
-    <div class="propdef">
-      <dl>
-        <dt id="StrokeDasharrayProperty"><span class="propdef-title property">'stroke-dasharray'</span></dt>
-        <dd>
-          <table summary="stroke-dasharray property"
-          class="propinfo" cellspacing="0" cellpadding="0">
-            <tr valign="baseline">
-              <td><em>Value:</em>&nbsp;&nbsp;</td>
-              <td>none | &lt;dasharray&gt; | <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>&nbsp;&nbsp;</td>
-              <td>none</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Applies to:</em>&nbsp;&nbsp;</td>
-              <td><a>shapes</a> and <a>text content elements</a></td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Inherited:</em>&nbsp;&nbsp;</td>
-              <td>yes</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Percentages:</em>&nbsp;&nbsp;</td>
-              <td>yes (see below)</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Media:</em>&nbsp;&nbsp;</td>
-              <td>visual</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em><a
-              href="animate.html#Animatable">Animatable</a>:</em>&nbsp;&nbsp;</td>
-              <td>yes (<a
-              href="animate.html#AdditionAttributes">non-additive</a>)</td>
-            </tr>
-          </table>
-        </dd>
-      </dl>
-    </div>
+<h3 id="StrokeDashing">Dashing strokes: the <span class="property">'stroke-dasharray'</span> and <span class="property">'stroke-dashoffset'</span> properties</h3>
 
-<p><span class="property">'stroke-dasharray'</span> controls
-the pattern of dashes and gaps used to stroke paths.
-<span class='prop-value'>&lt;dasharray&gt;</span> contains a
-list of comma and/or white space separated
-<a href="types.html#DataTypeLength">&lt;length&gt;</a>s and
-<a>&lt;percentage&gt;</a>s that specify the
-lengths of alternating dashes and gaps. If an odd number of values
-is provided, then the list of values is repeated to yield an even
-number of values. Thus, <span class="prop-value">stroke-dasharray: 5,3,2</span>
-is equivalent to <span class="prop-value">stroke-dasharray: 5,3,2,5,3,2</span>.</p>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="StrokeDasharrayProperty">stroke-dasharray</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td>none | <a>&lt;dasharray&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>none</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>shapes</a> and <a>text content elements</a></td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>yes</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed&#160;value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a href="animate.html#Animatable">Animatable</a>:</th>
+    <td>yes (<a href="animate.html#AdditionAttributes">non-additive</a>)</td>
+  </tr>
+</table>
+
+<p>where:</p>
+
+<p class="definition"><dfn id="DataTypeDasharray">&lt;dasharray&gt;</dfn> = [ <a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a> ]#*</p>
+
+<p>The <a>'stroke-dasharray'</a> property controls
+the pattern of dashes and gaps used to form the shape of
+a path's stroke.</p>
 
 <dl>
   <dt><span class='prop-value'>none</span></dt>
-  <dd>Indicates that no dashing is used. If stroked, the line is drawn
-  solid.</dd>
+  <dd>Indicates that no dashing is used.</dd>
 
   <dt><span class='prop-value'>&lt;dasharray&gt;</span></dt>
   <dd>
-    <p>A list of comma and/or white space separated
-    <a href="types.html#DataTypeLength">&lt;length&gt;</a>s
-    (which can have a <a href="coords.html#Units">unit identifier</a>)
-    and <a>&lt;percentage&gt;</a>s.  A percentage represents a distance as a
-    percentage of the current viewport (see <a href="coords.html#Units">Units</a>).
-    A negative value is an error (see
-    <a href="implnote.html#ErrorProcessing">Error processing</a>). If the
-    sum of the values
-    is zero, then the stroke is rendered as if a value of
-    <span class='prop-value'>none</span> were specified. For further details see the <a href="implnote.html#PathElementImplementationNotes">path implementation notes</a>.</p>
-  
-    <p>The grammar for &lt;dasharray&gt; is as follows:</p>
+    <p>Specifies a dashing pattern to use.  A <a>&lt;dasharray&gt;</a> is
+    a list of comma and/or white space separated lengths and percentages.
+    Each value specifies a length along the path for which the stroke
+    is to be painted (a <em>dash</em>) and not painted (a <em>gap</em>).
+    Every second value in the list beginning with the first one specifies
+    the length of a dash, and every other value specifies the length of a gap
+    between the dashes.  If the list has an odd number of values, then it is
+    repeated to yield an even number of values.  (Thus, the rendering behavior
+    of <span class="prop-value">stroke-dasharray: 5,3,2</span>
+    is equivalent to <span class="prop-value">stroke-dasharray: 5,3,2,5,3,2</span>.)</p>
 
-    <pre class='grammar'><span id='DashArray'>dasharray</span> ::= (<a href='types.html#Length'>length</a> | <a href='types.html#Percentage'>percentage</a>) (<a href='types.html#CommaWSP'>comma-wsp</a> <a href='#DashArray'>dasharray</a>)?</pre>
+    <p>The resulting even-length dashing pattern is repeated along the
+    entire length of the path.</p>
+
+    <p>If any value in the list is negative, the <a>&lt;dasharray&gt;</a> value is
+    <a>invalid</a>.  If all of the values in the list are zero,
+    then the stroke is rendered as if a value of <span class='prop-value'>none</span>
+    were specified.</p>
   </dd>
 </dl>
 
-    <div class="propdef">
-      <dl>
-        <dt id="StrokeDashoffsetProperty"><span class="propdef-title property">'stroke-dashoffset'</span></dt>
-        <dd>
-          <table summary="stroke-dashoffset property"
-          class="propinfo" cellspacing="0" cellpadding="0">
-            <tr valign="baseline">
-              <td><em>Value:</em>&nbsp;&nbsp;</td>
-              <td><a>&lt;percentage&gt;</a> | <a>&lt;length&gt;</a> |
-              <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>&nbsp;&nbsp;</td>
-              <td>0</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Applies to:</em>&nbsp;&nbsp;</td>
-              <td><a>shapes</a> and <a>text content elements</a></td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Inherited:</em>&nbsp;&nbsp;</td>
-              <td>yes</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Percentages:</em>&nbsp;&nbsp;</td>
-              <td>see prose</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Media:</em>&nbsp;&nbsp;</td>
-              <td>visual</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em><a
-              href="animate.html#Animatable">Animatable</a>:</em>&nbsp;&nbsp;</td>
-              <td>yes</td>
-            </tr>
-          </table>
-        </dd>
-      </dl>
-    </div>
-
-<p><a>'stroke-dashoffset'</a> specifies the distance into the dash
-pattern to start the dash.</p>
-
-<p>If a <a>&lt;percentage&gt;</a> is used, the value represents a
-percentage of the current viewport (see <a href="coords.html#Units">Units</a>).</p>
-
-<p>Values can be negative.</p>
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="StrokeDashoffsetProperty">stroke-dashoffset</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>0</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>shapes</a> and <a>text content elements</a></td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>yes</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed&#160;value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a href="animate.html#Animatable">Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
 
-    <div class="propdef">
-      <dl>
-        <dt id="StrokeOpacityProperty"><span class="propdef-title property">'stroke-opacity'</span></dt>
-        <dd>
-          <table summary="stroke-opacity property" class="propinfo"
-          cellspacing="0" cellpadding="0">
-            <tr valign="baseline">
-              <td><em>Value:</em>&nbsp;&nbsp;</td>
-              <td>&lt;opacity-value&gt; | <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>&nbsp;&nbsp;</td>
-              <td>1</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Applies to:</em>&nbsp;&nbsp;</td>
-              <td><a>shapes</a> and <a>text content elements</a></td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Inherited:</em>&nbsp;&nbsp;</td>
-              <td>yes</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Percentages:</em>&nbsp;&nbsp;</td>
-              <td>N/A</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em>Media:</em>&nbsp;&nbsp;</td>
-              <td>visual</td>
-            </tr>
-            <tr valign="baseline">
-              <td><em><a
-              href="animate.html#Animatable">Animatable</a>:</em>&nbsp;&nbsp;</td>
-              <td>yes</td>
-            </tr>
-          </table>
-        </dd>
-      </dl>
-    </div>
+<p>The <a>'stroke-dashoffset'</a> property specifies the distance into the repeated
+dash pattern to start the stroke dashing at the beginning of the path.  If the
+value is negative, then the effect is the same as dash offset <var>d</var>:</p>
 
-<p><a>'stroke-opacity'</a> specifies the opacity of the
-painting operation used to stroke the current object. (See
-<a href="render.html#PaintingShapesAndText">Painting shapes and text</a>.)</p>
-
-<dl>
-  <dt><span class='prop-value'>&lt;opacity-value&gt;</span></dt>
-  <dd>The opacity of the painting operation used to stroke the current
-  object, as a <a>&lt;number&gt;</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>.)</dd>
-</dl>
-
-<p>Related properties: <a>'fill-opacity'</a> and <a>'opacity'</a>.</p>
+<div role="math" aria-describedby="math-dashoffset">
+  <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+    <mrow>
+      <mi>d</mi>
+      <mo>=</mo>
+      <mi>s</mi>
+      <mo>-</mo>
+      <mfenced open="|" close="|">
+        <mi style="font-family: sans-serif">‘stroke-dashoffset’</mi>
+      </mfenced>
+      <mo>mod</mo>
+      <mi>s</mi>
+    </mrow>
+  </math>
+  <pre id="math-dashoffset">d = s - (abs(stroke-dashoffset) mod s)</pre>
+</div>
 
-<div class="annotation">
- <p>
-   SVG2 Requirement: Have the vector-effect property
- </p>
- <p>
-   Resolution: SVG 2 will have the vector-effect property
- </p>
- <p>
-   <a href="http://www.w3.org/2012/02/02-svg-minutes.html#item05">SVG Working Group Teleconference 02 Feb 2012</a>.
- </p>
- <p>
-   Purpose: To get stroke that doesn't scale when element is transformed. 
- </p>
- <p>
-   Owner: Erik
- </p>
+<p>where <var>s</var> is the sum of the dash array values.</p>
+
+<p class="issue">An illustration of stroke dashing would be good here.</p>
+
+<div class="ready-for-wg-review">
+<h3 id="StrokeOpacity">Stroke paint opacity: this <span class="property">'stroke-opacity'</span> property</h3>
+
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="StrokeOpacityProperty">stroke-opacity</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td><a>&lt;number&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>1</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>shapes</a> and <a>text content elements</a></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&#160;value:</th>
+    <td>As specified, but clamped to the range [0, 1].</td>
+  </tr>
+  <tr>
+    <th><a href="animate.html#Animatable">Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+  
+<p>The <a>'stroke-opacity'</a> property specifies the opacity of the
+painting operation used to stroke the current object.  (See
+<a href="render.html#PaintingShapesAndText">Painting shapes and text</a>.)
+As with <a>'fill-opacity'</a>, a value of 0 means fully transparent, and a value of 1
+means fully opaque.</p>
+
+<p class="note">See also the <a>'opacity'</a> property, which specifies
+group opacity.</p>
 </div>
 
 <h2 id="VisibilityControl">Controlling visibility</h2>
--- a/master/style/default_svg.css	Sun May 20 15:42:40 2012 +1000
+++ b/master/style/default_svg.css	Sun May 20 18:44:40 2012 +1000
@@ -233,6 +233,9 @@
    headings. */
 .chapter-divider { margin: 4em 0 }
 
+/* An indented definition. */
+.definition { margin-left: 2em }
+
 /* HTML-equivalent math for ATs. */
 div[role="math"] > :first-child ~ * {
   position: absolute;