--- a/master/images/painting/linecap.svg Sat May 19 11:53:23 2012 +1000
+++ b/master/images/painting/linecap.svg Sun May 20 15:36:17 2012 +1000
@@ -1,38 +1,76 @@
-<?xml version="1.0" standalone="no"?>
-<svg width="12cm" height="2cm" viewBox="0 0 1200 200" version="1.1"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <desc>Example linecap - demonstrates three stroke-linecap values</desc>
- <rect x="1" y="1" width="1198" height="198" fill="none" stroke="blue" />
- <style type="text/css"><![CDATA[
- .thick { stroke:black; stroke-width:70 }
- .thin { stroke:#ffcccc; stroke-width:5 }
- text { text-anchor:middle; font-size:50; font-family:Verdana }
- circle { fill:#ffcccc; stroke:none }
- ]]></style>
- <defs>
- <line id="line1" x1="-125" x2="125" y1="0" y2="0" fill="none" />
- <g id="circles">
- <circle id="circle1" cx="-125" cy="0" r="8"/>
- <circle id="circle2" cx="125" cy="0" r="8"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 350" width="600" height="350">
+ <g text-anchor="middle" font-family="sans-serif" transform="translate(0,-10)">
+ <g transform="translate(-30,0)">
+ <path fill="none" stroke="#444" stroke-width="20" d="M 100,100 C 200,100 100,200 200,150"/>
+ <path fill="none" stroke="#ccc" stroke-width="2" d="M 100,100 C 200,100 100,200 200,150"/>
+ <g stroke="#ccc" stroke-width="1">
+ <g stroke="#6a9100">
+ <path d="M 60,100 h 80" transform="rotate(90,100,100)"/>
+ <path d="M -40,0 h 80" transform="translate(200,150) rotate(65)"/>
+ </g>
+ </g>
+ <text x="150" y="40">‘butt’ cap</text>
</g>
- </defs>
- <g transform="translate(200,75)">
- <use class="thick" xlink:href="#line1" stroke-linecap="butt"/>
- <use class="thin" xlink:href="#line1"/>
- <use xlink:href="#circles"/>
- <text y="90">'butt' cap</text>
- </g>
- <g transform="translate(600,75)">
- <use class="thick" xlink:href="#line1" stroke-linecap="round"/>
- <use class="thin" xlink:href="#line1"/>
- <use xlink:href="#circles"/>
- <text y="90">'round' cap</text>
- </g>
- <g transform="translate(1000,75)">
- <use class="thick" xlink:href="#line1" stroke-linecap="square"/>
- <use class="thin" xlink:href="#line1"/>
- <use xlink:href="#circles"/>
- <text y="90">'square' cap</text>
+
+ <g transform="translate(150,0)">
+ <path fill="none" stroke="#444" stroke-width="20" d="M 100,100 C 200,100 100,200 200,150"/>
+ <path fill="none" stroke="#ccc" stroke-width="2" d="M 100,100 C 200,100 100,200 200,150"/>
+ <path fill="deeppink" d="M 100,90 A 10,10 0 0 0 100,110"/>
+ <path fill="deeppink" d="M 100,90 A 10,10 0 0 0 100,110" transform="translate(100,50) rotate(155,100,100)"/>
+ <g stroke="#ccc" stroke-width="1">
+ <g stroke="#6a9100">
+ <path d="M 60,100 h 80" transform="rotate(90,100,100)"/>
+ <path d="M -40,0 h 80" transform="translate(200,150) rotate(65)"/>
+ </g>
+ </g>
+ <text x="150" y="40">‘round’ cap</text>
+ </g>
+
+ <g transform="translate(330,0)">
+ <path fill="none" stroke="#444" stroke-width="20" d="M 100,100 C 200,100 100,200 200,150"/>
+ <path fill="none" stroke="#ccc" stroke-width="2" d="M 100,100 C 200,100 100,200 200,150"/>
+ <path fill="deeppink" d="M 100,90 v 20 h -10 v -20 z"/>
+ <path fill="deeppink" d="M 100,90 v 20 h -10 v -20 z" transform="translate(100,50) rotate(155,100,100)"/>
+ <g stroke="#ccc" stroke-width="1">
+ <g stroke="#6a9100">
+ <path d="M 60,100 h 80" transform="rotate(90,100,100)"/>
+ <path d="M -40,0 h 80" transform="translate(200,150) rotate(65)"/>
+ </g>
+ </g>
+ <text x="150" y="40">‘square’ cap</text>
+ </g>
+
+ <g transform="translate(-30,130)">
+ <g transform="translate(0,-10)">
+ <path d="M 80,150 h 142" stroke="#aaa" stroke-width="140" stroke-dasharray="1 9"/>
+ <path d="M 150,80 v 142" stroke="#aaa" stroke-width="140" stroke-dasharray="1 9"/>
+ </g>
+ <path fill="none" stroke="#444" stroke-width="20" d="M 100,100 C 200,100 100,200 200,150"/>
+ <!--
+ <path fill="none" stroke="#ccc" stroke-width="2" d="M 100,100 C 200,100 100,200 200,150"/>
+ -->
+ </g>
+
+ <g transform="translate(150,130)">
+ <g transform="translate(0,-10)">
+ <path d="M 80,150 h 142" stroke="#aaa" stroke-width="140" stroke-dasharray="1 9"/>
+ <path d="M 150,80 v 142" stroke="#aaa" stroke-width="140" stroke-dasharray="1 9"/>
+ </g>
+ <path fill="none" stroke="#444" stroke-width="20" stroke-linecap="round" d="M 100,100 C 200,100 100,200 200,150"/>
+ <!--
+ <path fill="none" stroke="#ccc" stroke-width="2" d="M 100,100 C 200,100 100,200 200,150"/>
+ -->
+ </g>
+
+ <g transform="translate(330,130)">
+ <g transform="translate(0,-10)">
+ <path d="M 80,150 h 142" stroke="#aaa" stroke-width="140" stroke-dasharray="1 9"/>
+ <path d="M 150,80 v 142" stroke="#aaa" stroke-width="140" stroke-dasharray="1 9"/>
+ </g>
+ <path fill="none" stroke="#444" stroke-width="20" stroke-linecap="square" d="M 100,100 C 200,100 100,200 200,150"/>
+ <!--
+ <path fill="none" stroke="#ccc" stroke-width="2" d="M 100,100 C 200,100 100,200 200,150"/>
+ -->
+ </g>
</g>
</svg>
-
--- a/master/painting.html Sat May 19 11:53:23 2012 +1000
+++ b/master/painting.html Sun May 20 15:36:17 2012 +1000
@@ -141,7 +141,7 @@
processing</a>).</dd>
</dl>
-<div class="ready-for-wider-review">
+<div class="ready-for-wg-review">
<h2 id="FillProperties">Fill properties</h2>
<h3 id="SpecifyingFillPaint">Specifying fill paint: the <span class="property">'fill'</span> property</h3>
@@ -347,7 +347,6 @@
<p class="note">See also the <a>'opacity'</a> property, which
specifies group opacity.</p>
-</div>
<h2 id="StrokeProperties">Stroke properties</h2>
@@ -373,47 +372,48 @@
properties were converted to an equivalent <a>'path'</a> element and
then filled using the given paint server.</p>
- <div class="propdef">
- <dl>
- <dt id="StrokeProperty"><span class="propdef-title property">'stroke'</span></dt>
- <dd>
- <table summary="stroke property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td><paint> (See <a
- href="painting.html#SpecifyingPaint">Specifying
- paint</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>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="SpecifyingStrokePaint">Specifying stroke paint: the <span class="property">'stroke'</span> property</h3>
+
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="StrokeProperty">stroke</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><paint></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>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>If a <a><color></a> value is part of the specified value, then
+ it is computed as per the <a>'color'</a> property. For anything else the
+ computed value is as specified.</td>
+ </tr>
+ <tr>
+ <th><a href="animate.html#Animatable">Animatable</a>:</th>
+ <td>yes</td>
+ </tr>
+</table>
<p>The <a>'stroke'</a> property paints along the outline of the given
graphical element.</p>
@@ -467,113 +467,152 @@
<p>See proposal page: <a href="http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Stroke_dash_adjustment">Stroke dash adjustment</a>.</p>
</div>
- <div class="propdef">
- <dl>
- <dt id="StrokeWidthProperty"><span class="propdef-title property">'stroke-width'</span></dt>
- <dd>
- <table summary="stroke-width 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>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>Yes</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="StrokeWidth">Stroke width: the <span class="property">'stroke-width'</span> property</h3>
+
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="StrokeWidthProperty">stroke-width</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><a><percentage></a> | <a><length></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>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>
<p>This property specifies the width of the stroke on the current object.
-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>A zero value causes no stroke to be painted. A negative value
-is an error (see <a href="implnote.html#ErrorProcessing">Error processing</a>).</p>
+A zero value causes no stroke to be painted. A negative value
+is <a>invalid</a>.</p>
- <div class="propdef">
- <dl>
- <dt id="StrokeLinecapProperty"><span class="propdef-title property">'stroke-linecap'</span></dt>
- <dd>
- <table summary="stroke-linecap property" class="propinfo"
- cellspacing="0" cellpadding="0">
- <tr valign="baseline">
- <td><em>Value:</em> </td>
- <td>butt | round | square | <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>butt</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="LineCaps">Drawing caps at the ends of strokes: the <span class="property">'stroke-linecap'</span> property</h3>
+
+<table class="propdef">
+ <tr>
+ <th>Name:</th>
+ <td><dfn id="StrokeLinecapProperty">stroke-linecap</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td>butt | round | square</td>
+ </tr>
+ <tr>
+ <th>Initial:</th>
+ <td>butt</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-linecap'</a> specifies the shape to be used at the end of
-open subpaths when they are stroked. For further details see the <a href="implnote.html#PathElementImplementationNotes">path implementation notes</a>.</p>
+open subpaths when they are stroked. The possible values are:</p>
<dl>
<dt><span class='prop-value'>butt</span></dt>
- <dd>See drawing below.</dd>
+ <dd>This value indicates that the stroke for each subpath does not
+ extend beyond its two endpoints. A zero length subpath will therefore
+ not have any stroke.</dd>
+
<dt><span class='prop-value'>round</span></dt>
- <dd>See drawing below.</dd>
+ <dd>
+ <p>This value indicates that at each end of each subpath, the shape
+ representing the stroke will be extended by a half circle with a radius equal
+ to the stroke width. The half circles are placed such that their center points,
+ were they full circles, lie at the start and end points of each subpath.
+ They are oriented such that their straight lines are perpendicular
+ to the tangent of the subpaths at their respective positions and their
+ semi-circular shapes point away from the other end of the subpath.</p>
+
+ <p>If a subpath has zero length, then the resulting effect is that the
+ stroke for that subpath consists solely of a full circle centered
+ at the subpath's point.</p>
+ </dd>
+
<dt><span class='prop-value'>square</span></dt>
- <dd>See drawing below.</dd>
+ <dd>
+ <p>This value indicates that at the end of each subpath, the shape
+ representing the stroke will be extended by a rectangle whose width
+ is equal to the stroke width and whose height is half of the stroke width.
+ The rectangles are placed such that the mid-point of one of their longer
+ edges lies at the start and end points of each subpath. They are oriented
+ such that their longer edges are perpendicular to the tangent of the
+ subpaths at their respective positions and their rectangular shapes
+ point away from the other end of the subpath.</p>
+
+ <p>If a subpath has zero length, then the resulting effect is that the
+ stroke for that subpath consists solely of a square with side length
+ equal to the stroke width, centered at the subpath's point, and oriented
+ such that two of its sides are parallel to the effective tangent
+ at that subpath's point. See
+ <a href="implnote.html#PathElementImplementationNotes"><span class='element-name'>'path'</span>
+ element implementation notes</a> for details on how to determine the tangent
+ at a zero-length subpath.</p>
+ </dd>
</dl>
-<p><img alt="Image showing stroke-linecap alternatives" src="images/painting/linecap.png" width="454" height="76" /></p>
-<p class="view-as-svg"><a href="images/painting/linecap.svg">View this example as SVG (SVG- and CSS-enabled browsers only)</a></p>
+<p class="issue">We should move all of the path implementation notes
+into here and the Paths chapter, rather than having it pushed out to
+an appendix.</p>
+
+<div class="figure">
+ <img alt="Image showing stroke-linecap alternatives" src="images/painting/linecap.svg" style="border: 1px solid #888"/>
+ <p class="caption">The three different <a>'stroke-linecap'</a> values used on
+ paths with a single, non-zero length subpath. The white line is the path itself and
+ the thick gray area is the stroke. On the top row, the green lines indicate the
+ perpendicular to the tangent at the path endpoints and the pink areas are the
+ caps. The bottom row shows the stroke without the perpendicular and cap highlighting.</p>
+</div>
+
+</div>
<div class="propdef">
<dl>