--- a/master/painting.html Tue May 22 17:24:46 2012 +1000
+++ b/master/painting.html Tue May 22 22:07:52 2012 +1000
@@ -202,7 +202,8 @@
<a>'path'</a> elements (i.e., subpaths without a closepath command) and
<a>'polyline'</a> elements.</p>
-<h3 id="WindingRule">Winding rule: the <span class="property">'fill-rule'</span> property</h3>
+<h3 id="WindingRule">Winding rule: the <span class="property">'fill-rule'</span>
+property</h3>
<table class="propdef">
<tr>
@@ -271,7 +272,8 @@
<div class="figure">
<img src="images/painting/fillrule-nonzero.svg" alt="Image showing nonzero fill rule"/>
- <p class="caption">The effect of a nonzero fill rule on paths with self-intersections and enclosed subpaths.</p>
+ <p class="caption">The effect of a nonzero fill rule on paths with self-intersections
+ and enclosed subpaths.</p>
</div>
</dd>
@@ -287,7 +289,8 @@
<div class="figure">
<img src="images/painting/fillrule-evenodd.svg" alt="Image showing evenodd fill rule"/>
- <p class="caption">The effect of an evenodd fill rule on paths with self-intersections and enclosed subpaths.</p>
+ <p class="caption">The effect of an evenodd fill rule on paths with self-intersections
+ and enclosed subpaths.</p>
</div>
</dd>
</dl>
@@ -297,7 +300,8 @@
one may simply choose a different ray that does not have such problem
intersections.</p>
-<h3 id="FillOpacity">Fill paint opacity: the <span class="property">'fill-opacity'</span> property</h3>
+<h3 id="FillOpacity">Fill paint opacity: the <span class="property">'fill-opacity'</span>
+property</h3>
<table class="propdef">
<tr>
@@ -390,7 +394,8 @@
properties were converted to an equivalent <a>'path'</a> element and
then filled using the given paint server.</p>
-<h3 id="SpecifyingStrokePaint">Specifying stroke paint: the <span class="property">'stroke'</span> property</h3>
+<h3 id="SpecifyingStrokePaint">Specifying stroke paint: the <span class="property">'stroke'</span>
+property</h3>
<table class="propdef">
<tr>
@@ -485,7 +490,8 @@
<p>See proposal page: <a href="http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Stroke_dash_adjustment">Stroke dash adjustment</a>.</p>
</div>
-<h3 id="StrokeOpacity">Stroke paint opacity: the <span class="property">'stroke-opacity'</span> property</h3>
+<h3 id="StrokeOpacity">Stroke paint opacity: the <span class="property">'stroke-opacity'</span>
+property</h3>
<table class="propdef">
<tr>
@@ -535,7 +541,8 @@
<p class="note">See also the <a>'opacity'</a> property, which specifies
group opacity.</p>
-<h3 id="StrokeWidth">Stroke width: the <span class="property">'stroke-width'</span> property</h3>
+<h3 id="StrokeWidth">Stroke width: the <span class="property">'stroke-width'</span>
+property</h3>
<table class="propdef">
<tr>
@@ -580,7 +587,8 @@
A zero value causes no stroke to be painted. A negative value
is <a>invalid</a>.</p>
-<h3 id="LineCaps">Drawing caps at the ends of strokes: the <span class="property">'stroke-linecap'</span> property</h3>
+<h3 id="LineCaps">Drawing caps at the ends of strokes: the <span class="property">'stroke-linecap'</span>
+property</h3>
<table class="propdef">
<tr>
@@ -656,14 +664,16 @@
</dl>
<div class="figure">
- <img alt="Image showing three paths, each with a different line cap." src="images/painting/linecap.svg" style="border: 1px solid #888"/>
+ <img class="bordered" src="images/painting/linecap.svg"
+ alt="Image showing three paths, each with a different line cap."/>
<p class="caption">The three types of line caps.</p>
</div>
<p>See the definition of the <a>cap shape</a> below for a more precise
description of the shape a line cap will have.</p>
-<h3 id="LineJoin">Controlling line joins: the <span class="property">'stroke-linejoin'</span> and <span class="property">'stroke-miterlimit'</span> properties</h3>
+<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>
@@ -705,7 +715,8 @@
</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>
+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>
<dl>
<dt><span class='prop-value'>miter</span></dt>
@@ -723,7 +734,8 @@
</dl>
<div class="figure">
- <img alt="Image showing three paths, each with a different line join." src="images/painting/linejoin.svg" style="border: 1px solid #888"/>
+ <img class="bordered" src="images/painting/linejoin.svg"
+ alt="Image showing three paths, each with a different line join."/>
<p class="caption">The three types of line joins.</p>
</div>
@@ -819,7 +831,8 @@
<p>See the definition of the <a>line join shape</a> below for a more precise
description of the shape a line join will have.</p>
-<h3 id="StrokeDashing">Dashing strokes: the <span class="property">'stroke-dasharray'</span> and <span class="property">'stroke-dashoffset'</span> properties</h3>
+<h3 id="StrokeDashing">Dashing strokes: the <span class="property">'stroke-dasharray'</span>
+and <span class="property">'stroke-dashoffset'</span> properties</h3>
<table class="propdef">
<tr>
@@ -862,7 +875,8 @@
<p>where:</p>
-<p class="definition"><dfn id="DataTypeDasharray"><dasharray></dfn> = [ <a><length></a> | <a><percentage></a> ]#*</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
@@ -896,7 +910,7 @@
</dl>
<div class="figure">
- <img src="images/painting/dashes.svg" alt="Image showing a thick, dashed stroke." style="border: 1px solid #888"/>
+ <img class="bordered" src="images/painting/dashes.svg" alt="Image showing a thick, dashed stroke."/>
<p class="caption">A dashed stroke. The dashing pattern is <span class="prop-value">20,10</span>.
The red line shows the actual path that is stroked.</p>
</div>
@@ -964,9 +978,12 @@
<p>where <var>s</var> is the sum of the dash array values.</p>
<div class="figure">
- <img src="images/painting/dashoffset.svg" alt="Image showing a thick, dashed stroke with a non-zero dash offset." style="border: 1px solid #888"/>
- <p class="caption">A dashed stroke with a non-zero dash offset. The dashing pattern is <span class="prop-value">20,10</span>
- and the dash offset is <span class="prop-value">15</span>. The red line shows the actual path that is stroked.</p>
+ <img class="bordered" src="images/painting/dashoffset.svg"
+ alt="Image showing a thick, dashed stroke with a non-zero dash offset."/>
+ <p class="caption">A dashed stroke with a non-zero dash offset. The dashing
+ pattern is <span class="prop-value">20,10</span> and the dash offset is
+ <span class="prop-value">15</span>. The red line shows the actual path that
+ is stroked.</p>
</div>
<p>See the definition of <a>dash positions</a> below for a more precise
@@ -990,24 +1007,37 @@
<li>For each pair <<var>start</var>, <var>end</var>> in <var>positions</var>:
<ol>
<li>Let <var>dash</var> be the shape that includes, for all distances
- between <var>start</var> and <var>end</var>
- along the subpath, all points that lie on the line perpendicular to the subpath
- at that distance and which are within distance <a>'stroke-width'</a> of the
- point on the subpath at that position.</li>
- <li>Set <var>dash</var> to be the union of <var>dash</var> and the starting <a>cap shape</a> for the subpath at position <var>start</var>.</li>
- <li>Set <var>dash</var> to be the union of <var>dash</var> and the ending <a>cap shape</a> for the subpath at position <var>end</var>.</li>
- <li>Let <var>index</var> and <var>last</var> be the indexes of the path segments in the subpath at distance <var>start</var> and <var>end</var> along the subpath.
+ between <var>start</var> and <var>end</var> along the subpath, all
+ points that lie on the line perpendicular to the subpath at that
+ distance and which are within distance <a>'stroke-width'</a> of
+ the point on the subpath at that position.</li>
+
+ <li>Set <var>dash</var> to be the union of <var>dash</var> and the
+ starting <a>cap shape</a> for the subpath at position <var>start</var>.</li>
+
+ <li>Set <var>dash</var> to be the union of <var>dash</var> and the
+ ending <a>cap shape</a> for the subpath at position <var>end</var>.</li>
+
+ <li>
+ Let <var>index</var> and <var>last</var> be the indexes of the
+ path segments in the subpath at distance <var>start</var> and
+ <var>end</var> along the subpath.
+
<p class="note">It does not matter whether any zero length segments are
- included when choosing <var>index</var> and <var>last</var>.</p>
- </li>
+ included when choosing <var>index</var> and <var>last</var>.</p>
+ </li>
+
<li>While <var>index</var> < <var>last</var>:
<ol>
<li>Set <var>dash</var> to be the union of <var>dash</var> and the
- <a>line join shape</a> for the subpath at segment index <var>index</var>.</li>
+ <a>line join shape</a> for the subpath at segment index <var>index</var>.</li>
+
<li>Set <var>index</var> to <var>index</var> + 1.</li>
</ol>
</li>
- <li>Set <var>shape</var> to be the union of <var>shape</var> and <var>stroke</var>.</li>
+
+ <li>Set <var>shape</var> to be the union of <var>shape</var> and
+ <var>stroke</var>.</li>
</ol>
</li>
</ol>
@@ -1015,36 +1045,57 @@
<li>Return <var>shape</var>.</li>
</ol>
-<p>The <dfn id="TermDashPositions">dash positions</dfn> for a given subpath of the
-<a>equivalent path</a> of a <a>'path'</a> or <a>basic shape</a>
-is a sequence of pairs of values, which represent the starting and ending distance along the subpath
-for each of the dashes that form the subpath's stroke. It is determined as follows:</p>
+<p>The <dfn id="TermDashPositions">dash positions</dfn> for a given subpath of
+the <a>equivalent path</a> of a <a>'path'</a> or <a>basic shape</a> is a
+sequence of pairs of values, which represent the starting and ending distance
+along the subpath for each of the dashes that form the subpath's stroke. It is
+determined as follows:</p>
<ol>
<li>Let <var>pathlength</var> be the length of the subpath.</li>
- <li>Let <var>dashes</var> be the list of values of <a>'stroke-dasharray'</a> on the element,
- converted to user units, repeated if necessary so that it has an even number of elements; if the property
- has the value <span class="prop-value">none</span>, then the list has a single value 0.</li>
+ <li>Let <var>dashes</var> be the list of values of <a>'stroke-dasharray'</a>
+ on the element, converted to user units, repeated if necessary so that it has
+ an even number of elements; if the property has the value
+ <span class="prop-value">none</span>, then the list has a single value 0.</li>
+
<li>Let <var>count</var> be the number of values in <var>dashes</var>.</li>
<li>Let <var>sum</var> be the sum of the values in <var>dashes</var>.</li>
- <li>If <var>sum</var> = 0, then return a sequence with the single pair <0, <var>pathlength</var>>.</li>
+
+ <li>If <var>sum</var> = 0, then return a sequence with the single pair
+ <0, <var>pathlength</var>>.</li>
<li>Let <var>positions</var> be an empty sequence.</li>
- <li>Let <var>offset</var> be the value of the <a>'stroke-dashoffset'</a> property on the element.</li>
- <li>If <var>offset</var> is negative, then set <var>offset</var> to <var>sum</var> − abs(<var>offset</var>).</li>
+
+ <li>Let <var>offset</var> be the value of the <a>'stroke-dashoffset'</a>
+ property on the element.</li>
+
+ <li>If <var>offset</var> is negative, then set <var>offset</var> to
+ <var>sum</var> − abs(<var>offset</var>).</li>
+
<li>Set <var>offset</var> to <var>offset</var> mod <var>sum</var>.</li>
- <li>Let <var>index</var> be the smallest integer such that sum(<var>dashes<sub>i</sub></var>, 0 ≤ <var>i</var> ≤ <var>index</var>) ≥ <var>offset</var>.</li>
- <li>Let <var>dashlength</var> be min(sum(<var>dashes<sub>i</sub></var>, 0 ≤ <var>i</var> ≤ <var>index</var>) − <var>offset</var>, <var>pathlength</var>).</li>
- <li>If <var>index</var> mod 2 = 0, then append to <var>positions</var> the pair <0, <var>dashlength</var>>.</li>
+ <li>Let <var>index</var> be the smallest integer such that
+ sum(<var>dashes<sub>i</sub></var>, 0 ≤ <var>i</var> ≤ <var>index</var>) ≥ <var>offset</var>.</li>
+
+ <li>Let <var>dashlength</var> be
+ min(sum(<var>dashes<sub>i</sub></var>, 0 ≤ <var>i</var> ≤ <var>index</var>) − <var>offset</var>, <var>pathlength</var>).</li>
+
+ <li>If <var>index</var> mod 2 = 0, then append to <var>positions</var> the
+ pair <0, <var>dashlength</var>>.</li>
+
<li>Let <var>position</var> be <var>dashlength</var>.</li>
<li>While <var>position</var> < <var>pathlength</var>:
<ol>
<li>Set <var>index</var> to (<var>index</var> + 1) mod <var>count</var>.</li>
- <li>Let <var>dashlength</var> be min(<var>dashes</var><sub><var>index</var></sub>, <var>pathlength</var> − <var>position</var>).</li>
- <li>If <var>index</var> mod 2 = 0, then append to <var>positions</var> the pair <<var>position</var>, <var>position</var> + <var>dashlength</var>>.</li>
+
+ <li>Let <var>dashlength</var> be
+ min(<var>dashes</var><sub><var>index</var></sub>, <var>pathlength</var> − <var>position</var>).</li>
+
+ <li>If <var>index</var> mod 2 = 0, then append to <var>positions</var> the
+ pair <<var>position</var>, <var>position</var> + <var>dashlength</var>>.</li>
+
<li>Set <var>position</var> to <var>position</var> + <var>dashlength</var>.</li>
</ol>
</li>
@@ -1052,10 +1103,12 @@
<li>Return <var>positions</var>.</li>
</ol>
-<p>The starting and ending <dfn id="TermCapShape">cap shapes</dfn> at a given <var>position</var> along a subpath are determined as follows:</p>
+<p>The starting and ending <dfn id="TermCapShape">cap shapes</dfn> at a given
+<var>position</var> along a subpath are determined as follows:</p>
<ol>
<li>If <a>'stroke-linecap'</a> is <span class="prop-value">butt</span>, then return an empty shape.</li>
+
<li>Otherwise, if <a>'stroke-linecap'</a> is <span class="prop-value">round</span>, then:
<ol>
<li>If this is a starting cap, then return a semicircle of radius <a>'stroke-width'</a> positioned such that:
@@ -1074,6 +1127,7 @@
</li>
</ol>
</li>
+
<li>Otherwise, <a>'stroke-linecap'</a> is <span class="prop-value">square</span>:
<ol>
<li>If this is a starting cap, then return a rectangle with side lengths <a>'stroke-width'</a> and <a>'stroke-width'</a> / 2 positioned such that:
@@ -1095,15 +1149,18 @@
</ol>
<div class="figure">
- <img alt="Image showing how to construct the three types of line caps" src="images/painting/linecap-construction.svg" style="border: 1px solid #888"/>
+ <img class="bordered" src="images/painting/linecap-construction.svg"
+ alt="Image showing how to construct the three types of line caps"/>
<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>
+ 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>
-<p>The <dfn id="TermLineJoinShape">line join shape</dfn> for a given segment of a subpath is determined as follows:</p>
+<p>The <dfn id="TermLineJoinShape">line join shape</dfn> for a given segment of
+a subpath is determined as follows:</p>
<ol>
<li>Let <var>P</var> be the point at the end of the segment.</li>
@@ -1112,42 +1169,63 @@
<li>If <var>A</var> and <var>B</var> are the same line, then return an empty shape.</li>
- <li>Let <var>A<sub>left</sub></var> and <var>A<sub>right</sub></var> be lines parallel to <var>A</var> at a distance of <a>'stroke-width'</a> / 2 to the left and to the right of <var>A</var>, respectively.</li>
- <li>Let <var>B<sub>left</sub></var> and <var>B<sub>right</sub></var> be lines parallel to <var>B</var> at a distance of <a>'stroke-width'</a> / 2 to the left and to the right of <var>B</var>, respectively.</li>
+ <li>Let <var>A<sub>left</sub></var> and <var>A<sub>right</sub></var> be lines
+ parallel to <var>A</var> at a distance of <a>'stroke-width'</a> / 2 to the
+ left and to the right of <var>A</var>, respectively.</li>
- <li>Let <var>P</var><sub>1</sub>, <var>P</var><sub>2</sub> and <var>P</var><sub>3</sub> be points determined as follows:
+ <li>Let <var>B<sub>left</sub></var> and <var>B<sub>right</sub></var> be lines
+ parallel to <var>B</var> at a distance of <a>'stroke-width'</a> / 2 to the
+ left and to the right of <var>B</var>, respectively.</li>
+
+ <li>
+ Let <var>P</var><sub>1</sub>, <var>P</var><sub>2</sub> and
+ <var>P</var><sub>3</sub> be points determined as follows:
+
<ol>
- <li>If the acute angle between <var>A</var> and <var>B</var> is on the right of these lines, considering the direction of the subpath, then
- <var>P</var><sub>1</sub> and <var>P</var><sub>2</sub> are the points on
- <var>A<sub>left</sub></var> and <var>B<sub>left</sub></var> closest to <var>P</var>,
- and <var>P</var><sub>3</sub> is the intersection of <var>A<sub>left</sub></var> and <var>B<sub>left</sub></var>.</li>
- <li>Otherwise,
- <var>P</var><sub>1</sub> and <var>P</var><sub>2</sub> are the points on
- <var>A<sub>right</sub></var> and <var>B<sub>right</sub></var> closest to <var>P</var>,
- and <var>P</var><sub>3</sub> is the intersection of <var>A<sub>right</sub></var> and <var>B<sub>right</sub></var>.</li>
+ <li>If the acute angle between <var>A</var> and <var>B</var> is on the
+ right of these lines, considering the direction of the subpath, then
+ <var>P</var><sub>1</sub> and <var>P</var><sub>2</sub> are the points on
+ <var>A<sub>left</sub></var> and <var>B<sub>left</sub></var> closest to
+ <var>P</var>, and <var>P</var><sub>3</sub> is the intersection of
+ <var>A<sub>left</sub></var> and <var>B<sub>left</sub></var>.</li>
+
+ <li>Otherwise, <var>P</var><sub>1</sub> and <var>P</var><sub>2</sub> are
+ the points on <var>A<sub>right</sub></var> and <var>B<sub>right</sub></var>
+ closest to <var>P</var>, and <var>P</var><sub>3</sub> is the intersection
+ of <var>A<sub>right</sub></var> and <var>B<sub>right</sub></var>.</li>
</ol>
</li>
- <li>Let <var>bevel</var> be the triangle formed from the three points <var>P</var>, <var>P</var><sub>1</sub> and <var>P</var><sub>2</sub>.</li>
+ <li>Let <var>bevel</var> be the triangle formed from the three points
+ <var>P</var>, <var>P</var><sub>1</sub> and <var>P</var><sub>2</sub>.</li>
- <li>If <a>'stroke-linejoin'</a> is <span class="prop-value">round</span>, then return the union
- of <var>bevel</var> and a circular sector of radius <a>'stroke-width'</a>, centered on <var>P</var>,
- and which has <var>P</var><sub>1</sub> and <var>P</var><sub>2</sub> as the two endpoints of the arc.</li>
+ <li>If <a>'stroke-linejoin'</a> is <span class="prop-value">round</span>, then
+ return the union of <var>bevel</var> and a circular sector of radius
+ <a>'stroke-width'</a>, centered on <var>P</var>, and which has
+ <var>P</var><sub>1</sub> and <var>P</var><sub>2</sub> as the two endpoints of
+ the arc.</li>
<li>Let <var>θ</var> be the angle between <var>A</var> and <var>B</var>.</li>
- <li>If <a>'stroke-linejoin'</a> is <span class="prop-value">miter</span> and 1 / sin(<var>θ</var> / 2) ≤ <a>'stroke-miterlimit'</a>, then
- return the union of <var>bevel</var> and the triangle formed from the three points <var>P</var><sub>1</sub>, <var>P</var><sub>2</sub> and <var>P</var><sub>3</sub>.</li>
+
+ <li>If <a>'stroke-linejoin'</a> is <span class="prop-value">miter</span> and
+ 1 / sin(<var>θ</var> / 2) ≤ <a>'stroke-miterlimit'</a>, then return the union
+ of <var>bevel</var> and the triangle formed from the three points
+ <var>P</var><sub>1</sub>, <var>P</var><sub>2</sub> and <var>P</var><sub>3</sub>.</li>
<li>Return <var>bevel</var>.</li>
</ol>
<div class="figure">
- <img src="images/painting/linejoin-construction.svg" style="border: 1px solid #888"/>
- <p class="caption">Construction of a round line join shape, shown in pink. The white line is the original
- path, which has two segments that come to a point, and the gray region is the stroke.</p>
+ <img class="bordered" src="images/painting/linejoin-construction.svg"
+ alt="Image showing the lines and points computed to construct a round line join."/>
+ <p class="caption">Construction of a round line join shape, shown in pink.
+ The white line is the original path, which has two segments that come to a
+ point, and the gray region is the stroke.</p>
</div>
-<h2 id="VisibilityControl">Controlling visibility: the effect of the <span class="property">'display'</span> and <span class="property">'visibility'</span> properties</h2>
+<h2 id="VisibilityControl">Controlling visibility: the effect of the <span
+class="property">'display'</span> and <span class="property">'visibility'</span>
+properties</h2>
<p class="note">See the CSS 2.1 specification for the definitions
of <a>'display'</a> and <a>'visibility'</a>.
@@ -1166,9 +1244,16 @@
<ul>
<li>are not rendered</li>
+
<li>are not sensitive to <a href="interact.html#UIEvents">pointer events</a></li>
- <li>do not contribute to <a href="coords.html#ObjectBoundingBox">bounding box calculations</a></li>
- <li>do not contribute to <a href="masking.html#Masking">masks</a> or <a href="masking.html#ClippingPaths">clipping paths</a>, when descendants of a <a>'mask element'</a> or <a>'clipPath'</a> element</li>
+
+ <li>do not contribute to <a href="coords.html#ObjectBoundingBox">bounding box
+ calculations</a></li>
+
+ <li>do not contribute to <a href="masking.html#Masking">masks</a> or
+ <a href="masking.html#ClippingPaths">clipping paths</a>, when descendants of a
+ <a>'mask element'</a> or <a>'clipPath'</a> element</li>
+
<li>are not considered when performing <a href="text.html#TextLayout">text layout</a></li>
</ul>
@@ -1761,7 +1846,8 @@
</edit:with>
<div class="ready-for-wg-review">
-<h2 id="PaintOrder">Controlling paint operation order: the <span class="property">'paint-order'</span> property</h2>
+<h2 id="PaintOrder">Controlling paint operation order: the
+<span class="property">'paint-order'</span> property</h2>
<table class="propdef">
<tr>
@@ -1817,8 +1903,10 @@
the three keywords are omitted, they are painted last, in the order they
would be painted with <span class="prop-value">paint-order: normal</span>.</p>
-<p class="note">This mean that, for example, <span class="prop-value">paint-order: stroke</span>
-has the same rendering behavior as <span class="prop-value">paint-order: stroke fill markers</span>.</p>
+<p class="note">This mean that, for example,
+<span class="prop-value">paint-order: stroke</span>
+has the same rendering behavior as
+<span class="prop-value">paint-order: stroke fill markers</span>.</p>
<p class="issue">This does not affect interaction, but once the
<a href="http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Marker_children">marker children proposal</a>
@@ -1847,7 +1935,10 @@
</svg>
]]></pre>
- <p style="text-align: center"><img src="images/painting/paintorder.svg" alt="Image showing text with the stroke painted below the fill." style="border: 1px solid #888"/></p>
+ <p style="text-align: center">
+ <img class="bordered" src="images/painting/paintorder.svg"
+ alt="Image showing text with the stroke painted below the fill."/>
+ </p>
</div>
</div>