svg2: Add an Catmull-Rom curve path data command.

changeset: 694:100a7b69c1e3
user:      Cameron McCormack <>
date:      Fri Aug 22 07:05:40 2014 +1000
Add an Catmull-Rom curve path data command.


 master/changes.html          |   2 +
 master/paths.html            |  72 +++++++++++++++++++++++++++++++++++++++++++-
 master/style/default_svg.css |   3 +-
 3 files changed, 75 insertions(+), 2 deletions(-)

diffs (182 lines):

diff --git a/master/changes.html b/master/changes.html
--- a/master/changes.html
+++ b/master/changes.html
@@ -165,16 +165,18 @@ have been made.</p>
 <h3 id="paths">Paths chapter</h3>
   <li>Added new <strong>B</strong> and
   <strong>b</strong> "bearing" path commands.</li>
+  <li>Added new <strong>R</strong> and <strong>r</strong> Catmull-Rom curve commands.</li>
   <li class='added-since-last-wd'>Define <a>'path'</a>, <a>'polygon'</a> and <a>'polyline'</a> elements with no data set (empty or zero valid commands) to not render.</li>
   <li class='added-since-last-wd'>Define how <a href="paths.html#__svg__SVGPathElement__getPathSegAtLength">getPathSegAtLength</a> and 
   <a href="paths.html#__svg__SVGPathElement__getPointAtLength">getPointAtLength</a> handle out-of-range input, and what to do in case there's no valid path data.</li>
 <h3 id="text">Text chapter</h3>
diff --git a/master/paths.html b/master/paths.html
--- a/master/paths.html
+++ b/master/paths.html
@@ -789,16 +789,81 @@ src="images/paths/arcs02.png" width="426
 <p class="view-as-svg"><a href="images/paths/arcs02.svg">View
 this example as SVG (SVG-enabled browsers only)</a></p>
 <p>Refer to <a
 href="implnote.html#ArcImplementationNotes">Elliptical arc
 implementation notes</a> for detailed implementation notes for
 the path data elliptical arc commands.</p>
+<h3 id="PathDataCatmullRomCommand">The Catmull-Rom curve commands</h3>
+<p>The Catmull-Rom curve commands (<strong>R</strong> or <strong>r</strong>)
+specify control points for a Catmull-Rom curve.  The Catmull-Rom curve
+commands are:</p>
+<table class="PathDataTable">
+  <tr>
+    <th>Command</th>
+    <th>Name</th>
+    <th>Parameters</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td><strong>R</strong> (absolute)<br/>
+      <strong>r</strong> (relative)</td>
+    <td>Catmull-Rom</td>
+    <td>x1 y1 x2 y2 (x y)+</td>
+    <td><p>Draws a Catmull-Rom curve using the specified points as its
+    control points.  The curve is drawn starting from (x1, y1),
+    passing through each subsequent point, before stopping at
+    the second-last point given.  The current point preceding the command
+    provides the first control point of the curve and controls its tangent
+    coming out of (x1, y1).  The final point of the command
+    provides the final control point and controls the tangent
+    of the curve coming in to the second-last point.
+    <strong>R</strong> (uppercase) indicates that absolute coordinates
+    will follows; <strong>r</strong> (lowercase) indicates that
+    relative coordinates will follow.</p>
+    <p>The current point after drawing the Catmull-Rom curve
+    is left at the second-last point of the command, i.e. the point
+    at which the curve ends visually.</p></td>
+  </tr>
+<p>When a relative <strong>r</strong>
+command is used, each of the relative coordinate pairs
+is computed as for those in an <strong>m</strong> command.
+For example, the second control point of the curve €“ the first
+listed in the command €“ is (<var>cpx</var> + <var>x1</var> cos <var>cb</var>
++ <var>y1</var> sin <var>cb</var>, <var>cpy</var> +
+<var>x1</var> sin <var>cb</var> + <var>y1</var> cos <var>cb</var>).</p>
+<p class="issue">Should we broaden this and allow for a tension parameter
+to be specified, and thus be cardinal spline rather than a Catmull-Rom spline?</p>
+<p class="issue">Should we allow for fewer than three coordinate pair arguments
+to the command and try to do something sensible with them, rather than causing
+the path data to become invalid?</p>
+<p class="issue">Is it a problem that the command will move then pen from the current
+position to (x1, y1) without drawing anything?  If so, should we made the
+first control point explicit in the command rather than implicitly taken
+from the current position?  That would then mirror the behavior written
+above for how the current position is left at the second-last control
+<p class="issue">Where should we link to for a definition of Catmull-Rom
+curves so that we don't have to redefine them here?</p>
+<p class="issue">We should clarify what it means to have two consecutive
+<strong>R</strong> or <strong>r</strong> commands.</p>
+<p class="issue">We should add an example.</p>
 <div class="ready-for-wider-review">
 <h3 id="PathDataBearingCommands">The bearing commands</h3>
 <p>The bearing commands (<strong>B</strong> or <strong>b</strong>)
 set the current bearing, which influences the orientation of
 subsequent relative path commands:</p>
