Add an example for marker-pattern.
Binary file master/images/painting/markers-repeating.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/master/images/painting/markers-repeating.svg Fri May 25 11:45:04 2012 +1000
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="600" height="200">
+
+ <defs>
+ <g id="DoubleDash">
+ <rect x="-3" y="-5" width="2" height="10"/>
+ <rect x="1" y="-5" width="2" height="10"/>
+ </g>
+ <g id="SingleDash">
+ <rect x="-1" y="-5" width="2" height="10"/>
+ </g>
+ </defs>
+
+ <path stroke="deeppink" stroke-width="2" fill="none"
+ d="M 50,100 S 100,132 150,86 200,173 250,76 300,81 350,136 400,87
+ 450,166 500,87 550,96"/>
+
+ <use xlink:href="#DoubleDash" transform="translate(88.12198638916016,110.77350616455078) rotate(2.7080945275247683)"/>
+ <use xlink:href="#SingleDash" transform="translate(126.77587890625,102.24790954589844) rotate(-28.08261801513814)"/>
+ <use xlink:href="#DoubleDash" transform="translate(159.27114868164062,79.1290054321289) rotate(-27.826458887792917)"/>
+ <use xlink:href="#SingleDash" transform="translate(193.02981567382812,91.38743591308594) rotate(50.83472615077562)"/>
+ <use xlink:href="#DoubleDash" transform="translate(223.9566650390625,110.5626449584961) rotate(-28.76214952394234)"/>
+ <use xlink:href="#SingleDash" transform="translate(248.1990203857422,79.33892059326172) rotate(-61.6580320940882)"/>
+ <use xlink:href="#DoubleDash" transform="translate(269.1604919433594,45.36759567260742) rotate(-50.50701621774473)"/>
+ <use xlink:href="#SingleDash" transform="translate(300.0845642089844,49.14472961425781) rotate(59.70489191352364)"/>
+ <use xlink:href="#DoubleDash" transform="translate(317.9646911621094,84.9085922241211) rotate(64.27324174806732)"/>
+ <use xlink:href="#SingleDash" transform="translate(337.40576171875,119.82469940185547) rotate(54.87483664344583)"/>
+ <use xlink:href="#DoubleDash" transform="translate(364.6957092285156,148.68685913085938) rotate(31.17277126108878)"/>
+ <use xlink:href="#SingleDash" transform="translate(400.7223205566406,141.5022735595703) rotate(-34.56687631131095)"/>
+ <use xlink:href="#DoubleDash" transform="translate(435.4225158691406,146.4496307373047) rotate(46.91800835222089)"/>
+ <use xlink:href="#SingleDash" transform="translate(459.1981201171875,178.55545043945312) rotate(47.622099753548795)"/>
+ <use xlink:href="#DoubleDash" transform="translate(490.7275695800781,175.688232421875) rotate(-59.56672534925835)"/>
+ <use xlink:href="#SingleDash" transform="translate(507.64208984375,139.47821044921875) rotate(-66.59569365219079)"/>
+ <use xlink:href="#DoubleDash" transform="translate(527.4227294921875,104.93265533447266) rotate(-45.59595946675031)"/>
+</svg>
--- a/master/painting.html Fri May 25 11:01:34 2012 +1000
+++ b/master/painting.html Fri May 25 11:45:04 2012 +1000
@@ -1945,7 +1945,38 @@
such that its positive x-axis is aligned with the direction of the path
at its position.</p>
-<p class="issue">Add an example.</p>
+<div class="example">
+ <p>The following example shows the use of the <a>'marker-pattern'</a> property
+ to specify a repeating pattern of two different markers spaced along a
+ path.</p>
+
+ <pre><![CDATA[
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200">
+
+ <marker id="DoubleDash" markerWidth="8" markerHeight="12" refX="0" refY="0"
+ 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 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"/>
+ </marker>
+
+ <path d="M 50,100 S 100,132 150,86 200,173 250,76 300,81
+ 350,136 400,87 450,166 500,87 550,96"
+ stroke="deeppink" stroke-width="2" fill="none"
+ marker-pattern="40 url(#DoubleDash) 40 url(#SingleDash)"/>
+</svg>
+]]></pre>
+
+ <div class="figure">
+ <img class="bordered" src="images/painting/markers-repeating.svg"/>
+ <p class="caption">Markers specified with the <a>'marker-pattern'</a> property
+ are placed along the path at fixed distances, not relative to the path
+ vertices.</p>
+ </div>
+</div>
</edit:with>
</div>