W3C home > Mailing lists > Public > public-svg-wg@w3.org > April to June 2014

svg2: Add stroke-dashcorner and stroke-dashadjust properties. (ACTION...

From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
Date: Thu, 03 Apr 2014 00:01:03 -0700
Message-Id: <hg.f2678313d917.1396508463.3034738116371802840@ps58493.dreamhostps.com>
To: public-svg-wg@w3.org
details:   https://svgwg.org/hg/svg2/rev/f2678313d917
branches:  
changeset: 649:f2678313d917
user:      Cameron McCormack <cam@mcc.id.au>
date:      Thu Apr 03 17:56:16 2014 +1100
description:
Add stroke-dashcorner and stroke-dashadjust properties. (ACTION-3421)

diffstat:

 master/changes.html                   |    3 +
 master/definitions.xml                |    4 +-
 master/images/painting/dashadjust.svg |   19 ++
 master/images/painting/dashcorner.svg |   14 ++
 master/painting.html                  |  227 +++++++++++++++++++++++++++++++++-
 5 files changed, 263 insertions(+), 4 deletions(-)

diffs (389 lines):

diff --git a/master/changes.html b/master/changes.html
--- a/master/changes.html
+++ b/master/changes.html
@@ -210,16 +210,19 @@ have been made.</p>
 
   <li>Added the <span class="attr-value">'auto-start-reverse'</span>
   attribute to the <a>'marker/orient'</a> attribute on <a>'marker element'</a>.</li>
 
   <li>Removed the SVGPaint interface.</li>
 
   <li>Extended the definitions of <a>'fill'</a> and
   <a>'stroke'</a> <a>&lt;paint&gt;</a> so that they can take multiple paints.</li>
+
+  <li class="added-since-last-wd">Added the <a>'stroke-dashcorner'</a> and
+  <a>'stroke-dashadjust'</a> properties.</li>
 </ul>
 
 <h3 id="color">Color chapter</h3>
 
 <ul>
   <li>Added requirements for images to be color managed.</li>
 
   <li>Added new color syntaxes from the SVG Color specification: RGBA colors, HSL colors,
diff --git a/master/definitions.xml b/master/definitions.xml
--- a/master/definitions.xml
+++ b/master/definitions.xml
@@ -1012,17 +1012,17 @@
       name='style'>
     <attribute name='class' href='styling.html#ClassAttribute' animatable='yes'/>
     <attribute name='style' href='styling.html#StyleAttribute'/>
   </attributecategory>
 
   <attributecategory
     name='presentation'
     href='intro.html#TermPresentationAttribute'
-    presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering, letter-spacing, lighting-color, line-break, line-height, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, overflow-wrap, paint-order, pointer-events, shape-inside, shape-margin, shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, tab-size, text-align, text-anchor, text-decoration, text-indent, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-break, word-spacing, word-wrap, writing-mode'/>
+    presentationattributes='alignment-baseline, baseline-shift, buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering, letter-spacing, lighting-color, line-break, line-height, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, overflow-wrap, paint-order, pointer-events, shape-inside, shape-margin, shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dashadjust, stroke-dasharray, stroke-dashcorner, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, tab-size, text-align, text-anchor, text-decoration, text-indent, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-break, word-spacing, word-wrap, writing-mode'/>
 
   <attributecategory
       name='document event'
       href='intro.html#TermDocumentEventAttribute'>
     <attribute name='onunload' href='script.html#OnUnloadEventAttribute'/>
     <attribute name='onabort' href='script.html#OnAbortEventAttribute'/>
     <attribute name='onerror' href='script.html#OnErrorEventAttribute'/>
     <attribute name='onresize' href='script.html#OnResizeEventAttribute'/>
@@ -1156,17 +1156,19 @@
   <property name='paint-order' href='painting.html#PaintOrderProperty'/>
   <property name='pointer-events' href='interact.html#PointerEventsProperty'/>
   <property name='shape-rendering' href='painting.html#ShapeRenderingProperty'/>
   <property name='solid-color' href='pservers.html#SolidColorProperty'/>
   <property name='solid-opacity' href='pservers.html#SolidOpacityProperty'/>
   <property name='stop-color' href='pservers.html#StopColorProperty'/>
   <property name='stop-opacity' href='pservers.html#StopOpacityProperty'/>
   <property name='stroke' href='painting.html#StrokeProperty'/>
+  <property name='stroke-dashadjust' href='painting.html#StrokeDashadjustProperty'/>
   <property name='stroke-dasharray' href='painting.html#StrokeDasharrayProperty'/>
+  <property name='stroke-dashcorner' href='painting.html#StrokeDashcornerProperty'/>
   <property name='stroke-dashoffset' href='painting.html#StrokeDashoffsetProperty'/>
   <property name='stroke-linecap' href='painting.html#StrokeLinecapProperty'/>
   <property name='stroke-linejoin' href='painting.html#StrokeLinejoinProperty'/>
   <property name='stroke-miterlimit' href='painting.html#StrokeMiterlimitProperty'/>
   <property name='stroke-opacity' href='painting.html#StrokeOpacityProperty'/>
   <property name='stroke-width' href='painting.html#StrokeWidthProperty'/>
   <property name='text-anchor' href='text.html#TextAnchorProperty'/>
   <property name='text-decoration' href='text.html#TextDecorationProperty'/>
diff --git a/master/images/painting/dashadjust.svg b/master/images/painting/dashadjust.svg
new file mode 100644
--- /dev/null
+++ b/master/images/painting/dashadjust.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="600" height="200" viewBox="0 0 600 200">
+
+  <!-- dash array "4 4 16 4 4 16" -->
+  <g fill="deeppink" fill-opacity="0.25" stroke="black" stroke-width="2px">
+    <!-- length = 376.991118, scale factor 1.170985383 -->
+    <circle cx="100" cy="100" r="60"
+      stroke-dasharray="4.68394 4.68394 18.735766 4.68394 4.68394 18.735766"/>
+
+    <!-- length = 400, scale factor 1.041666667 -->
+    <rect x="250" y="50" width="100" height="100"
+      stroke-dasharray="4.166666667 4.166666667 16.666666667 4.166666667 4.166666667 16.666666667"
+      stroke-dashoffset="-2"/>
+
+    <!-- length = 701.63525390625, scale factor 1.04410008 -->
+    <path d="M 436,20 c 2.408549,9.42613 -12.983686,14.71063 -7.730043,25.24988 4.536116,6.77556 14.333519,7.63607 21.760859,9.16241 9.517786,-1.24524 15.711878,6.35061 14.294792,15.3982 0.27166,10.93797 2.042351,23.3104 -5.747338,32.30758 -4.994998,8.56148 -13.327083,15.03017 -17.14287,24.17533 -1.289945,7.54888 -2.835406,15.46803 -2.039063,23.07663 3.976511,10.1708 16.132713,11.837 25.390356,14.2603 10.362691,4.042 18.905303,-4.4596 19.235058,-14.6539 2.782791,-9.6512 -0.610768,-19.93933 2.709299,-29.39752 4.815776,-10.28115 13.556443,1.4717 15.445363,7.76852 8.13915,13.202 17.30453,26.1912 29.28373,36.2665 8.45148,5.9843 17.55039,-1.0727 24.08191,-6.4036 10.20252,-6.5615 20.95367,-15.9684 21.26163,-29.0514 -0.58,-9.23056 -10.63156,-12.97712 -17.98478,-15.90328 -8.38326,-3.32978 -18.00259,-8.25057 -19.54451,-18.16091 -1.97295,-7.55348 -0.6407,-18.23459 7.99701,-20.82977 8.37765,-3.46227 19.5001,-0.58741 25.78554,-8.38877 5.8282,-10.31759 3.00896,-23.49721 -2.59629,-33.33595 -3.06268,-8.63819 -11.41908,-13.44316 -20.40706,-12.3559 -9.12649,-1.62859 -17.67912,2.69742 -24.93493,7.78488 -10.94153,7.0203 -20.83063,16.48061 -33.972689,19.20183 -7.50619,3.92219 -16.793117,2.61806 -18.268954,-7.05962 -3.336794,-8.075 -5.305736,-16.84134 -9.673804,-24.38533 -7.062387,-5.20866 -18.393771,-3.45871 -25.695367,0.82991 -1.906924,0.80664 -1.728902,2.79273 -1.507849,4.44398 z"
+          stroke-dasharray="4.176400321 4.176400321 16.705601283 4.176400321 4.176400321 16.705601283"/>
+  </g>
+</svg>
diff --git a/master/images/painting/dashcorner.svg b/master/images/painting/dashcorner.svg
new file mode 100644
--- /dev/null
+++ b/master/images/painting/dashcorner.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="300" height="150" viewBox="0 0 300 150">
+
+  <g fill="none" stroke-width="4px" stroke="deeppink" stroke-linecap="round">
+    <path d="M 110,35 h 80 v 80 h -80 z"
+          stroke-dashoffset="16px" stroke-dasharray="32 48"/>
+    <g stroke-dasharray="0 8">
+      <path d="M 110,35 m 16,0 h 48"/>
+      <path d="M 190,35 m 0,16 v 48"/>
+      <path d="M 190,115 m -16,0 h -48"/>
+      <path d="M 110,115 m 0,-16 v -48"/>
+    </g>
+  </g>
+</svg>
diff --git a/master/painting.html b/master/painting.html
--- a/master/painting.html
+++ b/master/painting.html
@@ -948,18 +948,19 @@ formula:</p>
 <p>For example, a miter limit of 1.414 converts miters to bevels for
 theta less than 90 degrees, a limit of 4.0 converts them for theta less
 than approximately 29 degrees, and a limit of 10.0 converts them for
 theta less than approximately 11.5 degrees.</p>
 
 <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>,
+<span class="property">'stroke-dashoffset'</span>, <span class="property">'stroke-dashcorner'</span>
+and <span class="property">'stroke-dashadjust'</span> properties</h3>
 
 <table class="propdef">
   <tr>
     <th>Name:</th>
     <td><dfn id="StrokeDasharrayProperty">stroke-dasharray</dfn></td>
   </tr>
   <tr>
     <th>Value:</th>
@@ -1105,17 +1106,234 @@ value is negative, then the effect is th
   <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
 description of positions along a path that dashes will be placed.</p>
-
+</div>
+
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="StrokeDashcornerProperty">stroke-dashcorner</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td>none | <a>&lt;length&gt;</a></td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>none</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>shapes</a> and <a>text content elements</a></td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>yes</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>refer to the size of the current viewport (see <a href="coords.html#Units">Units</a>)</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed&#160;value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a>Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+
+<p class="note">New in SVG 2.  Added to allow better control of dashing
+at the vertices of a shape, such as at the four corners of a rectangle.</p>
+
+<p>The <a>'stroke-dashcorner'</a> property controls whether a dash
+is always painted at the vertices of a stroked shape.  The points at which
+a dash corner is painted include the start and end points of every
+segment within the shape's <a>equivalent path</a>.</p>
+
+<p class="issue">This will not help with placing a corner dash on a
+<a>'rect'</a> with rounded corners, as they will also be placed at
+the points between the arcs forming the rounded corners and the
+straight line segments.</p>
+
+<dl>
+  <dt><span class='prop-value'>none</span></dt>
+  <dd>Indicates that no dashes are required to be painted at the
+  vertices of the shape.</dd>
+
+  <dt><span class='prop-value'>&lt;length&gt;</span></dt>
+  <dd>Specifies that a dash of the given length is to be painted
+  at each vertex of the shape.  For an open shape, the first
+  corner dash is positioned so that it begins at the start of
+  the path, and the last corner dash so that it ends at the
+  end of the path.  The other corner dashes of an open shape,
+  and all corner dashes of a closed shape, are positioned so that
+  they are centered on their vertex.</dd>
+</dl>
+
+<p class="issue">Should the corner dash at the first and last vertex
+of an open shape be half the length of the others?  Should this be
+author controllable?</p>
+
+<p class="issue">Should there be a way to specify a padding, so that
+any dash pattern between the corner dashes does not not run up against them?</p>
+
+<p>The <a>'stroke-dashcorner'</a> property also controls how
+the dash pattern given by <a>'stroke-dasharray'</a> is repeated.
+When <span class='prop-value'>none</span> is used, the dash pattern
+is repeated over the entire length of the subpath.  When any
+other value is used, the dash pattern is repeated separately
+on each path segment in the space between the segement's
+two adjacent corner dashes.</p>
+
+<p class="issue">Need to define what happens when corner dashes would overlap.</p>
+
+<div class="figure">
+  <img class="bordered" src="images/painting/dashcorner.svg"
+       alt="Image showing a rectangle at each corner and short dashes in between."/>
+  <p class="caption">A rectangle painted with a dashed stroke and with
+  corner dashes.  The dashing pattern is <span class="prop-value">0,8</span>
+  and the corner dash length is <span class="prop-value">32</span>.</p>
+</div>
+
+<table class="propdef">
+  <tr>
+    <th>Name:</th>
+    <td><dfn id="StrokeDashadjustProperty">stroke-dashadjust</dfn></td>
+  </tr>
+  <tr>
+    <th>Value:</th>
+    <td>none | [stretch | compress] [dashes | gaps]?</td>
+  </tr>
+  <tr>
+    <th>Initial:</th>
+    <td>none</td>
+  </tr>
+  <tr>
+    <th>Applies to:</th>
+    <td><a>shapes</a> and <a>text content elements</a></td>
+  </tr>
+  <tr>
+    <th>Inherited:</th>
+    <td>yes</td>
+  </tr>
+  <tr>
+    <th>Percentages:</th>
+    <td>N/A</td>
+  </tr>
+  <tr>
+    <th>Media:</th>
+    <td>visual</td>
+  </tr>
+  <tr>
+    <th>Computed&#160;value:</th>
+    <td>as specified</td>
+  </tr>
+  <tr>
+    <th><a>Animatable</a>:</th>
+    <td>yes</td>
+  </tr>
+</table>
+
+<p class="note">New in SVG 2.  Added to allow for more visually
+pleasing stroke dash patterns.</p>
+
+<p>The <a>'stroke-dashadjust'</a> property specifies whether and
+how a stroke's dash pattern will be adjusted so that it is repeated
+a whole number of times along an element's subpaths.</p>
+
+<dl>
+  <dt><span class='prop-value'>none</span></dt>
+  <dd>Indicates that no adjustment of the dash pattern takes place.</dd>
+
+  <dt><span class='prop-value'>stretch</span></dt>
+  <dd>Indicates that when the dash pattern does not fit into a subpath
+  a whole number times, the dashes or gaps (or both) will be lengthened
+  so that it does.</dd>
+
+  <dt><span class='prop-value'>compress</span></dt>
+  <dd>Indicates that when the dash pattern does not fit into a subpath
+  a whole number times, the dashes or gaps (or both) will be shortened
+  so that it does.</dd>
+
+  <dt><span class='prop-value'>dashes</span></dt>
+  <dd>Indicates that when a dash pattern is to be stretched or compressed,
+  only the length of the dashes will be adjusted; the gaps will remain
+  as specified.</dd>
+
+  <dt><span class='prop-value'>gaps</span></dt>
+  <dd>Indicates that when a dash pattern is to be stretched or compressed,
+  only the length of the gaps will be adjusted; the dashes will remain
+  as specified.</dd>
+</dl>
+
+<p class="issue">Do we need to be able to choose to stretch or compress?</p>
+
+<p>If neither the <span class='prop-value'>dashes</span> or
+<span class='prop-value'>gaps</span> keyword is given, both the
+dashes and the gaps will be adjusted.</p>
+
+<p>The target length that a dash pattern will be adjusted to depends
+on the value of the <a>'stroke-dashcorner'</a> property:</p>
+
+<ol>
+  <li>If <a>'stroke-dashcorner'</a> is <span class='prop-value'>none</span>,
+  then the dash pattern will be adjusted to fit within the length of
+  the subpath a whole number of times.</li>
+
+  <li>If <a>'stroke-dashcorner'</a> has any other value, including a zero
+  length, then the dash pattern will be adjusted differently for each
+  segment of the subpath such that it fits between the two corner
+  dashes at the ends of the segment a whole number of times.</li>
+</ol>
+
+<p>The adjustment of dash and gap length in a dash pattern is done by
+scaling the lengths by a factor, which is the number closest to 1 that
+will result in the dash pattern fitting in the target length a whole
+number of times.  If <span class='prop-value'>stretch</span> is used,
+the factor is a number between 1 and 2, while if <span class='prop-value'>compress</span>
+is used, the factor is a number between 0 and 1.  If there
+is no appropriate factor that can be chosen €“ for example if
+<span class='prop-value'>stretch</span> is used but the
+dash pattern is longer than the target length, or if <span class='prop-value'>gaps</span>
+was specified but all of the gaps in the dash pattern are zero €“ then
+no adjustment is performed.</p>
+
+<p class="issue">Should there be an <span class='prop-value'>auto</span>
+value which means round to the closest number of whole repetitions?</p>
+
+<p class="issue">Does the compression or expansion of the dashes and gaps
+happen after an odd-lengthed dash array is doubled so that it has an even
+number of entries or before? Probably after.</p>
+
+<p class="issue">Do we want to allow control of whether the stroke ends with a
+dash or with a gap? For a closed path, you probably want a gap at the end,
+while for a non-closed path, a dash at the end is probably better. Omit control
+for this, but just do it automatically based on whether the path is closed?</p>
+
+<div class="figure">
+  <img class="bordered" src="images/painting/dashadjust.svg"
+       alt="Image showing three shapes stroked with the same dash pattern, all adjusted to their individual path lengths."/>
+  <p class="caption">The same dash stroke used on three
+  different paths, adjusted to fit a whole number of
+  times on each.</p>
+</div>
+
+<div class="ready-for-wider-review">
 <h3 id="StrokeShape">Computing the shape of the stroke</h3>
 
 <div class="annotation svg2-requirement">
   <table>
     <tr>
       <th>SVG 2 Requirement:</th>
       <td>Specify stroke dashing more precisely.</td>
     </tr>
@@ -1133,16 +1351,19 @@ description of positions along a path th
     </tr>
   </table>
 </div>
 
 <p class="issue">Something in this section needs to reference
 <a>'path/pathLength'</a> so that dash lengths are in the author's
 path length space.</p>
 
+<p class="issue">This section doesn't handle <a>'stroke-dashcorner'</a>
+and <a>'stroke-dashadjust'</a> yet.</p>
+
 <p>The <dfn id="TermStrokeShape">stroke shape</dfn> of an element is the
 shape that is filled by the <a>'stroke'</a> property.  The following algorithm
 describes what the stroke shape of a <a>'path'</a> or <a>basic shape</a> is,
 taking into account the stroking properties above:</p>
 
 <p class="issue">This should include text elements too, but should we
 keep stroke dashing on text?</p>
 
Received on Thursday, 3 April 2014 07:01:36 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:20:19 UTC