SVG 2 Requirement: | Support new compositing and blending modes from the Compositing and Blending specification. |
---|---|
Resolution: | SVG WG agrees with publishing the Compositing spec. |
Purpose: | To allow common graphical effects supported by Illustrator, etc. |
Owner: | Nikos (ACTION-3332) |
Graphics elements are blended into the elements already rendered on the canvas using simple alpha compositing, in which the resulting color and opacity at any given pixel on the canvas is the result of the following formulas (all color values use premultiplied alpha):
Er, Eg, Eb - Element color value Ea - Element alpha value Cr, Cg, Cb - Canvas color value (before blending) Ca - Canvas alpha value (before blending) Cr', Cg', Cb' - Canvas color value (after blending) Ca' - Canvas alpha value (after blending) Ca' = 1 - (1 - Ea) * (1 - Ca) Cr' = (1 - Ea) * Cr + Er Cg' = (1 - Ea) * Cg + Eg Cb' = (1 - Ea) * Cb + Eb
The following rendering properties, which provide information about the color space in which to perform the compositing operations, apply to compositing operations:
Support for simple alpha compositing is mandatory. A future module Compositing and Blending will specify additional compositing and blending operations.
This property definition table need to be replaced
with a link to CSS3-box.
Dirk: Probably not. It is a WD, not updated for 5 years.
Name: | overflow |
---|---|
Value: | visible | hidden | scroll | auto |
Initial: | visible |
Applies to: | elements which establish a new viewport, ‘pattern’ elements and ‘marker’ elements |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified |
Animatable: | yes |
The ‘overflow
’ property has the same parameter values and has the
same meaning as defined in CSS 2.1
([CSS21], section 11.1.1);
however, the following additional points apply:
We need to define how 'overflow-x' and 'overflow-y' are going to work in the furture. Sadly, these properties belong to CSS3-box.
overflow
’ property applies to
elements that establish new viewports
(e.g., ‘svg’ elements), ‘pattern’ elements and ‘marker’
elements. For all other elements, the property has no effect (i.e., a clipping
rectangle is not created).overflow
’ property can apply, if
the ‘overflow
’ property has the value hidden or scroll,
the effect is that a new clipping path in the shape of a rectangle is created.
The result is equivalent to defining a ‘clipPath’ element whose
content is a ‘rect’ element which defines the equivalent rectangle,
and then specifying the <uri> of this ‘clipPath’ element on the
‘clip-path
’ property for the given element.overflow
’ property has a value other than
hidden or scroll,
the property has no effect (i.e., a clipping rectangle is not created).overflow
’ property has the value hidden
or scroll, then the user agent will
establish an initial clipping path equal to the bounds of the initial
viewport; otherwise, the initial
clipping path is set according to the clipping rules as defined in CSS 2.1
([CSS21], section 11.1.1).overflow
’ property on the outermost svg element is ignored
for the purposes of visual rendering and the initial clipping path is set to
the bounds of the initial viewport.overflow
’ as defined
in [CSS21-overflow]
is 'visible', and this applies also to the rootmost ‘svg’ element; however,
for child elements of an SVG document, SVG's user agent style sheet
overrides this initial value and sets the ‘overflow
’ property on
elements that establish new viewports
(e.g., ‘svg’ elements), ‘pattern’ elements and
‘marker’ elements to the value 'hidden'.As a result of the above, the default behavior of SVG user agents is to establish a clipping path to the bounds of the initial viewport and to establish a new clipping path for each element which establishes a new viewport and each ‘pattern’ and ‘marker’ element.
It is important to note that initial values for the ‘overflow
’ and
‘clip
’ properties and the user agent
style sheet will result in an initial clipping path that is set to the
bounds of the initial viewport. When attributes ‘viewBox’ and
‘preserveAspectRatio’ attributes are specified, it is sometime
desirable that the clipping path be set to the bounds of the ‘viewBox’
instead of the viewport (or reference rectangle, in the case of
‘marker’ and ‘pattern’ elements), particularly when
‘preserveAspectRatio’ specifies uniform scaling and the aspect ratio of
the ‘viewBox’ does not match the aspect ratio of the viewport.
To set the initial clipping path to the bounds of the ‘viewBox’, set
the bounds of ‘clip
’ property to the same rectangle as specified on the
‘viewBox’ attribute. (Note that the parameters do not match.
‘clip
’ takes values <top>, <right>,<bottom> and
<left>, whereas ‘viewBox’ takes values <min-x>,
<min-y>, <width> and <height>.)
When an ‘svg’ element is either the root element in the
document or is embedded within a document whose layout is determined
according to the layout rules of CSS or XSL, then the user agent must
establish an initial clipping path for the SVG document fragment. The
‘overflow
’ property along with additional SVG
user agent processing rules determine the initial clipping path which
the user agent establishes for the SVG document fragment:
SVG supports the following clipping/masking features:
Both, clipping and masking, are specified in the module CSS Masking [CSS-MASKING].
See the CSS Color Module Level 3 for the definition
of ‘opacity
’. [CSS3COLOR]
The ‘opacity
’ property specifies how opaque a given
graphical element or container element will be when it is
painted to the canvas. When applied to a container element,
this is known as group opacity, and when applied to
an individual rendering element, it is known as object
opacity. The principle for these two operations however
is the same.
There are several other opacity-related properties in SVG:
fill-opacity
’, which specifies the opacity of a fill
operation;stroke-opacity
’, which specifies the opacity of a stroking
operation;solid-opacity
’, which specifies the opacity of a solid color
paint server; andstop-opacity
’, which specifies the opacity of a gradient stop.These four opacity properties are involved in intermediate rendering operations.
Object and group opacity however can be thought of as a post-processing
operation. Conceptually, the object or group to which ‘opacity
’ applies
is rendered into an RGBA offscreen image. The offscreen image as whole is then blended
into the canvas with the specified ‘opacity
’ value used uniformly
across the offscreen image.
An ‘opacity
’ value of 0 means fully transparent and 1 means fully
opaque. Opacity values are clamped to the range [0, 1];
see Clamping values which are restricted
to a particular range for details.
The ‘opacity
’ property applies to the following SVG elements:
‘svg’, ‘g’, ‘symbol’, ‘marker’,
‘a’, ‘switch’, graphics elements and
text content child elements.
The following example illustrates various usage of the ‘opacity
’
property on objects and groups.
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="175" viewBox="0 0 1200 350"> <!-- Background blue rectangle --> <rect x="100" y="100" width="1000" height="150" fill="blue"/> <!-- Red circles going from opaque to nearly transparent --> <circle cx="200" cy="100" r="50" fill="red" opacity="1"/> <circle cx="400" cy="100" r="50" fill="red" opacity=".8"/> <circle cx="600" cy="100" r="50" fill="red" opacity=".6"/> <circle cx="800" cy="100" r="50" fill="red" opacity=".4"/> <circle cx="1000" cy="100" r="50" fill="red" opacity=".2"/> <!-- Opaque group, opaque circles --> <g opacity="1"> <circle cx="182.5" cy="250" r="50" fill="red" opacity="1"/> <circle cx="217.5" cy="250" r="50" fill="green" opacity="1"/> </g> <!-- Group opacity: .5, opacity circles --> <g opacity=".5"> <circle cx="382.5" cy="250" r="50" fill="red" opacity="1"/> <circle cx="417.5" cy="250" r="50" fill="green" opacity="1"/> </g> <!-- Opaque group, semi-transparent green over red --> <g opacity="1"> <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5"/> <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5"/> </g> <!-- Opaque group, semi-transparent red over green --> <g opacity="1"> <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5"/> <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5"/> </g> <!-- Group opacity .5, semi-transparent green over red --> <g opacity=".5"> <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5"/> <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5"/> </g> </svg>
In the example, the top row of circles have differing opacities, ranging from 1.0 to 0.2. The bottom row illustrates five ‘g’ elements, each of which contains overlapping red and green circles, as follows: