author | Erik Dahlström <ed@opera.com> |
Wed, 06 Feb 2013 12:34:17 +1100 | |
changeset 439 | d6c09c2951fe |
parent 438 | efd323e5b751 |
child 440 | 2a261c858619 |
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>