add vector-effect (non-scaling-stroke)
authorErik Dahlström <ed@opera.com>
Wed, 06 Feb 2013 12:34:17 +1100
changeset 439 d6c09c2951fe
parent 438 efd323e5b751
child 440 2a261c858619
add vector-effect (non-scaling-stroke)
master/definitions.xml
master/painting.html
master/propidx.html
--- a/master/definitions.xml	Wed Feb 06 17:32:04 2013 +1100
+++ b/master/definitions.xml	Wed Feb 06 12:34:17 2013 +1100
@@ -890,7 +890,7 @@
   <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, image-rendering, letter-spacing, lighting-color, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, paint-order, pointer-events, shape-rendering, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-overflow, text-rendering, transform, unicode-bidi, visibility, white-space, word-spacing, 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, image-rendering, letter-spacing, lighting-color, marker-end, marker-mid, marker-pattern, marker-segment, marker-start, mask, opacity, overflow, paint-order, pointer-events, shape-rendering, solid-color, solid-opacity, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-overflow, text-rendering, transform, unicode-bidi, vector-effect, visibility, white-space, word-spacing, writing-mode'/>
 
   <attributecategory
       name='document event'
@@ -1036,6 +1036,7 @@
   <property name='text-rendering' href='painting.html#TextRenderingProperty'/>
   <property name='transform' href='coords.html#TransformProperty'/>
   <property name='unicode-bidi' href='text.html#UnicodeBidiProperty'/>
+  <property name='vector-effect' href='painting.html#NonScalingStroke'/>
   <property name='word-spacing' href='text.html#WordSpacingProperty'/>
   <property name='writing-mode' href='text.html#WritingModeProperty'/>
 
--- a/master/painting.html	Wed Feb 06 17:32:04 2013 +1100
+++ b/master/painting.html	Wed Feb 06 12:34:17 2013 +1100
@@ -1709,6 +1709,97 @@
 although it has no effect on a <a>container element</a> itself,
 its inherited value can affect descendant elements.</p>
 
+<h2 id="NonScalingStroke">Non-scaling stroke</h2>
+      <p>Sometimes it is of interest to let the outline of an object keep its original width no
+         matter which transforms are applied to it. For example, in a map with a 2px wide line representing
+         roads it is of interest to keep the roads 2px wide even when the user zooms into the
+         map. To achieve this, SVG Tiny 1.2 introduces the <a href="#VectorEffectProperty"><span class="prop-name">'vector-effect'</span></a>
+         property. Future versions of the SVG language will allow for more powerful vector
+         effects through this property but this version restricts it to being able to
+         specify the non-scaling stroke behavior. </p>
+
+      <div id="VectorEffectProperty" class="propdef">
+         <dl>
+            <dt id="propdef-vector-effect">
+               <span class="index-def propdef-title prop-name" title="'vector-effect'">'vector-effect'</span>
+            </dt>
+            <dd>
+               <table summary="vector-effect property" class="propinfo" cellspacing="0" cellpadding="0">
+                  <tr valign="baseline">
+                     <td>
+                        <em>Value:</em>   </td>
+                     <td> non-scaling-stroke | none | <a class="noxref" href="http://www.w3.org/TR/CSS2/cascade.html#value-def-inherit"><span class="value-inst-inherit noxref">inherit</span></a>
+                     </td>
+                  </tr>
+                  <tr valign="baseline">
+                     <td>
+                        <em>Initial:</em>   </td>
+                     <td> none </td>
+                  </tr>
+                  <tr valign="baseline">
+                     <td>
+                        <em>Applies to:</em>   </td>
+                     <td>
+                        <a href="intro.html#TermGraphicsElement"><span class="svg-term">graphics elements</span></a>
+                     </td>
+                  </tr>
+                  <tr valign="baseline">
+                     <td>
+                        <em>Inherited:</em>   </td>
+                     <td> no </td>
+                  </tr>
+                  <tr valign="baseline">
+                     <td>
+                        <em>Percentages:</em>   </td>
+                     <td> N/A </td>
+                  </tr>
+                  <tr valign="baseline">
+                     <td>
+                        <em>Media:</em>   </td>
+                     <td> visual </td>
+                  </tr>
+                  <tr valign="baseline">
+                     <td>
+                        <em><a href="animate.html#Animatable">Animatable</a>:</em>   </td>
+                     <td> yes </td>
+                  </tr>
+                  <tr valign="baseline">
+                     <td>
+                        <em>Computed value:</em>   </td>
+                     <td> Specified value, except inherit </td>
+                  </tr>
+               </table>
+            </dd>
+         </dl>
+      </div>
+
+
+      <dl>
+         <dt class="prop-value"> none </dt>
+         <dd> Specifies that no vector effect shall be applied, i.e. the default rendering behaviour
+            from SVG 1.1 is used which is to first fill the geometry of a shape with a specified
+            paint, then stroke the outline with a specified paint. </dd>
+         <dt class="prop-value"> non-scaling-stroke </dt>
+         <dd> Modifies the way an object is stroked. Normally stroking involves calculating stroke
+            outline of the shape's path in current <a href="intro.html#TermUserSpace"><span class="svg-term">user space</span></a> and filling that outline with the
+            stroke paint (color or gradient). With the non-scaling-stroke vector effect, stroke outline
+            shall be calculated in the "host" coordinate space instead of user coordinate space.
+            More precisely: a user agent establishes a host coordinate space which in SVG Tiny 1.2 is
+            always the same as "screen coordinate space". The stroke outline is calculated in the
+            following manner: first, the shape's path is transformed into the host coordinate space.
+            Stroke outline is calculated in the host coordinate space. The resulting outline is
+            transformed back to the <a href="intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a>.
+            (Stroke outline is always filled with stroke paint in the current user space). The resulting visual effect of this
+            modification is that stroke width is not dependant on the transformations of the element
+            (including non-uniform scaling and shear transformations) and zoom level. </dd>
+      </dl>
+
+      <p>Note: Future versions of SVG may allow ways to control the host coordinate system.</p>
+
+      <p>Below is an example of the non-scaling-stroke <a href="#VectorEffectProperty"><span class="prop-name">'vector-effect'</span></a>.</p>
+
+      <edit:includefile href='images/painting/non-scaling-stroke.svg' link="yes" image="yes"/>
+
 
 <h2 id="Markers">Markers</h2>
 
--- a/master/propidx.html	Wed Feb 06 17:32:04 2013 +1100
+++ b/master/propidx.html	Wed Feb 06 12:34:17 2013 +1100
@@ -647,6 +647,16 @@
           <td>no</td>
         </tr>
         <tr>
+          <th><a>'vector-effect'</a></th>
+          <td>non-scaling-stroke | none</td>
+          <td>none</td>
+          <td><a>graphics elements</a></td>
+          <td>no</td>
+          <td>N/A</td>
+          <td><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/media.html#visual-media-group">visual</a></td>
+          <td>yes</td>
+        </tr>
+        <tr>
           <th><a>'visibility'</a></th>
           <td>visible | hidden | collapse </td>
           <td>visible</td>