Add an example for marker-pattern.
authorCameron McCormack <cam@mcc.id.au>
Fri, 25 May 2012 11:45:04 +1000
changeset 154 83819f5392da
parent 153 23f16bdee4d6
child 155 563edf9d922b
Add an example for marker-pattern.
master/images/painting/markers-repeating.png
master/images/painting/markers-repeating.svg
master/painting.html
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>