Some cleanup of more stroke properties.
--- 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 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> </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> </td>
- <td>miter</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a>shapes</a> and <a>text content elements</a></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>
+<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 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> </td>
- <td><miterlimit> | <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>4</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a>shapes</a> and <a>text content elements</a></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="StrokeMiterlimitProperty">stroke-miterlimit</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><number></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 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'><miterlimit></span></dt>
+ <dt><span class='prop-value'><number></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'><miterlimit></span> must be a
<a><number></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> </td>
- <td>none | <dasharray> | <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>shapes</a> and <a>text content elements</a></td>
- </tr>
- <tr valign="baseline">
- <td><em>Inherited:</em> </td>
- <td>yes</td>
- </tr>
- <tr valign="baseline">
- <td><em>Percentages:</em> </td>
- <td>yes (see below)</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 (<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'><dasharray></span> contains a
-list of comma and/or white space separated
-<a href="types.html#DataTypeLength"><length></a>s and
-<a><percentage></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><dasharray></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 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"><dasharray></dfn> = [ <a><length></a> | <a><percentage></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'><dasharray></span></dt>
<dd>
- <p>A list of comma and/or white space separated
- <a href="types.html#DataTypeLength"><length></a>s
- (which can have a <a href="coords.html#Units">unit identifier</a>)
- and <a><percentage></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 <dasharray> is as follows:</p>
+ <p>Specifies a dashing pattern to use. A <a><dasharray></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><dasharray></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> </td>
- <td><a><percentage></a> | <a><length></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> </td>
- <td>0</td>
- </tr>
- <tr valign="baseline">
- <td><em>Applies to:</em> </td>
- <td><a>shapes</a> and <a>text content elements</a></td>
- </tr>
- <tr valign="baseline">
- <td><em>Inherited:</em> </td>
- <td>yes</td>
- </tr>
- <tr valign="baseline">
- <td><em>Percentages:</em> </td>
- <td>see prose</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><a>'stroke-dashoffset'</a> specifies the distance into the dash
-pattern to start the dash.</p>
-
-<p>If a <a><percentage></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><length></a> | <a><percentage></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 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> </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>shapes</a> and <a>text content elements</a></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>
+<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'><opacity-value></span></dt>
- <dd>The opacity of the painting operation used to stroke the current
- 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>.)</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><number></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 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;