--- a/master/painting.html Fri May 25 12:13:28 2012 +1000
+++ b/master/painting.html Fri May 25 15:25:31 2012 +1000
@@ -1364,42 +1364,40 @@
table.attrdef { border-left-color: #888; border-left-width: 0; background-color: #eee; font-size: 90% }
table.attrdef th, table.attrdef td { border-bottom-color: #ccc }
-/*
table.attrdef th:first-child,
-table.attrdef td:first-child { width: 16em }
-*/
-
-table.attrdef th:first-child,
-table.attrdef td:first-child { width: auto }
-
-table.attrdef td:first-child { font-style: normal }
+table.attrdef td:first-child { width: 16em; padding-left: 0 !important }
table.attrdef th:first-child + th,
-table.attrdef td:first-child + td { width: 6em }
+table.attrdef td:first-child + td { width: auto }
table.attrdef th:first-child + th + th,
table.attrdef td:first-child + td + td { width: 6em }
+
+table.attrdef th:first-child + th + th + th,
+table.attrdef td:first-child + td + td + td { width: 6em; padding-right: 0 !important }
</style>
<dl class="attrdef-list">
- <dt><dfn id="MarkerUnitsAttribute">markerUnits</dfn></dt>
- <dd>
+ <dt>
<table class="propdef attrdef">
<tr>
-<!-- <th>Name</th>-->
+ <th>Name</th>
<th>Value</th>
<th>Lacuna value</th>
<th>Animatable</th>
</tr>
<tr>
-<!-- <td><dfn id="MarkerUnitsAttribute">markerUnits</dfn></td>-->
+ <td><dfn id="MarkerUnitsAttribute">markerUnits</dfn></td>
<td>strokeWidth | userSpaceOnUse</td>
<td>strokeWidth</td>
<td>yes</td>
</tr>
</table>
+</dt>
+<dd>
+
<p>The <a>'markerUnits'</a> attribute defines the coordinate system for
attributes <a>'markerWidth'</a>, <a>'markerHeight'</a> and the
contents of the <a>'marker element'</a>. Values have the
@@ -1423,26 +1421,27 @@
</dl>
</dd>
-<dt><dfn id="MarkerWidthAttribute">markerWidth</dfn>,
-<dfn id="MarkerHeightAttribute">markerHeight</dfn></dt>
-<dd>
+<dt>
<table class="propdef attrdef">
<tr>
-<!-- <th>Name</th>-->
+ <th>Name</th>
<th>Value</th>
<th>Lacuna value</th>
<th>Animatable</th>
</tr>
<tr>
-<!-- <td><dfn id="MarkerWidthAttribute">markerWidth</dfn>,
- <dfn id="MarkerHeightAttribute">markerHeight</dfn></td>-->
+ <td><dfn id="MarkerWidthAttribute">markerWidth</dfn>,
+ <dfn id="MarkerHeightAttribute">markerHeight</dfn></td>
<td><a><length></a></td>
<td>3</td>
<td>yes</td>
</tr>
</table>
+</dt>
+<dd>
+
<p>The <a>'markerWidth'</a> and <a>'markerHeight'</a> attributes
represent the size of the viewport into which the marker is to
be fitted when it is rendered. A value of zero for either
@@ -1451,25 +1450,26 @@
<a href="implnote.html#ErrorProcessing">Error processing</a>).</p>
</dd>
-<dt><dfn id="RefXAttribute">refX</dfn>,
-<dfn id="RefYAttribute">refY</dfn></dt>
-<dd>
+<dt>
<table class="propdef attrdef">
<tr>
-<!-- <th>Name</th>-->
+ <th>Name</th>
<th>Value</th>
<th>Lacuna value</th>
<th>Animatable</th>
</tr>
<tr>
-<!-- <td><dfn id="RefXAttribute">refX</dfn>, <dfn id="RefYAttribute">refY</dfn></td>-->
+ <td><dfn id="RefXAttribute">refX</dfn>, <dfn id="RefYAttribute">refY</dfn></td>
<td><a><coordinate></a></td>
<td>0</td>
<td>yes</td>
</tr>
</table>
+</dt>
+<dd>
+
<p>The <a>'refX'</a> and <a>'refY'</a> attributes define the reference
point of the marker which is to be aligned exactly at the marker's
position on the <a>markable element</a>. They are interpreted as being in the
@@ -1477,24 +1477,26 @@
<a>'viewBox'</a> and <a>'preserveAspectRatio'</a> attributes.</p>
</dd>
-<dt><dfn id="OrientAttribute">orient</dfn></dt>
-<dd>
+<dt>
<table class="propdef attrdef">
<tr>
-<!-- <th>Name</th>-->
+ <th>Name</th>
<th>Value</th>
<th>Lacuna value</th>
<th>Animatable</th>
</tr>
<tr>
-<!-- <td><dfn id="MarkerOrientAttribute">orient</dfn></td>-->
+ <td><dfn id="MarkerOrientAttribute">orient</dfn></td>
<td>auto | <a><angle></a></td>
<td>0</td>
<td>yes (non-additive)</td>
</tr>
</table>
+</dt>
+<dd>
+
<p>The <a>'orient'</a> attribute indicates how the marker
is rotated when it is placed at its position on the <a>markable element</a>.
Values have the following meaning:</p>
@@ -1542,24 +1544,25 @@
</dl>
</dd>
-<dt><dfn id="PositionAttribute">position</dfn></dt>
-<dd>
-
+
+<dt>
<table class="propdef attrdef">
<tr>
-<!-- <th>Name</th>-->
+ <th>Name</th>
<th>Value</th>
<th>Lacuna value</th>
<th>Animatable</th>
</tr>
<tr>
-<!-- <td><dfn id="PositionAttribute">position</dfn></td>-->
+ <td><dfn id="PositionAttribute">position</dfn></td>
<td><a><length></a> | <a><percentage></a></td>
<td>as if not specified</td>
<td>yes</td>
</tr>
</table>
+</dt>
+<dd>
<p>If the <a>'marker element'</a> element is a child of a <a>markable element</a>,
then the presence of a <a>'position'</a> attribute indicates that the marker is
a <a>positioned marker</a> and that it will be painted at the specified
@@ -1572,24 +1575,25 @@
an "in error" / "unsupported" value?</p>
</dd>
-<dt><dfn id="HrefAttribute">href</dfn></dt>
-<dd>
+<dt>
<table class="propdef attrdef">
<tr>
-<!-- <th>Name</th>-->
+ <th>Name</th>
<th>Value</th>
<th>Lacuna value</th>
<th>Animatable</th>
</tr>
<tr>
-<!-- <td><dfn id="HrefAttribute">href</dfn></td>-->
+ <td><dfn id="HrefAttribute">href</dfn></td>
<td><a><iri></a></td>
<td>as if not specified</td>
<td>yes</td>
</tr>
</table>
+</dt>
+<dd>
<p>When a <a>'marker element'</a> element is being used as a <a>positioned marker</a>,
the <a>'href'</a> attribute indicates that the <a>'marker element'</a>
referenced by the attribute is to be used as the definition of the marker. The
@@ -1890,15 +1894,10 @@
<!-- the graph line -->
<polyline points="50,100 100,20 150,50 200,130 250,80 300,170 350,100"
fill="none" stroke="deeppink" stroke-width="2"
- marker-start="url(#Circle)" marker-mid="url(#Circle)"
- marker-end="url(#Circle)" marker-segment="url(#Cross)"/>
+ marker="url(#Circle)" marker-segment="url(#Cross)"/>
</svg>
]]></pre>
-<p class="issue">Once the <a>'marker property'</a> shorthand is sorted out,
-we might want to use it instead of the four separate presentation attributes
-above.</p>
-
<div class="figure">
<img class="bordered" src="images/painting/markers-segment.svg"/>
<p class="caption">Segment markers are used to place crosses at the center
@@ -1992,7 +1991,7 @@
viewBox="-4 -6 8 12" markerUnits="userSpaceOnUse" orient="auto">
<rect x="-3" y="-5" width="2" height="10"/>
<rect x="1" y="-5" width="2" height="10"/>
- </g>
+ </marker>
<marker id="SingleDash" markerWidth="4" markerHeight="12" refX="0" refY="0"
viewBox="-2 -6 4 12" markerUnits="userSpaceOnUse" orient="auto">
<rect x="-1" y="-5" width="2" height="10"/>
@@ -2013,10 +2012,6 @@
</div>
</div>
-</edit:with>
-</div>
-<edit:with element='marker'>
-
<h3 id="MarkerShorthand">Marker shorthand: the <span class="property">'marker'</span>
property</h3>
@@ -2027,7 +2022,15 @@
</tr>
<tr>
<th>Value:</th>
- <td>none | <a><funciri></a></td>
+ <td style="white-space: nowrap">
+ <div>
+ [ none | <a><funciri></a> ]{1,4}
+ [ / <a class="property" href="#MarkerPatternProperty"><‘marker-pattern’></a> ]?
+ </div>
+ <div style="margin-left: 2em">
+ | <a><funciri></a>{0,4} [ <a><length></a> | <a><percentage></a> ] [ <a><length></a> | <a><percentage></a> | <a><funciri></a> ]*
+ </div>
+ </td>
</tr>
<tr>
<th>Initial:</th>
@@ -2059,15 +2062,48 @@
</tr>
</table>
-<p class="issue">Extend the shorthand so that it can set
-<a>'marker-start'</a>, <a>'marker-mid'</a> and <a>'marker-end'</a>
-separately, and also set <a>'marker-segment'</a> and <a>'marker-pattern'</a>.</p>
-
-<p>The <a>'marker property'</a> property specifies
-the marker symbol that shall be used for all points on the given
-element. It is a shorthand for setting the three individual marker
-properties – <a>'marker-start'</a>, <a>'marker-mid'</a> and <a>'marker-end'</a> –
-to the same value.</p>
+<p>The <a>'marker property'</a> property sets values for the
+<a>'marker-start'</a>, <a>'marker-mid'</a>, <a>'marker-end'</a>,
+<a>'marker-segment'</a> and <a>'marker-pattern'</a> properties.
+Values for have the following meanings:</p>
+
+<dl>
+ <dt><span class="prop-value">none | <a><funciri></a></span></dt>
+ <dd>Sets <a>'marker-start'</a>, <a>'marker-mid'</a> and <a>'marker-end'</a>
+ to the specified value, and sets <a>'marker-segment'</a> and
+ <a>'marker-pattern'</a> to <span class="prop-value">none</span>.</dd>
+
+ <dt><span class="prop-value">[ none | <a><funciri></a> ]{2}</span></dt>
+ <dd>Sets <a>'marker-start'</a> and <a>'marker-end'</a> to the two
+ values specified, and sets <a>'marker-mid'</a>, <a>'marker-segment'</a> and
+ <a>'marker-pattern'</a> to <span class="prop-value">none</span>.</dd>
+
+ <dt><span class="prop-value">[ none | <a><funciri></a> ]{3}</span></dt>
+ <dd>Sets <a>'marker-start'</a>, <a>'marker-mid'</a> and <a>'marker-end'</a> to
+ the three values specified, and sets <a>'marker-segment'</a> and
+ <a>'marker-pattern'</a> to <span class="prop-value">none</span>.</dd>
+
+ <dt><span class="prop-value">[ none | <a><funciri></a> ]{4}</span></dt>
+ <dd>Sets <a>'marker-start'</a>, <a>'marker-segment'</a>, <a>'marker-mid'</a>
+ and <a>'marker-end'</a> to the four <a><funciri></a> values
+ specified, and sets <a>'marker-pattern'</a> to
+ <span class="prop-value">none</span>.</dd>
+
+ <dt><span class="prop-value">[ none | <a><funciri></a> ]{4} / <a class="property" href="#MarkerPatternProperty"><‘marker-pattern’></a></span></dt>
+ <dd>Sets <a>'marker-start'</a>, <a>'marker-segment'</a>, <a>'marker-mid'</a>
+ and <a>'marker-end'</a> to the four <a><funciri></a> values
+ specified before the slash, and sets <a>'marker-pattern'</a> to
+ the value after the slash.</dd>
+
+ <dt>anything else</dt>
+ <dd>Sets <a>'marker-start'</a>, <a>'marker-segment'</a>, <a>'marker-mid'</a>
+ and <a>'marker-end'</a> to <span class="prop-value">none</span>,
+ and sets <a>'marker-pattern'</a> to the specified value.</dd>
+</dl>
+
+</edit:with>
+</div>
+<edit:with element='marker'>
<h3 id="MarkerAlgorithm">Details on how markers are rendered</h3>