This document is prepared for ACTION-3578 based on this discussion and this material about Non Scaling Objects / constrained transforms.

12.6. Vector Effects

Sometimes it is of interest to let the outline of an object keep its original width or to let the position of an object fix 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, or introductory notes on the graphic chart in which panning is possible.

To offer such effects regarding special coordinate transformations and graphic drawings, SVG Tiny 1.2 introduces the 'vector-effect' property. Although SVG Tiny 1.2 introduced only non-scaling stroke behavior, this version introduces a number of additional effects. Furthermore, since these effects can be specified in combination, they show more various effects. And, future versions of the SVG language will allow for more powerful vector effects through this property.

Name	vector-effect
Value	none \| [ non-scaling-stroke \| non-scaling \| non-rotation \| fixed-position ]* [ \| viewport \| screen \| device \| <#id> \| <Number> ]
Initial	none
Applies to	graphics elements , structural element
Inherited	no
Percentages	N/A
Media	visual
Computed value	as specified
Animatable	yes

values

none: 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.

non-scaling-stroke: Modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shape's path in current user space 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. Host coordinate space is specified by the option mentioned later.; 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 user coordinate system. (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. This value is effective only for the graphics element which can have a stroke.

non-scaling (or no-scaling-object, fixed-size, fixed-size-object, non-scaling-size other idea??): Specifies special user space toward this element and its descendant by constrained transformations with the following characteristics.

The scale of the user space do not change in spite of change of CTMs from a host coordinate space.
However, it does not specify the suppression of rotation and skew.
Also, it does not specify the fixation of placement of userspace.

Since non-scaling suppresses scaling of user coordinate space, it also has the characteristic of non-scaling-stroke. The transformation formula and the example behavior are indicated to the following chapter.

non-rotation (or non-rotation-object, non-rotate, non-rotate-object, fixed-rotate .. other idea??): Specifies special user space toward this element and its descendant by constrained transformations with the following characteristics.

The rotation and skew of the user space is suppressd in spite of change of CTMs from a host coordinate space.
However, it does not specify the suppression of scaling.
Also, it does not specify the fixation of placement of userspace.

The transformation formula and the example behavior are indicated to the following chapter.

fixed-position (or non-transfer-object, non-transfer, non-translate, fixed-anchor .. other idea??): Specifies special user space toward this element and its descendant by constrained transformations with the following characteristics.

The placement of userspace is fixed in spite of change of CTMs from a host coordinate space.
However, it does not specify the suppression of rotation, skew and scaling.

When the element that has fixed-position effect and also has transform attribute, that transform is consumed for this effect. The matrix element of e and f is used to transfer the origin of fixed user space. The transformation formula and the example behavior are indicated to the following chapter.

These values can be enumerated. Thereby, the effect which has these characteristics simultaneously can be specified.

The following two values assist the above-mentioned main values. They show the host coordinate space of special coordinate transformations. Especially it has effective for the element belonging to nested viewport coordinate systems. An initial value in case it is not specified is screen.

viewport: Specifies immediate viewport coordinate system as the host coordinate space. When that element belongs to nested viewport coordinate system, vector effects works effectively only for change of CTM of viewport coordinate system to which that element belongs directly. On the other hand, that vector effect is not effective for change of CTM on ancestral viewport coordinate system.

screen: Specifies screen's coordinate system ("screen coordinate space" in SVGT1.2) of user agent as the host coordinate space. Even if that element belongs to nested viewport coordinate system, that vector effect is always effective for change of CTM of the any hierarchy. However, for change of the transformation which browser chrome naturally has, it is not effective.

device: That vector effect is totally effective. Even if changing of the transformation which browser chrome naturally has.

<number>, <URL>, <#id>: from seattle discussion.

examples

<rect vector-effect="non-scaling-stroke" x="100" y="100" width="50" height="50"/>

<rect vector-effect="non-scaling non-rotation screen" x="100" y="100" width="50" height="50"/>

<rect vector-effect="non-scaling non-rotation fixed-position" x="100" y="100" width="50" height="50"/>

<rect vector-effect="non-rotation fixed-position" transform="translate(100 100)" x="100" y="100" width="50" height="50"/>

Emulation by WebApp

Note: This emulation is not showing the difference in processing for nested viewport coordinate systyems.

Transformation Formula

This chapter shows the list of transformation formulas regarding all combinations of the values for clarification of the behavior of vector effects.

Based on Nested transformations chapter, a formula for the coordinate system of the device is as follows.

Here, dpr is Device Pixel Ratio (scalar). And [BCM] presupposes that it is a matrix synthesizing the coordinate transformation by Browser Chrome's built-in zooming panning functions. Informative References - CSS zoom module?

Hereafter, x(userspace), y(userspace) is abbreviated as x, y.

Formulas which provided vector effects becomes below toward the above-mentioned formula. Here, xf and yf are user coordinate of the corresponding element and its descendant. And, xo and yo are matrix element e and f of the transform attribute which the corresponding element element has.

 <circle vector-effect="<value>" transform="translate(xo yo)" cx="xf" cy="yf" r=".."/>

non-scaling
non-rotation
non-scaling non-rotation

fixed-position
fixed-position non-scaling
fixed-position non-rotation
fixed-position non-scaling non-rotation

nested viewport coordinate systems

This is coordinate transformation formula for nested viewport coordinate systems. CTMroot is CTM of a root viewport coordinate systems and CTMdecendant* are CTMs of the descendants.

Question: Does getScreenCTM return ([CTMroot][CTMdecendant1]...[CTMdecendantN])? Or, does it include also [DPR] or [BCM]?

Formulas which provided vector effects which nested viewport was considered becomes below.

non-scaling
non-rotation
non-scaling non-rotation

fixed-position
fixed-position non-scaling
fixed-position non-rotation
fixed-position non-scaling non-rotation


non-scaling viewport
non-rotation viewport
non-scaling non-rotation viewport

fixed-position viewport
fixed-position non-scaling viewport
fixed-position non-rotation viewport
fixed-position non-scaling non-rotation viewport