@@ -900,16 +965,17 @@ drawto-command:
     | lineto
     | horizontal-lineto
     | vertical-lineto
     | curveto
     | smooth-curveto
     | quadratic-bezier-curveto
     | smooth-quadratic-bezier-curveto
+    | catmull-rom
     | elliptical-arc
     | bearing
     ( "M" | "m" ) <a>wsp</a>* moveto-argument-sequence
     | coordinate-pair <a>comma-wsp</a>? lineto-argument-sequence
@@ -959,18 +1025,22 @@ smooth-quadratic-bezier-curveto-argument
     ( "A" | "a" ) <a>wsp</a>* elliptical-arc-argument-sequence
     | elliptical-arc-argument <a>comma-wsp</a>? elliptical-arc-argument-sequence
     number <a>comma-wsp</a>? number <a>comma-wsp</a>? 
         number <a>comma-wsp</a> flag <a>comma-wsp</a>? flag <a>comma-wsp</a>? coordinate-pair
+    ( "R" | "r" ) <a>wsp</a>* catmull-rom-argument-sequence
+    coordinate-pair coordinate-pair coordinate-pair+
-    ( "B" | "b") <a>wsp</a>* bearing-argument-sequence
+    ( "B" | "b" ) <a>wsp</a>* bearing-argument-sequence
     | number <a>comma-wsp</a>? bearing-argument-sequence
     coordinate <a>comma-wsp</a>? coordinate
diff --git a/master/style/default_svg.css b/master/style/default_svg.css
--- a/master/style/default_svg.css
+++ b/master/style/default_svg.css
@@ -345,16 +345,17 @@ table.attrtable tbody td:first-child { w
 .attrtable tbody td, .attrtable tbody th { vertical-align: baseline }
 .attrtable thead th:first-child + th, .attrtable tbody th + td { text-align: left }
 table > caption { caption-side: bottom }
 table.PathDataTable { border-spacing: 2px; border-style: outset; border-width: 1px }
 table.PathDataTable td,
 table.PathDataTable th { padding: 5px; border-style: inset; border-width: 1px }
+table.PathDataTable td > p:first-child { margin-top: 0; }
 .colorpatch { width: 14px; height: 14px; border: 1px solid black; }
 .eltdef { border-left: 0.5em solid #52A7E0 !important; background: #E9F4FB !important; }
 .eltdef td > p:first-child { margin-top: 0 }
 .eltdef th { white-space: nowrap }
 .eltdef pre.idl { margin: 0; padding: 0; background: none }
@@ -473,9 +474,9 @@ a.self-link {
 a.self-link:hover {
   opacity: 1;
 .heading > a.self-link {
   font-size: 83%;
-.heading > a.self-link::before { content: "§"; }
\ No newline at end of file
+.heading > a.self-link::before { content: "§"; }

Received on Thursday, 21 August 2014 21:08:31 UTC