- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Mon, 23 Sep 2013 00:06:10 -0700
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/4ad1d1107d8e branches: changeset: 535:4ad1d1107d8e user: Cameron McCormack <cam@mcc.id.au> date: Mon Sep 23 17:04:09 2013 +1000 description: Use new-style attribute definition boxes in Basic Shapes chapter. diffstat: master/shapes.html | 540 ++++++++++++++++++++++++++-------------------------- 1 files changed, 271 insertions(+), 269 deletions(-) diffs (658 lines): diff --git a/master/shapes.html b/master/shapes.html --- a/master/shapes.html +++ b/master/shapes.html @@ -101,143 +101,116 @@ appropriate values for attributes <a>'rx readonly attribute <a class="idlinterface" href="types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="shapes.html#__svg__SVGRectElement__ry">ry</a>; };</pre> </td> </tr> </table> --> <edit:elementsummary name='rect'/> - <div class="adef-list"> - <p><em>Attribute definitions:</em></p> - <dl> - <dt id="RectElementXAttribute"><span - class="adef">x</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The x-axis coordinate of the side of the rectangle - which has the smaller x-axis coordinate value in the - current user coordinate system.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="RectElementYAttribute"><span - class="adef">y</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The y-axis coordinate of the side of the rectangle - which has the smaller y-axis coordinate value in the - current user coordinate system.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="RectElementWidthAttribute"><span - class="adef">width</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The width of the rectangle.<br /> - A negative value is an error (see <a - href="implnote.html#ErrorProcessing">Error processing</a>). - A value of zero disables rendering of the element.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="RectElementHeightAttribute"><span - class="adef">height</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The height of the rectangle.<br /> - A negative value is an error (see <a - href="implnote.html#ErrorProcessing">Error processing</a>). - A value of zero disables rendering of the element.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="RectElementRXAttribute"><span - class="adef">rx</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>For rounded rectangles, the x-axis radius of the - ellipse used to round off the corners of the - rectangle.<br /> - A negative value is an error (see <a - href="implnote.html#ErrorProcessing">Error - processing</a>).<br /> - See the notes below about what happens if the attribute is - not specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="RectElementRYAttribute"><span - class="adef">ry</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>For rounded rectangles, the y-axis radius of the - ellipse used to round off the corners of the - rectangle.<br /> - A negative value is an error (see <a - href="implnote.html#ErrorProcessing">Error - processing</a>).<br /> - See the notes below about what happens if the attribute is - not specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - </dl> - </div> +<p><em>Attribute definitions:</em></p> -<!-- -<p>If a properly specified value is provided for <a>'rx'</a> -but not for <a>'ry'</a>, then the user agent processes the -<a>'rect'</a> element with the effective value for <a>'ry'</a> as -equal to <a>'rx'</a>. If a properly specified value is provided for -<a>'ry'</a> but not for <a>'rx'</a>, then the user agent processes -the <a>'rect'</a> element with the effective value for <a>'rx'</a> -as equal to <a>'ry'</a>. If neither <a>'rx'</a> nor <a>'ry'</a> -has a properly specified value, then the user agent processes -the <a>'rect'</a> element as if no rounding had been specified, -resulting in square corners. If <a>'rx'</a> is greater than half -of the width of the rectangle, then the user agent processes the -<a>'rect'</a> element with the effective value for <a>'rx'</a> as -half of the width of the rectangle. If <a>'ry'</a> is greater than -half of the height of the rectangle, then the user agent processes -the <a>'rect'</a> element with the effective value for <a>'ry'</a> -as half of the height of the rectangle.</p> ---> +<dl class="attrdef-list"> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="RectElementXAttribute">x</dfn>, <dfn id="RectElementYAttribute">y</dfn></td> + <td><a><length></a></td> + <td>0</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + The coordinates of the left and top edges of the rectangle, in the current + user coordinate system. + </dd> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="RectElementWidthAttribute">width</dfn>, <dfn id="RectElementHeightAttribute">height</dfn></td> + <td><a><length></a></td> + <td>0</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + The width and height of the rectangle. A negative value for either + attribute is an error (see <a href="implnote.html#ErrorProcessing">Error processing</a>). + A value of zero for either attribute disables rendering of the element. + </dd> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="RectElementRXAttribute">rx</dfn>, <dfn id="RectElementRYAttribute">ry</dfn></td> + <td><a><length></a></td> + <td>(see below)</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + <p>For rounded rectangles, the x- and y-axis radii of the + ellipse used to round off the corners of the rectangle. + A negative value for either attribute is an error + (see <a href="implnote.html#ErrorProcessing">Error processing</a>).</p> -<p>The values used for the x- and y-axis rounded corner radii are -determined implicitly if the <a>'rx'</a> or <a>'ry'</a> attributes (or both) -are not specified, or are specified but with invalid values. -The values are also subject to clamping so that the lengths of -the straight segments of the rectangle are never negative. The -effective values for <a>'rx'</a> and <a>'ry'</a> are determined by following -these steps in order:</p> + <p>The values used for the x- and y-axis rounded corner radii are + determined implicitly if the <a>'rx'</a> or <a>'ry'</a> attributes (or both) + are not specified, or are specified but with invalid values. + The values are also subject to clamping so that the lengths of + the straight segments of the rectangle are never negative. The + effective values for <a>'rx'</a> and <a>'ry'</a> are determined by following + these steps in order:</p> -<ol> - <li>Let <var>rx</var> and <var>ry</var> be length values.</li> + <ol> + <li>Let <var>rx</var> and <var>ry</var> be length values.</li> - <li>If neither <a>'rx'</a> nor <a>'ry'</a> are properly specified, then set both - <var>rx</var> and <var>ry</var> to 0. (This will result in square corners.)</li> + <li>If neither <a>'rx'</a> nor <a>'ry'</a> are properly specified, then set both + <var>rx</var> and <var>ry</var> to 0. (This will result in square corners.)</li> - <li>Otherwise, if a properly specified value is provided for <a>'rx'</a>, but - not for <a>'ry'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'rx'</a>.</li> + <li>Otherwise, if a properly specified value is provided for <a>'rx'</a>, but + not for <a>'ry'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'rx'</a>.</li> - <li>Otherwise, if a properly specified value is provided for <a>'ry'</a>, but - not for <a>'rx'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'ry'</a>.</li> + <li>Otherwise, if a properly specified value is provided for <a>'ry'</a>, but + not for <a>'rx'</a>, then set both <var>rx</var> and <var>ry</var> to the value of <a>'ry'</a>.</li> - <li>Otherwise, both <a>'rx'</a> and <a>'ry'</a> were specified properly. Set <var>rx</var> to - the value of <a>'rx'</a> and <var>ry</var> to the value of <a>'ry'</a>.</li> + <li>Otherwise, both <a>'rx'</a> and <a>'ry'</a> were specified properly. Set <var>rx</var> to + the value of <a>'rx'</a> and <var>ry</var> to the value of <a>'ry'</a>.</li> - <li>If <var>rx</var> is greater than half of <a>'width'</a>, then set - <var>rx</var> to half of <a>'width'</a>.</li> + <li>If <var>rx</var> is greater than half of <a>'width'</a>, then set + <var>rx</var> to half of <a>'width'</a>.</li> - <li>If <var>ry</var> is greater than half of <a>'height'</a>, then set - <var>ry</var> to half of <a>'height'</a>.</li> + <li>If <var>ry</var> is greater than half of <a>'height'</a>, then set + <var>ry</var> to half of <a>'height'</a>.</li> - <li>The effective values of <a>'rx'</a> and <a>'ry'</a> are <var>rx</var> and - <var>ry</var>, respectively.</li> -</ol> + <li>The effective values of <a>'rx'</a> and <a>'ry'</a> are <var>rx</var> and + <var>ry</var>, respectively.</li> + </ol> + </dd> +</dl> <p>Mathematically, a <a>'rect'</a> element can be mapped to an equivalent <a>'path'</a> element as follows: (Note: all coordinate and length values are first converted into user space coordinates according to <a href="coords.html#Units">Units</a>.)</p> <ul> <li>perform an absolute <a @@ -302,51 +275,58 @@ attribute, it will be assigned the same <edit:with element='circle'> <p>The <a>'circle'</a> element defines a circle based on a center point and a radius.</p> <edit:elementsummary name='circle'/> - <div class="adef-list"> - <p><em>Attribute definitions:</em></p> - <dl> - <dt id="CircleElementCXAttribute"><span - class="adef">cx</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The x-axis coordinate of the center of the - circle.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="CircleElementCYAttribute"><span - class="adef">cy</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The y-axis coordinate of the center of the - circle.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="CircleElementRAttribute"><span - class="adef">r</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The radius of the circle.<br /> - A negative value is an error (see <a - href="implnote.html#ErrorProcessing">Error processing</a>). - A value of zero disables rendering of the element.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - </dl> - </div> +<p><em>Attribute definitions:</em></p> + +<dl class="attrdef-list"> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="CircleElementCXAttribute">cx</dfn>, <dfn id="CircleElementCYAttribute">cy</dfn></td> + <td><a><length></a></td> + <td>0</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + The coordinates of the center of the circle. + </dd> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="RectElementRAttribute">r</dfn></td> + <td><a><length></a></td> + <td>0</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd>The radius of the circle. A negative value is an error (see + <a href="implnote.html#ErrorProcessing">Error processing</a>). + A value of zero disables rendering of the element.</dd> +</dl> <p>The arc of a <a>'circle'</a> element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.</p> <p class="issue">Saying that it progresses towards the "9 o'clock point" is slightly unclear, since it doesn't say whether it goes clockwise @@ -366,61 +346,61 @@ with red and stroked with blue.</p> <edit:with element='ellipse'> <p>The <a>'ellipse'</a> element defines an ellipse which is axis-aligned with the current <a>user coordinate system</a> based on a center point and two radii.</p> <edit:elementsummary name='ellipse'/> - <div class="adef-list"> - <p><em>Attribute definitions:</em></p> - <dl> - <dt id="EllipseElementCXAttribute"><span - class="adef">cx</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The x-axis coordinate of the center of the - ellipse.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="EllipseElementCYAttribute"><span - class="adef">cy</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The y-axis coordinate of the center of the - ellipse.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="EllipseElementRXAttribute"><span - class="adef">rx</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The x-axis radius of the ellipse.<br /> - A negative value is an error (see <a - href="implnote.html#ErrorProcessing">Error processing</a>). - A value of zero disables rendering of the element.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="EllipseElementRYAttribute"><span - class="adef">ry</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The y-axis radius of the ellipse.<br /> - A negative value is an error (see <a - href="implnote.html#ErrorProcessing">Error processing</a>). - A value of zero disables rendering of the element.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - </dl> - </div> +<p><em>Attribute definitions:</em></p> + +<dl class="attrdef-list"> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="EllipseElementCXAttribute">cx</dfn>, <dfn id="EllipseElementCYAttribute">cy</dfn></td> + <td><a><length></a></td> + <td>0</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + The coordinates of the center of the ellipse. + </dd> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="EllipseElementRXAttribute">rx</dfn>, <dfn id="EllipseElementRYAttribute">ry</dfn></td> + <td><a><length></a></td> + <td>0</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + The x- and y-axis radii of the ellipse. A negative value for + either attribute is an error (see + <a href="implnote.html#ErrorProcessing">Error processing</a>). + A value of zero disables rendering of the element. + </dd> +</dl> <p id="ExampleEllipse01">The arc of an <a>'ellipse'</a> element begins at the "3 o'clock" point on the radius and progresses towards the "9 o'clock" point. The starting point and direction of the arc are affected by the user space transform in the same manner as the geometry of the element.</p> <p><span class="example-ref">Example ellipse01</span> below specifies @@ -439,57 +419,58 @@ ellipse). The second ellipse is rotated. <edit:with element='line'> <p>The <a>'line'</a> element defines a line segment that starts at one point and ends at another.</p> <edit:elementsummary name='line'/> - <div class="adef-list"> - <p><em>Attribute definitions:</em></p> - <dl> - <dt id="LineElementX1Attribute"><span - class="adef">x1</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The x-axis coordinate of the start of the line.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="LineElementY1Attribute"><span - class="adef">y1</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The y-axis coordinate of the start of the line.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="LineElementX2Attribute"><span - class="adef">x2</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The x-axis coordinate of the end of the line.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - <dt id="LineElementY2Attribute"><span - class="adef">y2</span> = "<span class="attr-value"><a - href="types.html#DataTypeLength"><length></a></span>"</dt> - <dd>The y-axis coordinate of the end of the line.<br /> - If the attribute is not specified, the effect is as if a - value of "0" were specified.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - </dl> - </div> +<p><em>Attribute definitions:</em></p> + +<dl class="attrdef-list"> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="LineElementX1Attribute">x1</dfn>, <dfn id="EllipseElementY1Attribute">y1</dfn></td> + <td><a><length></a></td> + <td>0</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + The x- and y-axis coordinates of the start of the line. + </dd> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="LineElementX2Attribute">x2</dfn>, <dfn id="EllipseElementY2Attribute">y2</dfn></td> + <td><a><length></a></td> + <td>0</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + The x- and y-axis coordinates of the end of the line. + </dd> +</dl> <p>Mathematically, a <a>'line'</a> element can be mapped to an equivalent <a>'path'</a> element as follows: (Note: all coordinate and length values are first converted into user space coordinates according to <a href="coords.html#Units">Units</a>.)</p> <ul> <li>perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a> @@ -521,33 +502,43 @@ lines have different thicknesses.</p> <edit:with element='polyline'> <p>The <a>'polyline'</a> element defines a set of connected straight line segments. Typically, <a>'polyline'</a> elements define open shapes.</p> <edit:elementsummary name='polyline'/> - <div class="adef-list"> - <p><em>Attribute definitions:</em></p> - <dl> - <dt id="PolylineElementPointsAttribute"><span - class="adef">points</span> = "<span class="attr-value"><a - href="shapes.html#PointsBNF"><list-of-points></a></span>"</dt> - <dd>The points that make up the polyline. All coordinate - values are in the user coordinate system.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - </dl> - </div> +<p><em>Attribute definitions:</em></p> -<p>If an odd number of coordinates is provided, then the element is in -error, with the same user agent behavior as occurs with an incorrectly -specified <a>'path'</a> element.</p> +<dl class="attrdef-list"> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="PolylineElementPointsAttribute">points</dfn></td> + <td><a href="shapes.html#PointsBNF"><list-of-points></a></td> + <td>(none)</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + <p>The points that make up the polyline. All coordinate + values are in the user coordinate system.</p> + <p>If an odd number of coordinates is provided, then the element is in + error, with the same user agent behavior as occurs with an incorrectly + specified <a>'path'</a> element.</p> + </dd> +</dl> <p>Mathematically, a <a>'polyline'</a> element can be mapped to an equivalent <a>'path'</a> element as follows:</p> <ul> <li>perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a> operation to the first coordinate pair in the list of points</li> @@ -568,33 +559,43 @@ below specifies a polyline in the user c <edit:with element='polygon'> <p>The <a>'polygon'</a> element defines a closed shape consisting of a set of connected straight line segments.</p> <edit:elementsummary name='polygon'/> - <div class="adef-list"> - <p><em>Attribute definitions:</em></p> - <dl> - <dt id="PolygonElementPointsAttribute"><span - class="adef">points</span> = "<span class="attr-value"><a - href="shapes.html#PointsBNF"><list-of-points></a></span>"</dt> - <dd>The points that make up the polygon. All coordinate - values are in the user coordinate system.<br /> - <span class="anim-target"><a - href="animate.html#Animatable">Animatable</a>: - yes.</span></dd> - </dl> - </div> +<p><em>Attribute definitions:</em></p> -<p>If an odd number of coordinates is provided, then the element is in -error, with the same user agent behavior as occurs with an incorrectly -specified <a>'path'</a> element.</p> +<dl class="attrdef-list"> + <dt> + <table class="propdef attrdef"> + <tr> + <th>Name</th> + <th>Value</th> + <th>Lacuna value</th> + <th>Animatable</th> + </tr> + <tr> + <td><dfn id="PolygonElementPointsAttribute">points</dfn></td> + <td><a href="shapes.html#PointsBNF"><list-of-points></a></td> + <td>(none)</td> + <td>yes</td> + </tr> + </table> + </dt> + <dd> + <p>The points that make up the polygon. All coordinate + values are in the user coordinate system.</p> + <p>If an odd number of coordinates is provided, then the element is in + error, with the same user agent behavior as occurs with an incorrectly + specified <a>'path'</a> element.</p> + </dd> +</dl> <p>Mathematically, a <a>'polygon'</a> element can be mapped to an equivalent <a>'path'</a> element as follows:</p> <ul> <li>perform an absolute <a href="paths.html#PathDataMovetoCommands">moveto</a> operation to the first coordinate pair in the list of points</li>
Received on Monday, 23 September 2013 07:06:40 UTC