--- a/master/images/painting/markers-positioned.svg Fri May 25 09:44:35 2012 +1000
+++ b/master/images/painting/markers-positioned.svg Fri May 25 10:40:49 2012 +1000
@@ -1,24 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg"
width="450" height="200" viewBox="0 0 450 200">
- <marker id="m" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
- <path d="M 5,1 L 9,5 5,9 1,5 z" fill="#6a9100"/>
- </marker>
- <marker id="m2" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
- <circle cx="5" cy="5" r="2" fill="dodgerblue"/>
- </marker>
- <marker id="m3" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="-22.5">
- <path d="M 3,3 L 7,7 M 3,7 L 7,3" fill="none" stroke="black" stroke-width="2"/>
- </marker>
- <path d="M 100,50 C 100,250 500,-50 300,150" fill="none" stroke="deeppink" stroke-width="3" stroke-linecap="round"
- marker-start="url(#m)" marker-end="url(#m)"/>
+ <marker id="m" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
+ <path d="M 5,1 L 9,5 5,9 1,5 z" fill="#6a9100"/>
+ </marker>
+ <marker id="m2" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
+ <circle cx="5" cy="5" r="2" fill="dodgerblue"/>
+ </marker>
+ <marker id="m3" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="-22.5">
+ <path d="M 3,3 L 7,7 M 3,7 L 7,3" fill="none" stroke="black" stroke-width="2"/>
+ </marker>
+ <path d="M 100,50 C 100,250 500,-50 300,150" fill="none" stroke="deeppink" stroke-width="3" stroke-linecap="round"
+ marker-start="url(#m)" marker-end="url(#m)"/>
- <!-- 50 -->
- <path d="M 112.1631851196289,97.71469116210938" stroke-width="3" marker-start="url(#m2)"/>
+ <!-- 50 -->
+ <path d="M 112.1631851196289,97.71469116210938" stroke-width="3" marker-start="url(#m2)"/>
- <!-- 50% -->
- <path d="M 252.30154418945312,107.19843292236328" stroke-width="3" marker-start="url(#m3)"/>
+ <!-- 50% -->
+ <path d="M 252.30154418945312,107.19843292236328" stroke-width="3" marker-start="url(#m3)"/>
- <!-- 50 from end -->
- <path d="M 334.529296875,113.84600830078125" stroke-width="3" marker-start="url(#m2)"/>
+ <!-- 50 from end -->
+ <path d="M 334.529296875,113.84600830078125" stroke-width="3" marker-start="url(#m2)"/>
</svg>
Binary file master/images/painting/markers-segment.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/markers-segment.svg Fri May 25 10:40:49 2012 +1000
@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="400" height="200">
+
+ <defs>
+ <marker id="m1" markerWidth="8" markerHeight="8" refX="4" refY="4" markerUnits="userSpaceOnUse">
+ <circle cx="4" cy="4" r="3" fill="deeppink"/>
+ </marker>
+ <g id="m2">
+ <path d="M -4,-4 L 4,4 M -4,4 L 4,-4" fill="none" stroke="white" stroke-width="4"/>
+ <path d="M -4,-4 L 4,4 M -4,4 L 4,-4" fill="none" stroke="black" stroke-width="2"/>
+ </g>
+ </defs>
+
+ <!-- grid lines -->
+ <path stroke="#888" d="M 40,20 360,20 M 40,40 360,40 M 40,60 360,60
+ M 40,80 360,80 M 40,100 360,100 M 40,120 360,120
+ M 40,140 360,140 M 40,160 360,160 M 40,180 360,180"/>
+
+ <polyline points="50,100 100,20 150,50 200,130 250,80 300,170 350,100"
+ fill="none" stroke="deeppink" stroke-width="2"
+ style="marker: url(#m1)"/>
+
+ <use xlink:href="#m2" x="75" y="60"/>
+ <use xlink:href="#m2" x="125" y="35"/>
+ <use xlink:href="#m2" x="175" y="90"/>
+ <use xlink:href="#m2" x="225" y="105"/>
+ <use xlink:href="#m2" x="275" y="125"/>
+ <use xlink:href="#m2" x="325" y="135"/>
+</svg>
--- a/master/painting.html Fri May 25 09:44:35 2012 +1000
+++ b/master/painting.html Fri May 25 10:40:49 2012 +1000
@@ -1829,7 +1829,48 @@
at the path segment centers.</dd>
</dl>
-<p class="issue">Add an example.</p>
+<div class="example">
+ <p>The following example shows the use of both <a>vertex markers</a> and
+ <a>segment markers</a> to construct a line graph.</p>
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+
+ <marker id="Circle" markerWidth="8" markerHeight="8" refX="4" refY="4"
+ markerUnits="userSpaceOnUse">
+ <circle cx="4" cy="4" r="3" fill="deeppink"/>
+ </marker>
+
+ <marker id="Cross" markerWidth="10" markerHeight="10" refX="0" refY="0"
+ viewBox="-5 -5 10 10" markerUnits="userSpaceOnUse"
+ fill="none">
+ <path d="M -4,-4 L 4,4 M -4,4 L 4,-4" stroke="white" stroke-width="4"/>
+ <path d="M -4,-4 L 4,4 M -4,4 L 4,-4" stroke="black" stroke-width="2"/>
+ </marker>
+
+ <!-- grid lines -->
+ <path stroke="#888" d="M 40,20 360,20 M 40,40 360,40 M 40,60 360,60
+ M 40,80 360,80 M 40,100 360,100 M 40,120 360,120
+ M 40,140 360,140 M 40,160 360,160 M 40,180 360,180"/>
+
+ <!-- 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)"/>
+</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
+ of each line segment in the line graph.</p>
+ </div>
+</div>
<h3 id="RepeatingMarkers">Repeating markers: the <span class="property">'marker-pattern'</span>
property</h3>